Images

We mostly use images for screenshots of the Stately Studio.

ThemedImage

We use the Docusaurus ThemedImage component to display light mode and dark mode images in the docs. If a page doesn’t yet have any ThemedImage components, we first need to import the components underneath the page title:

---
title: Initial states
---

import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';

Then we use the ThemedImage component wherever we want the image to display on the page:

In our video player, paused is the initial state because the video player is paused by default and requires user interaction to start playing.

<p>
<ThemedImage
  alt="State machine with an initial state of Paused, transitioning through a Play event to the Playing state. From the Playing state back to the Paused state is a Pause event."
  sources={{
    light: useBaseUrl('/states/initial-states/initial-states.png'),
    dark: useBaseUrl('/states/initial-states/initial-states-dm.png'),
  }}
/>
</p>

[View this machine in the Stately Studio](https://stately.ai/registry/editor/e13bef2b-bb13-4465-96ac-0bc25340688e?machineId=3ebc8874-2294-480b-a06e-74845337cd8d).

Image location

We then add the images to the static folder, using the same folder structure as the docs pages. For example, this is the docs folder structure for the initial states page file:

- docs
- - states
- - - initial-states.mdx

And so the images for the initial states page are stored in the same folder structure inside the static folder:

- static
- - states
- - - initial-states
- - - - image.png

Studio screenshots

We may be able to automate this more efficiently in the future!

For Studio screenshots, screenshot the relevant part of the machine:

• In both light and dark mode
• Studio zoom level of 100%
• @2x resolution
• minumum width 700px, increase browser zoom if the detail doesn’t fill half the available width of 700px
• any height

Compress the screenshots using ImageOptim or another compression script/app.

Save the screenshots with the name of the feature, with the -dm suffix for the dark mode version. For example:

• initial-state.png
• initial-state-dm.png

Using share image URLs from the Studio Editor

When we want to share images of machines, we can use share image URLs instead of using screenshots.

Use the Docusaurus ThemedImage component as above. If a page doesn’t yet have any ThemedImage components, we first need to import the ThemedImage component underneath the page title. We do not need the useBaseUrl component if we’re only using share image URLs.

---
title: Initial states
---

import ThemedImage from '@theme/ThemedImage';

Then we use the ThemedImage component wherever we want the image to display on the page:

In our video player, paused is the initial state because the video player is paused by default and requires user interaction to start playing.

<p>
<ThemedImage
  alt="State machine with an initial state of Paused, transitioning through a Play event to the Playing state. From the Playing state back to the Paused state is a Pause event."
  sources={{
    light: 'https://stately.ai/registry/machines/3ebc8874-2294-480b-a06e-74845337cd8d.light.png',
    dark: 'https://stately.ai/registry/machines/3ebc8874-2294-480b-a06e-74845337cd8d.dark.png',
  }}
/>
</p>

[View this machine in the Stately Studio](https://stately.ai/registry/editor/e13bef2b-bb13-4465-96ac-0bc25340688e?machineId=3ebc8874-2294-480b-a06e-74845337cd8d).