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:

Your machine will only be embeddable if:

• the project visibility is public
• the project visibility is unlisted

Embed URLs are not available for private machines.

Read how to change a project’s visibility settings.

Copy the embed URL

1. Use the Share button in Stately Studio’s top bar to open the Share dialog.
2. Use the Copy embed URL button to copy the machine’s embed URL to your clipboard.
3. Use the embed URL in an <iframe> to embed the machine anywhere that supports iframes. Find some example code below.

Example <iframe> code

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

<iframe
  loading="lazy"
  src="https://stately.ai/registry/editor/embed/9e7f6b1e-416a-491f-a4a0-bba386a02d8d?mode=Design&machineId=e94d5674-7ab7-4a4e-b7a8-781609bfe523&colorMode=dark"
  style="display: block; width: 100%; aspect-ratio: 6 / 4;"
>
  <a
    href="https://stately.ai/registry/editor/embed/9e7f6b1e-416a-491f-a4a0-bba386a02d8d?mode=Design&machineId=e94d5674-7ab7-4a4e-b7a8-781609bfe523"
  >
    View the <em>Embed feature machine</em> machine in Stately Studio </a
  >.
</iframe>

URL parameters, including color mode

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

• machineId: the unique ID for the machine. For example, machineId=491a4c60-5300-4e22-92cf-8a32a8ffffca
• mode: the current machine mode. For example, mode=Design or mode=Simulate
• colorMode: the color mode for the embedded machine. For example, colorMode=light or colorMode=dark

By default, the color mode will be the same as your chosen Stately Studio color mode. Add &colorMode=light or &colorMode=dark to the URL to force that color mode.