Quickstart

ChemWriter contains two standard user interface elements: Editor, a chemical structure editor and Image, a high-performance chemical structure imager.

Installation

There's nothing to download or install while developing prototypes and testing integration. Source files are loaded by linking them within any HTML document:

Editor

Editor is a full-featured chemical structure editor that can be deployed unobtrusively.

Deploy Editor Component Run Demo in New Tab
<!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>
  • The DOCTYPE declaration identifies the page as HTML5.
  • Both chemwriter.js and chemwriter.css are hotlinked during development and testing.
  • Editor is deployed by assigning data- attributes to a sacrificial div element.
  • An id attribute is used to identify the resulting component after instantiation.
  • Assign a data‑chemwriter‑license value with the path to your license file after buying a subscription.

Image

Image is a lightweight chemical structure imager designed for applications that load dozens or hundreds of structure images on a single page.

Deploy Image Component Run Demo in New Tab
<!DOCTYPE html>
<html>
  <head>
    <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>
  • Size defaults to 100% of the enclosing element if not given by data‑chemwriter‑width and data‑chemwriter‑height.
  • Use data‑chemwriter‑src to render a linked file.
  • Use data‑chemwriter‑data to render an inline file.