Build a demo from screenshots or a screen recording
Build a demo from screenshots or a screen recording
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
- On the New template page, click the Upload screenshots and/or videos, Record my screen, or Record my phone manual option.
- 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
- Open the demo in the editor and launch the Capture with screenshot and video modal from the add-screens entry point.
- 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.
- 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,.movor.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 |
| You already have a recording or a batch of screenshots | Your content lives in a slide deck or PDF — use PowerPoint and PDF 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 |
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.