Interactive MolDraw demos

Each demo plays a task step by step on a lightweight copy of the MolDraw editor. Pause it, step back, or go at your own pace. They load in a blink, stay sharp on any screen, and you can embed them in your own pages. Press Try it yourself to do the same steps in the real editor with a guided tour.

Turn on the canvas grid

Show the background grid from the top bar, from Settings, or with the command palette, and turn on Snap to grid.

Read the article Open on its own

Embed a demo

On any website, use an iframe:

<iframe src="https://www.moldraw.com/demos/embed.html?demo=turn-on-grid"
  title="MolDraw demo: Turn on the canvas grid" loading="lazy"
  style="width:100%;max-width:980px;height:640px;border:0"></iframe>

On moldraw.com pages, use the element directly:

<script src="/demos/player.js" defer></script>
<moldraw-demo src="/demos/turn-on-grid.json"></moldraw-demo>

Make a new demo

Demos are JSON files described by the demo schema.
The authoring guide lists every target, action and rule, written so an AI assistant can draft demos too.
All demos: catalog (JSON).