1. Record
- Click ① Select Screen. Your browser will ask which screen, window, or tab to share — it opens straight to the Chrome Tab view so recording a full page is one click away; switch to Window or Entire Screen instead if you'd rather capture a native app. A live preview appears right away so you can confirm you picked the right thing.
- Pick a microphone device from the dropdown if you have more than one (e.g. an external USB mic instead of your laptop's built-in one), and check Include webcam if you want a talking-head bubble.
- Click ② Start Recording when you're ready. Selecting and starting are separate steps on purpose — no surprise captures.
- Click ⏸ Pause any time to freeze the recording (e.g. while you get something ready off-screen), then click it again to resume — the clip picks up seamlessly, no gap.
- Click ■ Stop when you're done, or use your browser's own "Stop sharing" control. The clip is saved automatically to the Clip Library below.
What "full page" means here: this records exactly what's visible in the tab or window you pick, at its current size — it captures the whole visible page, but not content scrolled out of view. Maximize the window (or zoom out) first if you need more of a tall page on screen at once.
Microphone & room audio
- To stop picking up voices/noise from the room, uncheck "Include microphone" before clicking Start Recording — it sits right next to the microphone dropdown, and is checked by default. With it unchecked, this page never opens your mic at all, so nothing in the room gets captured, only what's on screen (and system/tab audio, if that's separately shared — see below).
- The microphone can only be turned on or off before you start — there's no way to mute it partway through a recording. If you're already recording, click ■ Stop, uncheck the box, then ① Select Screen and start again.
- If you're using Auto-Scroll Recording, it has its own separate "Include microphone" checkbox on that tab — uncheck it there too.
- If you still hear background sound with the mic unchecked, that's most likely system/tab audio instead — the "Share audio" (or "Share tab audio") checkbox your browser's own screen-picker dialog shows when you click Select Screen. That's controlled by your browser, not by anything on this page — leave it unchecked there too if you want a fully silent recording, or check it if you specifically want the tab/system sound but not your voice.
- If you have more than one microphone (e.g. a headset vs. a built-in laptop mic that's more likely to pick up room noise), leaving Include microphone checked but choosing the closer/more directional one from the dropdown next to it will usually capture much less of the room than the default device.
Pop Out Controls
- A small floating controls window now opens automatically, docked along the right edge of your screen, the instant you select a screen — with Start, Pause, Split, Stop, and a live status indicator. Click Start Recording right there; you never have to switch back to this tab.
- If you close it, click ⧉ Pop Out Controls any time to bring it back.
- In Chrome or Edge 116+, this genuinely floats above every other window on your screen — including whatever app you switch to — so it never gets buried while you're demoing something else.
- In browsers without that support, it opens as an ordinary window instead, which can get hidden behind whatever you click into next — same as any other window would.
- The pop-out stays in sync with the main timer, status, and button states automatically. Closing this browser tab also closes the pop-out.
Recording multiple clips
- One at a time: Start, demo one feature, Stop — repeat. Each Start re-triggers the screen picker, so you'll reselect the window each time.
- Straight through the app: click Split into New Clip whenever you want to end the current clip and immediately begin the next — while you keep moving through the application. No re-picking the screen, no gap, no permission prompt. It just closes off clip N and opens clip N+1 on the same live capture.
- Split briefly pauses the Split/Stop buttons right after each split while the recorder attaches — this is expected and only takes a moment.
2. Webcam picture-in-picture
- Check Include webcam before starting — a live preview and controls appear so you can frame yourself first.
- Camera lets you pick a device if you have more than one.
- Position and Size control where the round webcam bubble sits and how big it is — you can adjust these even while recording is in progress.
Auto-Scroll Recording (same-origin only)
- Switch to the Auto-Scroll Recording tab, paste in a URL or local file path, click Load Preview, and wait for it to load.
- Click Record with Auto-Scroll — pick "This Tab" when the browser asks (it's usually pre-selected). The page then goes fullscreen and scrolls itself smoothly from top to bottom while recording, no mouse needed.
- This only works if the loaded page is same-origin with this recorder — both local files, or both served from the same host/port. Most real websites will fail with a clear error the moment you hit record, before anything is captured — that's a browser security rule, not a bug, and it can't be worked around from inside a webpage.
- For anything cross-origin — which is most real-world cases — use the standalone
full-page-recorder Playwright script instead. It drives its own browser and isn't subject to this restriction.
3. Trim, cut & modify a clip
- Drag the Trim start / Trim end sliders to cut the clip down to a shorter start/end range.
- Brightness / Contrast adjust the look; Watermark burns a text label into the bottom-left corner.
- Cut out a section: drag Cut from / Cut to to select a range in the middle of the clip you want removed — it's highlighted in red on the mini timeline. Click ✂ Cut Selected Range → New Clip and that section is removed, the two remaining pieces are joined together, and the result is saved as a brand-new clip right in the library below — your original clip is left exactly as it was, so you always keep both.
- Click Apply Changes & Save to re-render the clip with trim, the current cut selection (if any), brightness, contrast and watermark all baked in at once — this one does replace the clip in place (unlike Cut Selected Range, which never touches the original).
- Either action replaces the clip in place and saves the edited result — download it first if you want to keep the original too. ↺ Reset Edits clears the pending sliders back to defaults (it can't undo an edit that's already been saved).
- A queued clip's cut selection is honored automatically when you merge, even if you haven't clicked Cut or Apply on it yet.
4. Merge multiple clips
- Check Add to merge on each clip you want in the final video, in the order you want them to play.
- Use the ↑/↓ arrows in the merge list to reorder.
- Click Merge & Export. It renders each clip in sequence — this takes roughly as long as the combined clip length, sometimes a bit more.
- Download the result from the box that appears once it's done.
5. Saving, originals & backups
- Your clip library now saves itself automatically to this browser's local storage (IndexedDB) as you go — recording a clip, applying edits, or cutting a section all get saved within about half a second, with no button to click. Close the tab, restart the browser, even reboot — reopen this page and your clips are still in the library, exactly as you left them.
- This auto-save is tied to this specific browser, on this specific device — it won't follow you to another computer, another browser, or a private/incognito window, and clearing your browser's site data will erase it. Use Save All Clips (.zip) below for a real, portable backup any time you want one.
- 🗑 Clear Saved Session erases everything from that auto-save store — handy before handing the device to someone else. It doesn't delete clips currently open in the library above (use each clip's own Delete button for that); it just stops them from being restored automatically next time.
- Download saves the clip's current (possibly edited) version under its clip name.
- Save As… lets you type a different filename before saving — handy for keeping several versions of the same clip.
- Once you've clicked Apply Changes & Save on a clip at least once, a Download Original (unedited) button appears on it — the very first recording is kept untouched behind the scenes for as long as that clip exists, even through several edits, so you can always get back to it. (Cut Selected Range doesn't need this — it never modifies the original clip in the first place.)
- Save All Clips (.zip) bundles every clip in your library — plus the untouched original of anything you've edited — into one .zip file, together with all their trim/cut/brightness/contrast/watermark settings. Use this whenever you want a copy that isn't tied to this one browser/device.
- Import From Backup loads a .zip made by Save All back into the Clip Library, with every setting restored, ready to keep editing.
- Save All and Import need to load a small ZIP library from the internet the first time you use them in a session — everything else on this page, including the auto-save, works fully offline.
Why not "local storage" for the video files themselves? The browser feature literally named localStorage can only hold small pieces of text and is capped around 5–10MB total across everything on the page — nowhere near enough for even a short recording. IndexedDB is the browser's actual database built for exactly this (binary files, much larger quotas), so that's what clips are stored in; localStorage is used only for a couple of tiny preferences, like your webcam bubble's position and size.
If auto-save isn't working: a toast will say so plainly (once per visit) rather than failing silently. The most common cause is opening this .html file directly by double-click — several browsers restrict or fully disable IndexedDB on file:// pages, the same restriction already noted above for screen capture itself. Serving the file locally (python -m http.server) or hosting it (e.g. Netlify) fixes both at once. A private/incognito window with storage disabled, or very low disk space, can also block it. None of this affects clips already open in the library during the current visit — only whether they'll still be there next time.
Troubleshooting
- On a phone or tablet, "Select Screen" is disabled: that's an iOS/iPadOS/Android platform limit, not a bug in this page — no mobile browser (including Chrome and Firefox on those devices) exposes screen capture to webpages. Record on a desktop browser (Mac, Windows, or Linux), then open this same page on your phone or tablet to trim, cut, adjust, and merge the clips — that part works everywhere.
- If Start doesn't prompt you to pick a screen on desktop, this page probably isn't running in a secure context — see the note below.
- Keep this browser tab in the foreground while merging or applying changes — background tabs get throttled by the browser and rendering will stall.
- Output is WebM, or MP4 if your browser supports MP4 recording (auto-detected). For MP4 specifically, re-encode afterward with HandBrake or FFmpeg.
Secure context requirement: screen capture only works over HTTPS or from localhost — not always from a file opened directly by double-click. If Start does nothing, run python -m http.server in this folder and open http://localhost:8000/..., or host the file on Netlify.