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">
    <meta charset="utf-8">
    <title>Inline Stylesheet | ChemWriter</title>
    <link rel="stylesheet" href=""> 
    <script src="" data-chemwriter-license=""></script>
      .image { max-width: 350px; height: 200px; }
    <div class="image">
      <div data-chemwriter-ui="image"
    <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"

Run Demo