---
title: Embed MolDraw and demos
url: https://www.moldraw.com/docs/developers/how-to-embed-moldraw-and-interactive-demos/
section: Embed and developer tools
updated: 2026-10-20
publisher: LabCanvas
---

# Embed MolDraw and demos

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

You do not host anything. The frame loads MolDraw from moldraw.com and your page stays yours. The [embed article](https://www.moldraw.com/blog/embed-moldraw.html) has a live preview and a **Copy embed code** button.

## Embed the editor

1. Copy the snippet below.
2. Paste it into the HTML of your page, or into an HTML block in your course or blog tool.
3. Change `height` to fit your layout.
4. Open the page and draw a bond to test it.

    <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

| Use | Height |
| --- | --- |
| Short page or quick sketch | About 480 |
| Default, toolbar and a small structure | 640 |
| Reaction schemes | About 800 |

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.

> **Note:** Only `/embed` may be framed on other sites. Other MolDraw pages refuse to load in a cross site frame.

## 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](https://www.moldraw.com/demos/).

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

| Query | Values | Default |
| --- | --- | --- |
| `demo` | The demo id, as in the gallery | `turn-on-grid` |
| `theme` | `light`, `dark` or `auto` | `auto`, which follows the reader's system theme |
| `autoplay` | `false` to wait for a click | Plays |
| `loop` | `false` to stop at the end | Loops |

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](https://www.moldraw.com/demos/llms.txt) lists every target, action and state key. The [grid article](https://www.moldraw.com/blog/how-to-turn-on-the-grid-in-moldraw.html) shows a demo inside a blog post.

## Common problems

| Symptom | Fix |
| --- | --- |
| The frame is blank | Your site or course tool blocks iframes. Use an HTML or embed block that allows them, or link to [MolDraw](https://www.moldraw.com/) instead. |
| The editor is cramped | Raise `height`. Readers can also click **Edit in MolDraw**. |
| The demo frame has a scroll bar | Listen for `moldraw-demo:height` and set the iframe height. |

To open the editor with a structure already drawn, use a link instead of a frame. See [URL parameters and deep links](https://www.moldraw.com/docs/developers/moldraw-url-parameters-and-deep-links/).

## Questions and answers

**How do I embed a molecule editor on my website?**
Paste an iframe with src set to https://www.moldraw.com/embed and a height of about 640 pixels. Readers can draw right on your page.

**Do readers need a MolDraw account to use the embed?**
No. They can draw and download in the frame without an account. Edit in MolDraw opens the full editor in a new tab.

**Why is the embedded MolDraw frame blank?**
Your platform probably blocks iframes. Use an HTML or embed block that allows them, or link to moldraw.com.

**How do I make the demo iframe fit its content?**
Listen for the moldraw-demo:height message from the frame and set the iframe height to the value it sends.

## Related pages

- [URL parameters and deep links](https://www.moldraw.com/docs/developers/moldraw-url-parameters-and-deep-links/)
- [Educational layout and Teaching menu](https://www.moldraw.com/docs/teaching/educational-layout-and-teaching-menu/)
- [Connect AI agents with MCP](https://www.moldraw.com/docs/developers/connect-ai-agents-to-moldraw-with-mcp/)
- [MolScript](https://www.moldraw.com/docs/developers/molscript-language-for-reactions-and-mechanisms/)