Blog

Signals Blog

Fast Client-Side Chemical Structure Rendering with ChemWriter

Many developers of chemistry Web applications face the frustrating problem of displaying chemical structure images. There are a handful of approaches, none of them especially easy to implement - until recently.

ChemWriter 3 now offers a solution to this problem with its high-performance Image component. Image gives you the ability to display full-color chemical structure images with just a few lines of HTML.

Like Editor, Image is deployed unobtrusively:

A Linked ChemWriter Image
<!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 style="width: 300px; height: 150px;">
      <div data-chemwriter-ui="image"
           data-chemwriter-src="http://chemwriter.com/data/structure-3.mol">
      </div>
    </div>
  </body>
</html>

Also like Editor, the source file can be loaded from inline data. This mode is especially helpful when many structures are displayed on the same page.

An Inline ChemWriter Image
<!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 style="width: 300px; height: 150px;">
      <div data-chemwriter-ui="image"
           data-chemwriter-data="[NO NAME]\n  CHEMW2  02061315242D                              \nCreated with ChemWriter - http://chemwriter.com\n 12 12  0  0  1  0            999 V2000\n    5.6944   -5.5278    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    6.5605   -6.0278    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    7.4265   -5.5278    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    7.4265   -4.5278    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    6.5605   -4.0278    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    5.6944   -4.5278    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    8.2925   -4.0278    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    9.1585   -4.5278    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   10.0246   -4.0278    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n    8.2925   -3.0278    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n    4.8284   -4.0278    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n    4.8284   -6.0278    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  2  3  1  0  0  0  0\n  3  4  2  0  0  0  0\n  4  5  1  0  0  0  0\n  5  6  2  0  0  0  0\n  6  1  1  0  0  0  0\n  4  7  1  0  0  0  0\n  7  8  1  0  0  0  0\n  8  9  1  0  0  0  0\n  7 10  1  4  0  0  0\n  6 11  1  0  0  0  0\n  1 12  1  0  0  0  0\nM  END\n">
      </div>
    </div>
  </body>
</html>

The ChemWriter Image component offers many advantages over other methods, including:

See the ChemWriter Developer Guide for additional examples.