ChemWriter

Quickstart

ChemWriter contains two standard user interface components:

Installation

There's nothing to download or install during development. Load the required files by hotlinking them within an HTML document:

Editor

Editor is deployed unobtrusively as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Show a Blank 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="500" data-chemwriter-height="350"
         data-chemwriter-ui="editor"
         data-chemwriter-src="https://chemwriter.com/data/structure-1.mol">
    </div>
  </body>
</html>

Keep these factors in mind when developing with Editor:

Image

Image is a lightweight, high-performance chemical structure imager. It is deployed analogously to Editor by replacing the value of the data-chemwriter-ui attribute with "image":

<!DOCTYPE html>
<html>
  <head>
    <title>Render a structure image.</title>
    <link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css"> 
    <script src="https://chemwriter.com/sdk/chemwriter.js">
    </script>
  </head>
  <body>
    <div style="width: 200px; height: 130px; border: 1px dotted gray;">
      <div id="image"
           data-chemwriter-src="https://chemwriter.com/data/structure-1.mol"
           data-chemwriter-ui="image">
      </div>
    </div>
  </body>
</html>

Keep these factors in mind when developing with Image: