Skip to content
Version: XState v4

Share machine images using their image URL

You can share an image of your machine anywhere that supports images. You can use the image URL for live-updating images where the machine is always updated with your latest changes. Machine images can be helpful in documentation, including GitHub pull requests.

The image below is embedded using the copy image URL. Try switching between light and dark mode in the docs top bar; the image will change color mode too.

State machine for the Copy image URL flow. An initial state of Viewing machine which transitions to Left drawer open via an event of Open left drawer. The use … icon event transitions from left drawer open to Machine options menu open.State machine for the Copy image URL flow. An initial state of Viewing machine which transitions to Left drawer open via an event of Open left drawer. The use … icon event transitions from left drawer open to Machine options menu open.

Your machine image will only be available if:

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

Machine images are not available for private machines.

Read how to change a project’s visibility settings.

Copy the image URL​

  1. Open the Machines list from the left drawer menu.
  2. Use the ... triple dot icon alongside your machine name to open the machine options menu.
  3. Use the Copy image URL option to copy the image URL to your clipboard.
  4. Paste the URL wherever you want it used.

Color mode​

By default, the image’s color mode will be the same as your chosen Stately Studio color mode. Add .light.png or .dark.png to the URL to force that color mode.

Examples​

The examples below show how you can use the image URL.

Markdown​

![State machine for the copy image URL flow in light mode.](https://stately.ai/registry/machines/1b050e43-c8a5-4e28-b881-71eadcc5b8a1.light.png)

HTML​

<img
  src="https://stately.ai/registry/machines/1b050e43-c8a5-4e28-b881-71eadcc5b8a1.dark.png"
  alt="State machine for the copy image URL flow in dark mode."
/>