Embed machines using their embed URL

You can embed your machines anywhere that supports <iframe>. Embed mode is a focused non-editable view of your machine in Stately Studio’s editor, which can be zoomed and panned.

We love to use embedded machines in our docs! Below is an example of an embedded machine:

To embed a live machine, keep its project public. In the machine's Share dialog, select Publish embed, then copy the URL. A live public embed uses the machine's existing ID; a pinned snapshot uses an opaque publication ID. Readers do not need to sign in, and the embed works on any site by default.

Free accounts can publish three public machines across projects. Pro accounts can publish more machines, including pinned snapshots of private or unlisted machines. A private source stays private, but anyone with its published snapshot URL can view that snapshot. Free embeds display Stately attribution. There is no per-view limit.

Read how to change a project’s visibility settings.

Copy the embed URLCopy Anchor Link

1. Open the machine in Stately Viz and select Share.
2. Select Publish embed. Publishing requires an account with edit access to the project.
3. Optionally choose theme, start mode, controls, and a responsive size under Appearance.
4. Select Copy embed URL or Copy iframe. Find example code below.

Use Unpublish to stop serving the embed and free a publication slot.

To limit where an embed appears, open Restrict allowed domains (optional). Changing restrictions later keeps existing embed URLs.

Example <iframe> codeCopy Anchor Link

The following HTML embeds the same machine at the top of this page in dark mode:

<iframe
  loading="lazy"
  src="https://editor.stately.ai/viz?machineId=e94d5674-7ab7-4a4e-b7a8-781609bfe523&theme=dark"
  style="display: block; width: 100%; aspect-ratio: 6 / 4;"
>
  <a
    href="https://editor.stately.ai/viz?machineId=e94d5674-7ab7-4a4e-b7a8-781609bfe523"
  >
    View the <em>Embed feature machine</em> in Stately Viz </a
  >.
</iframe>

URL parameters, including color modeCopy Anchor Link

The embed URL has some of the same parameters as the machine URL.

• machineId: an explicitly published live public machine.
• publicationId: the opaque ID for a pinned snapshot.
• mode: the current machine mode. For example, mode=Design or mode=Simulate
• theme: the color mode for the embedded machine. For example, theme=light or theme=dark. Legacy colorMode also works.

Add &theme=light or &theme=dark to force the color mode.