ChemWriter

Change Drawing Style

The appearance of chemical structures is controlled by a stylesheet. A stylesheet is a potentially-nested set of key-value pairs defining various drawing properties.

Currently, inline stylesheets are supported. These can be deployed by adding a <script> tag with a type attribute of "application/json" and a key-only data-chemwriter-style attribute.

The example stylesheet below preserves ChemWriter's default settings with two exceptions: methyl groups are given the label "CH3"; and nitrogen atom labels are colored green.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Inline Stylesheet | ChemWriter</title>
    <link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css"> 
    <script src="https://chemwriter.com/sdk/chemwriter.js" data-chemwriter-license="https://chemwriter.com/licenses/396f597e46fbdbd39e34108b010c6efcb2ef2ed2.txt"></script>
    <style>
      .image { max-width: 350px; height: 200px; }
    </style>
  </head>
  <body>
    <div class="image">
      <div data-chemwriter-ui="image"
           data-chemwriter-src="https://chemwriter.com/data/structure-2.mol">
      </div>
    </div>
    <script type="application/json" data-chemwriter-style>
      {
        "border":             0.15,
        "line-width":         0.1,
        "line-offset":        0.2,
        "line-end-padding":   0.08,
        "stereo-width":       0.25,
        "node-cap-height":    0.42,
        "methyl-visible":     true,
        "line-color":         "#000000",
        "unknown-node-color": "#555555",
        "node-colors": {
          "N":  "#35ad22",
          "O":  "#ff0000",
          "F":  "#ff00ff",
          "P":  "#ff9900",
          "S":  "#ff9900",
          "Cl": "#00ff00",
          "Br": "#cc3333",
          "I":  "#940094"
        }
      }
    </script>
  </body>
</html>

Run Demo