Embeds

Put a live document inside another page with a ready-made embed snippet.

An embed places a live copy of a document inside another page, like a wiki, a doc, Notion, or your own site. It shows the canvas, hides the editor chrome, and stays up to date as the document is edited. It is the simplest way to keep a document visible where your readers already are.

WebDBOpen in livediagramOverview+<iframesrc="…/embed"width="800"height="500"></iframe>
A document sits inside a host page, with the copy-paste iframe snippet that embeds it.

What an embed shows

The embed is built from a share link, and it honours that link's role: a Viewer or Participant pass embeds a read-only canvas, while an Editor pass embeds an editable one, so readers of the host page can change the document right there. Pick the pass to match: a Viewer pass when the page is for an audience, an Editor pass when it is for collaborators.

Inside the frame, the embed:

  • shows the canvas with pan, zoom, and pinch,
  • hides the header, tab bar, palette and every floating panel, leaving a clean view with just the zoom controls in the bottom-right corner,
  • defaults to the hand (pan) tool, so a drag pans the view; an editable embed still selects and edits on click, and right-click menus work,
  • keeps a small Open in livediagram badge in the bottom-left corner that opens the full share view in a new tab,
  • shows a compact tab switcher beside the badge when the document has more than one tab: it shows the current tab's name and opens a list of the tabs,
  • skips the "what's your name" prompt: readers join under a random guest name.

One editing feature stays off inside the frame: image uploads are unavailable in an embed, so adding pictures still happens in the full editor. An embed also draws no element indicators (the small link, note, action and comment icons on elements): they are editor chrome, so the picture stays clean.

Because the embed joins the same realtime room as any viewer, it live-updates: when the document changes, the embedded view follows along.

Adding an embed to a page

Open the Share dialog and create or pick a pass for the document.
Open the pass's Embed menu, under its link, and choose Copy iframe for a ready-made <iframe> snippet, or Copy embed URL for the bare URL.
Paste it into your page, wiki, or doc: the iframe snippet drops in directly, while the embed URL suits tools that turn a pasted link into an embed themselves.
VIEWERlivediagram.app/document/shared?s=…VALIDForeverEmbedLive imageCopy embed URLCopy iframe
Each pass's Embed menu copies either the bare embed URL or a ready-made iframe snippet.

The snippet is 800 by 500 pixels with a hairline border and rounded corners, which you can adjust in the markup. If the document has a share password, readers are prompted for it inside the embed frame (the Password Protection switch notes that embeds are included). A link scoped to one tab embeds that tab only.

When an embed stops working

An embed lives exactly as long as its share link. If you revoke the link, or it expires, the frame shows a small not-found message instead of the document. Create a new pass and paste its snippet to bring it back.

Privacy and self-hosting

An embed only exposes what the share link exposes: a Viewer or Participant pass's embed is a read-only view (an embed has no way to put a name on what someone adds), and only an Editor pass's embed can change the document. Anyone who can read the host page's source can also see the embed URL, so treat an editable embed like handing out the edit link itself. Embeds also work on self-hosted instances with no external services: the snippet builds its URL from your own origin, so a self-hosted document produces a self-hosted embed.

Embedding several documents across a wiki is a tidy way to keep architecture and flow diagrams beside the docs that reference them, always showing the latest version.

Was this article helpful?