> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inklyai.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Steps and media

> Manage the sequence of product screens, videos, HTML captures, and cover steps.

Steps are the building blocks of a demo. Content steps show captured product moments, while cover steps add screens for intros, transitions, forms, embeds, and calls to action.

Use the step strip to shape the story. You can reorder, duplicate, delete, rename, add media, add covers, or record more steps with the Chrome extension.

<CardGroup cols={3}>
  <Card title="Image" icon="image">
    Use screenshots for stable product walkthroughs that are easy to polish.
  </Card>

  <Card title="Video" icon="video">
    Use video when motion, loading states, or animation matters.
  </Card>

  <Card title="HTML" icon="file-code">
    Use HTML captures when you need a pixel-perfect, code-backed snapshot.
  </Card>
</CardGroup>

## Add or record steps

Click the add control between steps to insert a new moment. Choose **Add image or video**, **Record more steps**, or a cover step type.

When you record more steps, choose where the new steps should go: before the first step, after a specific step, or at the end of the demo.

## Replace media

Select a content step and use **Type** to work with its media. Replace image and video steps from the asset library or by uploading a new file.

HTML steps are created by HTML capture. In the editor, HTML remains an HTML step; use the Chrome extension when you need to capture a new HTML product screen.

## Edit image and video steps

For image steps, use **Edit** to crop the screenshot or align it inside the player. Cropping creates a new image asset from the selected region.

For image and video steps, use alignment to decide how the media sits inside the stage: visible, filled, or positioned around the part that matters.

## Related references

* For exact content step fields, see [Content steps](/schema/demo/content-steps).
* For capture format differences, see [Screenshot versus HTML demos](/concepts/screenshot-vs-html-demos).