Embed MolDraw and demos

Short answer: To put the editor on your page, paste an iframe that points to https://www.moldraw.com/embed. Set its height to about 640 pixels. To show a step by step demo, use an iframe to https://www.moldraw.com/demos/embed.html?demo=<id>, or the <moldraw-demo> tag on moldraw.com pages.

Last updated 20 Oct 2026 · By the MolDraw team at LabCanvas

You do not host anything. The frame loads MolDraw from moldraw.com and your page stays yours. The embed article has a live preview and a Copy embed code button.

Embed the editor#

<iframe src="https://www.moldraw.com/embed" title="MolDraw editor"
  width="100%" height="640" style="border:0;border-radius:12px"
  loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>

Size the frame#

Keep width="100%" so the editor fills the column. On a phone, a tall frame means more scrolling.

What readers get#

• The full drawing tools, canvas and 3D panel.
• A slim bar at the top with Edit in MolDraw. It opens the full editor in a new tab and leaves your page open.
• No account needed to draw or download from the frame.
• Sign in inside the frame opens moldraw.com in a new tab.

Embed an interactive demo#

A demo shows a MolDraw task on a light copy of the editor. A cursor moves to each control and a caption explains the step. A demo is about 10 KB and stays sharp at any size. Browse them in the demo gallery.

On another site#

<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>

The frame reports its height to your page with a moldraw-demo:height message. Listen for it and set the iframe height to avoid a scroll bar.

On a moldraw.com page#

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

The tag takes src, autoplay="false", loop="false" and theme="light", "dark" or "auto".

Controls#

• Left and Right move between steps. Space plays or pauses.
• Try it yourself swaps the copy for the real editor and runs a guided tour of the same steps. It runs in a sandbox, so the reader's own settings and designs are not changed.

Write your own demo#

A demo is one JSON file with a title, a starting state and a list of steps. The authoring guide lists every target, action and state key. The grid article shows a demo inside a blog post.

Common problems#

To open the editor with a structure already drawn, use a link instead of a frame. See URL parameters and deep links.

Last updated: October 20, 2026