Set a Molfile Dynamically

To update the molecule displayed by a component after page load, use the #setMolfile function. The example below uses #setMolfile together with #getMolfile to copy the molecule in an Editor to an Image. Changes are triggered by the user changing the Editor's molecule.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Listen for Edits | 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>
      .editor { max-width: 500px; height: 350px; margin-bottom: 1em; }
      .image { width: 500px; height: 200px; background-color: #e0e0e0; border-radius: 3px;}
    </style>
  </head>
  <body>
    <div class="editor">
      <div id="editor" data-chemwriter-ui="editor"></div>
    </div>
    <div class="image">
      <div id="image" data-chemwriter-ui="image"></div>
    </div>
    <script>
      chemwriter.System.ready(() => {
        let editor = chemwriter.components.editor;

        editor.addEventListener('document-edited', (e) => {
          let image = chemwriter.components.image;

          image.setMolfile(editor.getMolfile());
        });
      });
    </script>
  </body>
</html>