> Rename, reorder, duplicate and delete screens in the LiveDemo editor, add screens from the library or by upload, and understand screen types.

Canonical: https://livedemo.ai/docs/edit-a-livedemo/screens/

# Screens

A LiveDemo is a list of screens, shown in the **Screens** tab on the left of the editor. Each screen holds its [steps](https://livedemo.ai/docs/edit-a-livedemo/steps/).

## Screen types

| Type | Icon | Default name |
| --- | --- | --- |
| **Screenshot** | Picture | Screenshot |
| **Video** | Video camera | Video |
| **HTML page** | Web | The page URL. Shows a **Base** or **Delta** badge, see [HTML demos](https://livedemo.ai/docs/capture-a-livedemo/html-demos/) |

## Organize screens

- **Rename**: double-click the screen name.
- **Reorder**: drag the screen up or down.
- **Open its steps**: screen menu → **Steps**.
- **Edit its transition**: screen menu → **Transitions**. See [Transitions](https://livedemo.ai/docs/edit-a-livedemo/transitions/).
- **Duplicate**: screen menu → **Duplicate**. Handy for showing the same screen twice with different steps.
- **Delete**: screen menu → **Delete**, then **Yes**.

## Add screens

- **Upload**: add a `.png`, `.jpg`, `.gif` or `.mp4` (up to 25 MB) from the toolbar.
- **Show Library**: reuse any screenshot, video or HTML page from your workspace (**Images**, **Videos**, **Pages** tabs).
- **Frame to Screen**: on a video screen, turns the current video frame into a new screenshot screen.
- **From the extension**: capture extra screens into an existing demo. See [Blank demo & uploads](https://livedemo.ai/docs/capture-a-livedemo/blank-demo-and-uploads/#add-screens-with-the-extension).

There's no "replace screen". Add the new screen, move its steps over, then delete the old one.

---

Next: [Steps](https://livedemo.ai/docs/edit-a-livedemo/steps/)