Manuscript

DOM-aware browser extension for authoring versioned web demos and manuals

Manuscript is a browser extension for putting together step-by-step product tours, walkthroughs, and user manuals on the web (works on Chromium-based browsers — Chrome, Microsoft Edge, and others). Click the parts of a page you want to highlight, drop a spotlight on each, layer text boxes or hand-drawn arrows, then press play. ■ What sets it apart 1. Tours that don't break when the page changes Manuscript remembers each step's element three ways at once — by stable attribute (data-testid, id, aria-label), then by text and surrounding structure, then by viewport position with nearby words. A renamed class, an edited button label, or a small layout reflow won't make your tour go missing. 2. Your work, in a JSON file Every tour is a JSON file you download. Commit it to git, review it in a pull request, version it next to the code it documents. No cloud lock-in. 3. Nothing to install on the site you're documenting Manuscript lives in your browser, not in the page. Document your own product, a customer's portal, an internal tool, or any site on the web — without touching a line of its code. ■ What you can do · Pick page elements with a click (works inside embedded mini-pages — iframes — too) · Spotlight to highlight, with adjustable ring color, thickness, and dim level · Text boxes — font, size, color, background, bold/italic, 5 entrance animations · 8 shapes — rectangle, ellipse, triangle, diamond, star, callout, line, block arrow · Hand-drawn arrows (rough.js) · Freehand drawing · Step-by-step replay with read-aloud narration (browser voices + Google voices) · Detached presenter window (prompter) with step list and keyboard controls · Screen recording with "Created with Manuscript" watermark · [NEW in v0.6.0] Recording runs from a separate recorder window — it keeps going when your tour moves between pages, so a multi-page tour saves as one continuous video. The window shows the current and next step, the page goes fullscreen after a countdown, and sharing is one dialog (a window + system audio) · [NEW in v0.5.0] Edit a step from the prompter — pause and the prompter window doubles as a light editor: rewrite the title and description, switch the action toggle, change the step timer, even nudge each inner element's screen time with the arrow keys. Play replays the edited step from the top · [NEW in v0.5.0] Annotation list inside each step card — every step opens a list of every text box, shape, and drawing on it with a small color-accurate preview. Click to open the editor, even across pages · [NEW in v0.5.1] Support for sites that switch screens with a query or hash — turn on "Match full URL" in settings and addresses like ?tab=billing or #/reports are treated as distinct pages, so playback starts on the right view and steps move between pages correctly (ordinary sites still ignore tracking parameters) · [NEW in v0.4.0] One step can spotlight a sequence of related elements — same description plays while the spotlight walks each in turn. Tours that needed three short steps now fit in one · [NEW in v0.4.0] Step-validation — checks every step still matches the page after a redesign and color-codes what's healthy and what needs a re-pick · Tap Space mid-recording to pause the tour while the video keeps rolling — chip in with your own commentary, click around, then Space again to resume (v0.3.0) · Optional microphone capture — your voice mixes alongside the read-aloud narration into one clean audio track (v0.3.0) · 4 palettes (studio / ink / graphite / sepia) + dark mode · Picks up the host site's brand colors and fonts automatically so your tour fits in · English / Korean UI — follows your browser's language setting ■ Runtime bridge Drop a one-line manuscript-bridge.js into any host page and drive replay over postMessage. Embed tours in your own docs, marketing pages, or internal dashboards. ■ Who it's for · DevRel and Developer Advocacy — API, SDK, and CLI walkthroughs managed like code · Customer Success and Solutions Engineers — per-customer onboarding kept in git · Product Managers — executive and sales demos for new features · Internal IT — ERP and internal-tool manuals that stay in sync with the UI ■ Good to know · Current version v0.6.0. The core is stable; refinements land as users send in feedback. · Doesn't run on browser-internal pages (chrome://, edge://) or the web stores themselves (browser policy). · Depth-1 same-origin iframes are fully supported; nested and cross-origin iframes are partial. · Everything stays on your computer — chrome.storage.local plus the JSON files you export. Nothing ever leaves your machine. Contact: zendy00@gmail.com