Blog

Signals Blog

Build a Working ChemWriter Editor Page in 13 Lines of HTML

ChemWriter 3 simplifies the way components such as the structure editor are embedded. For example, a minimal page containing a fully-functional Editor can be created with only 3 ChemWriter-specific tags: a <link> tag to load the stylesheet; a <script> tag to load ChemWriter; and a <div> element in which to host the component.

Show a Blank ChemWriter Editor
<!DOCTYPE HTML> 
<html>
  <head>
    <title>Show a Blank ChemWriter Editor</title>
    <link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
    <script src="https://chemwriter.com/sdk/chemwriter.js"></script>
  </head>
  <body>
    <div id="editor" data-chemwriter-width="100%" data-chemwriter-height="350"
         data-chemwriter-ui="editor">
    </div>
  </body>
</html>

The result is an editor 350 pixels high and which spans the available width of the page. For details, see the ChemWriter Quickstart.