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.
Blur Sensitive Areas
Screenshots and recordings often show things a buyer shouldn't see: customer names, emails, internal URLs. On any screen that came from a screenshot or a video, use Blur area in the editor's top toolbar to cover part of the screen. The original image or video isn't changed, and you can remove a blur at any time.
Blur part of a screenshot
- Open the screen and click Blur area in the top toolbar.
- Drag a box over the area you want to hide.
- Drag the box to move it, or use its corner handles to resize it. Press Esc to cancel while drawing.
- To remove a blur, select it and press Delete (or use its delete control).
You can add up to 50 blurs on a screen.
Blur part of a video for a stretch of time
On a video screen, a blur can cover the whole video or only part of it.
- Click Blur area. If the screen already has blurs, choose Add blur from the list.
- Drag over the video to draw the blur. It starts at the playhead.
- Set the stretch it covers: turn on Whole video, or set the Start and End times. You can also drag the Blur start and Blur end handles on the timeline.
Each blur is listed by its time range (for example, Blur 0:12 - 0:31), so you can find and edit or delete it later.
Where blurs show up
- In the demo, the blur is drawn over the screen as the viewer plays it.
- Thumbnails are re-rendered with always-on blurs applied, so share previews, emails, and Insights show the blurred version. Time-ranged video blurs are not applied to thumbnails.
- Make editable only ever works from the blurred image, so blurred content never ends up in the editable version.
Blurring captured web screens: Blur area is for screenshot and video screens. For screens captured as HTML with the Chrome extension, select the element and use Blur Element from the ⋯ menu instead.
Add Narration From the Recording's Audio
When you import a video that has sound, Walnut transcribes the audio automatically and matches each part of the transcript to the screen it was spoken over. That transcript is used behind the scenes to write better screen names, the demo summary, and guides. It also lets you turn what was said into voice-over narration.
- Add guides to the screens you want narrated. Narration attaches to guide steps, so screens without guides get none.
- In the Guides panel, click the mic icon, Generate narration.
- Choose From recording audio to write each step's script from what was said over that screen. (Choose From steps instead to write it from each step's text.)
- Click Generate drafts. Review and edit the script for each step. Drafts are grouped by guide and labeled Step 1, Step 2, and so on.
- Click Apply narration. Each script becomes a voice-over on its guide step.
Good to know:
- From recording audio is only available when the demo has a transcribed recording.
- Transcription detects the spoken language automatically.
- Transcribing audio, generating drafts, and each narration you apply use AI credits. See AI Control Center.
Make a Screenshot Editable
A screenshot screen is an image, so you can't change its text or swap a number the way you can on a captured web page. To fix that, click Make editable in the top toolbar (or the ⋯ menu). Walnut uses AI to rebuild the screenshot as editable content, and you review the result before keeping it. Hotspots on the screen move onto the new content. The conversion uses AI credits and can be undone.
After conversion, the screen works like any captured web screen, including the full ⋯ menu. See Make a screenshot screen editable for the details.
Turn a Still Into a Video Clip
When you split a recording into screens, each key moment becomes a still. If a moment reads better in motion, click the Screenshot badge on the screen's thumbnail and choose Turn into video clip. The clip plays 2 seconds before and after that moment, and you can adjust it afterwards (clips run from 0.5 to 60 seconds). The screen keeps its guides, custom elements, and blurs.
This works for stills taken from an imported recording. Uploaded screenshots don't have footage to turn into a clip.
Paste a Screenshot Straight Into the Editor
Copy an image to your clipboard and paste it anywhere in the editor (outside a text field). It's added as a new screen right after the selected one.
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.
Is a blurred area safe for confidential data?
Treat it as a visual cover, not a redaction. Viewers of the demo see the blur, but the original pixels are still delivered underneath. Remove truly confidential information from the screenshot or recording before you upload it.
Can I generate narration if my recording has no sound?
Not from the audio. Use Generate narration → From steps to write narration from your guide text instead.