--- title: "Build a demo from screenshots or a screen recording" slug: "/help/demos/capture/screenshots-and-recordings" topic: "demos" last_updated: "2026-10-13T10:00:46.685Z" --- ## **Overview** Turn screenshots or a screen recording into a Walnut demo without using the Chrome extension. Drop in images from your computer, upload an existing video, or record your screen or phone from the browser — Walnut uploads the files, splits a video into the screens worth showing, lays suggested hotspots over the click points it detected, and names each screen for you. Every screen lands as a Walnut screen you can click through, annotate, and personalize. Use this when the surface you want to demo isn't a live web app you can capture with the extension — a desktop app, a mobile app, a static mockup, a pre-launch feature, or a flow you've already recorded. --- ## **Where to Start** You can create a brand-new demo from media, or add screens to a demo that already exists. ### **Create a new demo from media** 1. On the **New template** page, click the **Upload screenshots and/or videos**, **Record my screen**, or **Record my phone** manual option. 2. Pick a method in the **How do you want to create your demo?** picker. The template is created automatically once you choose a method, so backing out of the picker leaves nothing behind. ### **Add media screens to an existing demo** 1. Open the demo in the editor and launch the **Capture with screenshot and video** modal from the add-screens entry point. 2. The modal subtitle reads *"Add screens to this demo from screenshots or a video, or record your screen or phone."* Either entry point opens the same modal, with the same three methods. --- ## **Pick a Method** The modal shows three ways to add screens: - **HTML web capture** — opens the Chrome extension to capture live web screens as editable HTML. Use this when the surface really is a browser-based web app; see [Capture screens](/help/demos/getting-started/chrome-extension-tutorial). - **App recording** — record your screen directly in the browser. Choose **Record my screen** for a desktop or web app, or **Record my phone** to record a mirrored phone. Walnut hands you a recording file to review the same way an uploaded video is reviewed. - **Upload screenshots and/or videos** — pick files already on your computer. Drag them onto the drop zone or click to choose. --- ## **Supported Files and Limits** The upload drop zone says it plainly: *"Drop screenshots or a video here, or click to choose. PNG, JPG or WebP up to 50 MB, 100 at a time. Or one MP4, MOV or WebM video up to 5 GB and 60 minutes."* - **Images:** `.png`, `.jpg`, `.jpeg`, `.webp`, up to **50 MB each** and **100 per import**. - **Video:** one `.mp4`, `.mov` or `.webm`, up to **5 GB** and **60 minutes**. A video imports on its own — you can't mix it with images in the same run. Files that break a rule are listed back to you by name with the reason, so you can swap them out and keep going. --- ## **Review Your Screenshots Before Importing** When you drop in screenshots, each file lands as a row with a thumbnail and its filename. - **Reorder** rows by dragging the grip, or with the up/down arrow buttons. The order you leave them in is the order they land in the demo. - **Remove** a row with the trash icon. - **Add more files** at any point from the compact drop zone under the list (while you're under the 100-image cap). - **Device frame** — for portrait screenshots that look like a phone capture, Walnut suggests a matching iOS or Android device frame automatically. Override it per row from the frame select, or pick **No frame** to leave the screenshot un-framed. For a frame that has a notch, a *(no notch)* variant keeps the device bezel without the cutout. --- ## **Review a Video Before Importing** Upload or record a video and Walnut analyzes it to find **key moments** — the frames where something meaningful happened on screen. The review panel plays the video and lists the moments it found, each with a thumbnail and a suggested name. For each moment you can: - Keep it, skip it, or add a new one at the current timestamp. - Decide whether a **click hotspot** should be laid over the frame. Walnut keeps the point it detected the click at by default; clear it to leave the screen un-hotspotted. - Rename the resulting screen. - Turn a span of the video into a **clip screen** instead of a still, so the demo plays that span inline. If the analysis finds no key moments, the whole video is added as a single video screen — the picker surfaces a hint that says so. You can also choose **Add as one video** from the confirm button to skip the split entirely and keep the recording as one screen. ### **AI naming and demo summary** Alongside the key moments, Walnut generates an **AI summary** of the recording: - Suggested **names for each screen**, filled into the moment rows as soon as they're ready. - When you're starting a brand-new demo from the recording, a suggested **Demo title** and **Description**, both editable in the panel. Tick **Use as demo title & description** to apply them to the new demo; untick to keep your own title and still use the generated screen names. - **Regenerate** re-runs the summary if you want another take, and if the summary fails the screens still import — only the suggested names are missing. --- ## **Where the Screens Land** Before you confirm, pick a destination: - **Target section** — add the new screens to an existing section in the demo, or create a new section in place. When no name is given, new sections are created with the default name **Imported screens**. - **Insertion point** — when you launched the modal from a specific screen in the editor, the new screens are inserted after it. When you're creating a brand-new demo from media, the destination step is skipped — the screens come in as the new demo's first section, since there's nothing to merge them into yet. --- ## **Run the Import** Click **Create** (or **Create demo** when starting from scratch) to begin. The modal switches to a progress view with: - An upload meter — *"N% prepared"* — while files are going up. - A per-row progress list once the server starts turning each file or moment into a screen. The source descriptor names what's happening in plain terms: *"Each screenshot or key moment is becoming a Walnut screen."* - A toast — *"Generating your demo…"* — on the storyline page, so you can leave the modal and keep working elsewhere. The import rejoins itself across page reloads, so refreshing the editor mid-run doesn't lose the progress. Screens appear in the editor as soon as they're created — the first one opens for you to start editing while the rest finish in the background. If a row fails, the modal lets you **Retry** just the failed ones without re-uploading what already went up. If something goes wrong before any screen landed, the completed banner reads *"We couldn't create your demo"* and you can start the run again. Only one media import can run at a time. If one is already running, the toast *"A demo is already being created — wait for it to finish before starting another"* appears and the second run is blocked. --- ## **After the Import** A media-sourced screen behaves like any other Walnut screen: - Add **guides** and **annotations** to walk viewers through it. - Attach **sticky notes** for internal reviewers. - Personalize with **variables** (text, image, dates). - Add or adjust **hotspots** anywhere on the image — the ones Walnut laid down from the video's detected click points are a starting point you can edit freely. - Style, translate, and version-control it alongside screens from any other source. A screen that came from a video keeps a link to its source video, so a clip screen plays that span of the recording in the demo. --- ## **When to Use Media Import vs. Other Sources** | Use media import when… | Use another source when… | | --- | --- | | The surface isn't a live web app — it's a desktop app, a mobile app, or a static mockup | You can open the surface in Chrome and capture it as HTML — use [HTML web capture](/help/demos/getting-started/chrome-extension-tutorial) | | You already have a recording or a batch of screenshots | Your content lives in a slide deck or PDF — use [PowerPoint and PDF import](/help/demos/capture/powerpoint-import) | | You want to demo a mobile flow by mirroring the phone to your computer | Your designs live in Figma and haven't shipped yet — use [Figma import](/help/demos/capture/figma-import) | You can mix sources freely inside a single demo — some sections from a recording, some from Figma, some from live capture. --- ## **FAQs** ### **What file types can I upload?** PNG, JPG and WebP for screenshots (up to 50 MB each, 100 per import); MP4, MOV and WebM for video (one at a time, up to 5 GB and 60 minutes). ### **Can I upload both screenshots and a video in the same import?** No. A video imports on its own, one per run. Import the screenshots as one batch and the video as a separate one — both land in the same demo. ### **Do I need the Chrome extension?** No. Screenshot uploads, video uploads, screen recording and phone-mirror recording all run from the editor without the extension. The extension is only needed for the **HTML web capture** method on the same picker. ### **What happens if I close the modal while the import is running?** The run keeps going on the server. Screens continue to appear in the editor as they're created, and you can reopen the demo's progress indicator to watch the rest finish. ### **Why did Walnut suggest a phone frame on my screenshot?** Walnut detects portrait screenshots that match a phone aspect ratio and frames them in a matching iOS or Android device template. If you'd rather not have the frame, pick **No frame** from the row's frame select before importing. ### **Can I edit the AI-suggested screen names and demo title?** Yes. Every name, title and description is editable in the review panel before you import, and nothing is final — you can still rename or rewrite them in the editor afterwards.