Deploy Components Dynamically

Many situations call for the dynamic deployment of ChemWriter components. For example, a structure grid may be generated in response to an XMLHttpRequest.

To render components dynamically, append the required ChemWriter DOM elements, then call chemwriter.refresh.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>Deploy Components Dynamically | ChemWriter</title>
    <link rel="stylesheet" href=""> 
    <script src="" data-chemwriter-license=""></script>
      .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 8em);
        grid-gap: 0.3em;

      .chemwriter {
        border: 2px solid #d0d0d0;
        padding: 0.1em;
        border-radius: 0.2em;

      /* Suppress iOS/Webkit bug */
      .chemwriter svg {
        max-height: 100%;
        min-height: 100%;
    <div class="grid"></div>
    chemwriter.System.ready(() => {
      let grid = document.querySelector('.grid');

      for (let i = 12; i > 0; i--) {
        let cell = document.createElement('div');

        cell.setAttribute('data-chemwriter-ui', 'image');
        cell.setAttribute('data-chemwriter-src', '' + i + '.mol');



Run Demo