Zoomr is a Chrome extension for recording polished product demos — live zoom, draw annotations, screenshot capture, a full editor, GIF and MP4 export, and one-click sharing. This guide walks through every single feature: what it does, how to use it, how to combine features for maximum effect, and how to extend or configure Zoomr to suit your workflow.
Zoomr runs entirely inside Chrome (and Chromium-based browsers like Edge and Brave). There is no desktop app to install — everything lives in the browser.
Search for Zoomr in the Chrome Web Store, or go directly to zoomr.tech and click Add to Chrome. The install takes under 10 seconds and requires no restart.
Click the puzzle piece icon in Chrome's toolbar, find Zoomr, and click the pin icon. This keeps the Zoomr icon visible at all times so you can open it with one click.
On first install, Zoomr opens the Chrome shortcuts page automatically. You can confirm the default shortcuts there: Ctrl+Shift+S for screenshot and Ctrl+Shift+R for record/stop. If Chrome didn't apply them, set them manually on that page.
Tip: Zoomr cannot capture Chrome's own pages (like chrome://newtab, settings, or extension pages). Always navigate to your actual website or app before recording.
When you open Zoomr for the first time after a brief splash screen, you'll see the auth screen. You have three options:
Enter your email and a password of at least 8 characters, then click Create Account. Zoomr will send a confirmation email — click the link in it to verify your account. After that, sign in with the same credentials.
Click Continue with Google to use your Google account. This opens a standard OAuth popup. Once authenticated, you're signed in immediately — no separate confirmation step needed.
Click Skip for now to use Zoomr without creating an account. You get all the core free features. You can always sign up later — your recordings and screenshots are stored locally in your browser's extension storage either way.
Note: Your account syncs your Pro plan status. If you purchase Pro, you must be signed in to unlock Pro features.
Click the Zoomr icon in your toolbar (or press the extension icon) to open the popup. This is where you start recordings, take screenshots, and configure settings before you capture.
Click the Screenshot button (camera icon) to instantly capture the current tab. A yellow flash confirms the capture. The shot counter in the popup increments immediately.
You can also use the keyboard shortcut Ctrl+Shift+S (Windows/Linux) or Cmd+Shift+S (Mac) to take a screenshot without opening the popup at all — great for capturing multiple states of your UI quickly.
Tip: There's a 1.5-second cooldown between screenshots to prevent accidental double-captures. If nothing happens on a second press, just wait a moment.
Screenshots are saved to the editor automatically. Each screenshot defaults to a 5-second display duration in the exported video, which you can adjust per-shot in the editor.
Click the Record button to start recording your current tab. A live timer appears in the popup counting elapsed time. The browser tab icon changes to a red recording indicator so you always know you're live.
While recording, Zoomr injects the live zoom and draw overlay into your page — see Sections 4 and 5 for how to use those. When you're done, click Stop in the popup, or use the shortcut Ctrl+Shift+R.
After stopping, the recording is automatically processed and added to the editor. You'll see a "Recording saved ✓" confirmation in the popup.
Tip: If you navigate to a new page during a recording, Zoomr automatically re-injects the zoom and draw overlay on the new page. You don't have to stop and restart.
Click the Quality toggle button in the popup to expand the quality panel. You can set:
The setting is saved automatically and persists between sessions.
Also inside the Quality panel, you can configure how the live zoom behaves:
Adjust these before you start recording. A common combination for product demos is Focus: 1.25× and Hold: 2.50× — enough to guide the viewer's eye without feeling disorienting.
Click the Shortcuts help button (keyboard icon) in the popup to jump directly to chrome://extensions/shortcuts where you can view and customize Zoomr's shortcuts.
| Shortcut | Action |
|---|---|
| Ctrl+Shift+S | Take a screenshot of the current tab |
| Ctrl+Shift+R | Start or stop screen recording |
| Right-click (quick) | Enter Focus Zoom (1.15×) |
| Right-click again (quick) | Exit Focus Zoom |
| Right-click + hold (~180ms) | Enter Hold Zoom (2.5×) |
| Release right-click (from Hold) | Return to Focus or exit zoom |
| Left-click + hold (300ms) | Enter Draw mode — drag to annotate |
| Release left-click (from Draw) | Stop drawing, annotation fades out |
Tip: Chrome requires you to visit a normal web page before Zoomr's tab-capture shortcuts work. They won't fire on chrome:// pages, new tab, or extension pages.
Live Zoom is Zoomr's signature feature. While a recording is active, right-clicking anywhere on the page zooms into that point — no mouse wheel, no keyboard modifier, just right-click. This lets you guide your viewer's attention naturally, exactly when you need it.
The zoom is applied directly to the page using CSS transforms, so it works on any website — including complex SPAs, dashboards, and animations.
A quick right-click (press and release within ~180ms) enters Focus Zoom, smoothly scaling the page to your configured focus multiplier (default 1.15×). The zoom anchors to where you right-clicked, so the point you care about stays centered.
While in Focus Zoom, the view pans to follow your cursor. Move the mouse and the zoom tracks with you — great for revealing different parts of the UI without exiting the zoomed state.
A second quick right-click exits Focus Zoom and smoothly animates back to 1.0×.
Hold the right mouse button down for about 180ms to enter Hold Zoom — a deeper 2.5× zoom anchored to your click point. This is ideal for highlighting a specific button, input field, or piece of text. Release the right button to return to Focus Zoom (if you were already in it) or back to normal.
You can also escalate: enter Focus Zoom with a quick click, then immediately hold right-click again to jump to Hold Zoom without losing your position.
In Focus Zoom, the origin updates as you move the mouse — the page "follows" your cursor so you can sweep across UI elements while staying zoomed. When you hold the left mouse button down (to draw), panning freezes for stability — releasing it re-enables panning.
Pro tip: For a cinematic reveal effect, start at the top of the page in Focus Zoom and slowly move the cursor downward. The page will smoothly pan to reveal content below without needing to scroll.
While recording, holding the left mouse button for about 300ms activates Draw mode. You'll see a small red dot appear at the cursor tip — this confirms you're in draw mode. Now drag the mouse to draw freehand annotations directly on top of the page. The strokes appear as a bright marker overlay.
Release the left button to stop drawing. The annotation automatically fades out over a second or two, leaving the screen clean without any manual erasing. This is by design: quick emphasis, then gone.
Important: A short left-click (under 300ms) acts as a normal click and passes through to the page — clicking buttons, links, and inputs still works normally. Only a sustained hold activates drawing.
Draw mode and zoom work together — you can draw while zoomed in. Zoom into a form field with right-click, then hold-left-click and circle it with your pen to create a highlighted annotation right at the point of interest.
After capturing screenshots and recordings, click Open Editor in the popup to open the Zoomr editor in a new tab. This is where you arrange your shots into a final video, apply effects, and export.
The left panel is your Storyboard — a list of every screenshot and recording you've captured. Each card shows a thumbnail, its type (Photo or Video), duration, and any applied effects (Auto Zoom, Trimmed, Speed, Music badges).
Drag and drop shot cards to reorder them. The final export follows the storyboard order top-to-bottom.
Click any card to make it the active shot. The canvas preview, timeline, and edit controls all update to reflect the selected shot.
Click the × button on any shot card to remove it from the storyboard. This cannot be undone, but you can take a new screenshot or recording at any time.
Each screenshot has a configurable display duration — how long it appears in the exported video. The default is 5 seconds. You adjust this on the timeline for that shot.
The editor supports full undo and redo (up to 60 history states). Use the ← → history buttons in the editor toolbar or standard Ctrl+Z / Ctrl+Y to navigate your edit history.
Zoom Zones let you program automatic zoom animations into screenshots. When the video reaches that screenshot, it plays a smooth zoom-in on the area you defined, holds, then zooms back out — all automatically in the export.
Each zone has a Start Time and End Time (in seconds within the shot's total duration). Drag the zone handles on the timeline to adjust when the zoom starts and ends. A minimum zone duration of 0.2 seconds is enforced.
You can add multiple zones to a single screenshot. They are labeled Z1, Z2, Z3, etc. and execute sequentially. Use this to guide the viewer's eye across different parts of a complex UI — zoom to the nav, then to the CTA, then to the footer.
Click × Remove on the zone overlay on the canvas, or click the × button in the Zones list panel.
For recording shots, the timeline shows the full recording duration with trim handles on both ends.
Drag the left handle to set the new start point. Drag the right handle to set the new end point. The trim is non-destructive — the original recording is untouched, and you can adjust trim points at any time. A "Trimmed" badge appears on the shot card.
The speed slider adjusts the playback rate of a recording shot: from 0.5× (slow motion) up to 4×. Speed up boring loading states, or slow down fast interactions to make them easier to follow. A speed badge shows the current multiplier on the shot card.
Note: Trim and Speed are Pro features. On the free plan, recordings export at full length and 1× speed.
The Browser Frame wraps your content in a realistic Chrome browser window chrome — address bar, tab strip, control buttons. This makes your recording look like a proper product demo rather than a raw screen capture.
Available frame styles:
No frame. Raw content fills the canvas edge to edge.
White browser chrome — clean, minimal, works on light backgrounds.
Dark grey browser chrome — great for dark background presets.
Near-black frame for a sleek, premium feel.
Warm brownish-grey — pairs well with Latte and earthy backgrounds.
Dark carbon texture — best for high-contrast tech demos.
Background presets fill the canvas area behind your content when padding is applied or when the browser frame adds space around the recording. Zoomr includes both static and animated presets:
Default — solid dark background. The only background available on the free plan.
Prism, Candy, Holo, Latte, Arctic — curated gradient and texture backgrounds that complement various product aesthetics.
Nine animated backgrounds (Anim1 through Anim9) render live gradients that shift and pulse behind your content during export. These add a premium motion feel without any extra work.
Tip: Pair the Dark browser frame + Arctic background + 40px padding for a clean, modern SaaS demo look. Or use Carbon frame + Prism background for a bold, high-contrast developer tool aesthetic.
Drag the Padding slider to add space between your recording content and the canvas edge. Padding is applied equally on all sides and reveals the background preset in that space.
Padding is especially effective when combined with a browser frame — the frame floats in space above the background, giving a "floating window" effect common in high-quality product demos.
Transitions control how the video moves from one shot to the next. Options:
The transition setting applies globally to all shot boundaries. You cannot currently set different transitions per shot.
Click the Music button to upload an audio file (MP3, WAV, or similar). The audio plays under your entire video during export, starting from the beginning and looping if the video is longer than the track.
The music is mixed at a fixed level in the exported video. For best results, use royalty-free ambient tracks — upbeat background music noticeably increases perceived demo quality for investor pitches and social media clips.
Click the Preview tab to play back your full project — all shots in order, with transitions, zoom zones, and all effects applied — before exporting. This is a real-time canvas render, not the actual exported file, but it's a faithful representation of what the export will look like.
Use preview to check transition timing, confirm zoom zone durations feel natural, and verify your shot order before committing to an export.
Click Export Video to render your project. Zoomr uses WebCodecs when available (modern Chrome) for fast, high-quality H.264 MP4 encoding entirely in the browser — no upload to any server. On older browsers it falls back to MediaRecorder and exports WebM.
The export dialog shows a progress bar as each frame is encoded. When complete, the file downloads automatically to your default downloads folder.
The exported video resolution matches your screen recording resolution — typically 1280×720 or 1920×1080 depending on your display and tab size. The editor scales preview to fit the canvas but exports at full native resolution.
Zoomr automatically selects the appropriate bitrate based on the output resolution and quality setting. You set the base bitrate in the popup before recording (see Section 3.3).
Click Export GIF to render your project as an animated GIF. A settings modal lets you configure:
GIF export runs entirely in-browser using a built-in GIF encoder. It's slower than video export — expect 30–60 seconds for a 10-second clip at full resolution. Plan accordingly.
Tip: For social media GIFs, target 480px wide at 15 FPS. This keeps file size under 5MB for most demos while remaining visually sharp.
Free exports include a small "made with ZOOMR" watermark in the bottom-right corner. Pro exports have the option to remove it by selecting the Clean export mode. Pro users also get the Custom branding mode which overlays the Zoomr logo in a customized position.
After exporting, Pro users see a Share via Link button. Clicking it uploads your exported video to Zoomr's sharing CDN and generates a unique shareable URL that anyone can open in a browser — no account required to view.
This is the fastest way to send a demo to a colleague, investor, or client. Instead of attaching a 50MB video file to an email, you send a link that plays inline in any browser.
Note: Shared videos are hosted on Zoomr's infrastructure. Link expiry and storage policies are governed by your Pro plan terms.
This is the most polished workflow for product demos:
Great for documentation, onboarding, or changelog posts:
Combine both capture types for maximum clarity:
Zoomr is built as a Chrome Manifest V3 extension. The codebase is vanilla JavaScript with no frontend framework — everything runs in the browser. Here's how the architecture breaks down if you want to extend it:
Extension configuration — permissions, commands, icons, CSP. Add new permissions here if needed.
The extension popup UI and logic. All popup interactions (record, screenshot, settings sliders) live here.
The service worker. Handles tab capture, screenshot storage, zoom/draw overlay injection, keyboard shortcuts, and recording state management.
The full editor — storyboard, canvas preview, timeline, all export logic (WebCodecs + GIF), and Pro gate system.
Chrome's Offscreen API document used for MediaRecorder-based recording. Handles raw media stream capture.
IndexedDB wrapper for storing large blobs (recordings) that don't fit in chrome.storage.local.
Environment config (worker URL, Supabase keys). Update this to point to your own backend.
Auth and profile calls to Supabase. Handles sign-in, sign-up, Google OAuth, and Pro plan status checks.
Open editor.js and find the BG_PRESETS constant. Add a new key with a CSS-compatible gradient or color string. Then add the preset name to VALID_BG_PRESETS. Finally, add a button for it in editor.html with data-bg-preset="yourkey". If it's animated, add it to ANIMATED_BG_PRESETS and implement a draw branch inside drawBgPreset().
In editor.js, find VALID_BROWSER_FRAMES and add your frame name. Then implement its appearance inside drawBrowserFrameChrome() — this function receives a layout object and a canvas context and draws the frame decoration. Add a corresponding button in editor.html with data-browser-frame="yourkey".
In background.js, the injected overlay code uses MARKER_COLOR and MARKER_WIDTH constants for the freehand draw stroke. Change these to modify brush color or thickness. The fade-out speed is controlled by the drawAlpha -= 0.025 decrement in stopDraw() — increase the decrement for a faster fade, decrease it for a longer-lasting annotation.
The zoom animation curves are CSS cubic-bezier transitions applied inline in background.js. The focus zoom uses cubic-bezier(0.25, 0.46, 0.45, 0.94) and the exit uses cubic-bezier(0.0, 0.0, 0.2, 1.0). Adjust these values for different feel — sharper snap vs. floaty ease.
The 180ms hold threshold for entering Hold Zoom from a right-click, and the 300ms threshold for entering Draw mode from a left-click, are set as literal timeout values in the mousedown handlers inside background.js.
The Pro gate system lives in editor.js under the PRO_FEATURES constant and the applyProLocks(isPro) function. To gate a new feature, add it to PRO_FEATURES with a display label, then call setLock(element, !isPro, 'Feature Label') inside applyProLocks. The showProGate(featureLabel) function handles the upgrade prompt UI automatically.
chrome://extensions.Zoomr_MVP folder.| Feature | Free | Pro |
|---|---|---|
| Screenshot capture | ✓ Unlimited | ✓ Unlimited |
| Screen recording | ✓ | ✓ |
| Live zoom (right-click) | ✓ | ✓ |
| Live draw (left-hold) | ✓ | ✓ |
| Zoom zones (screenshots) | ✓ | ✓ |
| MP4 / WebM export | ✓ (with watermark) | ✓ (no watermark) |
| GIF export | ✗ | ✓ |
| Browser frame (styled) | None only | All 5 styles |
| Background presets | Default only | All 14 + 9 animated |
| Canvas padding | ✗ | ✓ |
| Trim recordings | ✗ | ✓ |
| Playback speed | ✗ (1× only) | 0.5× – 4× |
| Frame transitions | Cut only | Fade, Slide, Wipe |
| Background music | ✗ | ✓ |
| Share via link | ✗ | ✓ |
| Remove watermark | ✗ | ✓ |
This warning appears when the current tab is a Chrome internal page (chrome://), extension page, or about page. Navigate to a regular website and try again.
Go to chrome://extensions/shortcuts and verify the shortcuts are assigned to Zoomr. Chrome sometimes loses shortcut assignments after updates. Re-assign them if they're blank.
Click Open Editor in the popup — the editor loads your shots from local storage on open. If the editor was already open, refresh the editor tab after the recording completes.
GIF export is compute-heavy and always slower than video. For video: if your browser doesn't support WebCodecs (Chrome 94+), the export uses MediaRecorder which encodes in real time — a 30-second video takes at least 30 seconds to export. Update Chrome to get WebCodecs acceleration.
Pages using CSS that restricts transform on the body element, or pages with iframes (since Zoomr injects into the top frame only), may zoom incorrectly. This is a known limitation of CSS-transform-based zoom.
The marker width is a fixed default in the code. To customize it, load an unpacked version of the extension with a modified MARKER_WIDTH value in background.js (see Section 10).
Install Zoomr free — no credit card, no setup. Start recording polished product demos in under a minute.
Add Zoomr to Chrome — Free