@getnarro/replay

Record a web app once and replay it as real DOM — a portable cast format, an embeddable player, and a self-contained HTML page

getnarro.com · Documentation · Ecosystem

Record a web app once and replay it as real DOM, not video: sharp at any size, selectable, and small enough to embed.

npx @getnarro/cli record https://your.app --html demo.html

A cast carries the DOM as it stood, every mutation and input that followed, and the bytes of everything the page drew with — fonts included, because a font that was same-origin while recording is cross-origin the moment the cast travels, and is refused.

Embedding

Anywhere that runs JavaScript. The element takes the width it is given and the height that follows from the recording's shape, like an <img>, so there is no aspect ratio to set.

A page with no build step:

<script src="/demo/narro-player.global.js"></script>
<narro-replay src="/demo/recording.narrocast" controls autoplay cursor="trail"></narro-replay>

React — the player becomes a chunk fetched when a replay renders, rather than weight in your main bundle, and the component renders on a server:

import { Replay } from "@getnarro/replay/react";

<Replay src="/demo/recording.narrocast" poster="/demo/poster.png" controls />;

Astro, Vue, Svelte, Solid, Lit, plain Vite — one import defines the tag:

import "@getnarro/replay/element";

Attributes: src, poster, controls, autoplay, loop, speed, start (a chapter name or milliseconds), and cursor. Methods: play(ms?), pause(ms?), seek(chapterOrMs). Getters: currentTime, duration, playing. Events: narro-replay:ready, narro-replay:finish, and timeupdate — the same event <narro-terminal> and a media element emit, so one handler drives all three.

Where the deck or the app should drive the recording rather than the viewer, chapter seeks on change — one step, one chapter:

<Replay src="/demo.narrocast" chapter={step === 2 ? "publish" : "open the editor"} />;

The names come from the recording: type one at the prompt while narro record is running to mark a chapter there, or pass --chapters chapters.json for a run nobody is sitting through. narro cast demo.narrocast reads them back, which is how you check a name before writing it into a deck — a name the cast does not have plays from the beginning rather than failing.

The full guide, framework by framework, is at getnarro.com/docs/embedding.

Two files, or one

narro record --embed ./public/demo writes what a website wants: the player, the cast, and the assets as ordinary files. The player is the same bytes for every demo on the site, so it caches once; the assets are served and compressed the way the site serves everything else. The page pays for the event stream, which is tens of kilobytes.

narro record --html demo.html writes what you hand someone: one file, no server, no network, opens from file://. It costs more because it carries the player and the assets inside it — and it still comes to a third of what the obvious implementation would produce, because the player is rrweb's replay half only, assets are stored once under the hash of their bytes rather than inlined at every use site, and both halves travel gzipped.

What a cast is not

• Not responsive. Layout was computed once, at the recording viewport, and every scroll offset in the stream assumes it. The player scales; it does not reflow. Record a second cast for a phone.
• Not the application. The recording carries the DOM the app produced, never its code. Nothing runs on replay, so anything that was not recorded does not exist.
• Not automatically safe to publish. A cast is text, and grep works on it. Read the redaction findings before pointing this at anything with customer data in it.

The Narro ecosystem

| Package | What it is | | --- | --- | | @getnarro/annotate | Feedback on a Narro recording — typed notes anchored to a moment, staleness against the cast they were written about, and a briefing a coding agent can act on | | @getnarro/atlas | A spatial canvas for Narro — a camera path as text, one pure camera function over it, and scene providers a deck, a video and a web page all render the same way | | @getnarro/cli | CLI tools for creating and managing Narro presentations | | @getnarro/core | The React runtime for Narro presentations — Presentation, Slide, navigation, transitions, and speaker notes | | @getnarro/docs | Narro's documentation as data — markdown pages, a generated component API reference, and llms.txt | | @getnarro/docspack | Narro's documentation as a docspack — version-locked chunks an agent installs once and searches offline | | @getnarro/markdown | Markdown & MDX authoring for Narro presentations | | @getnarro/marketplace | Themes, colour schemes, and templates for Narro presentations | | @getnarro/mcp-server | MCP (Model Context Protocol) server for AI-assisted Narro presentation creation | | @getnarro/replay | Record a web app once and replay it as real DOM — a portable cast format, an embeddable player, and a self-contained HTML page ← you are here | | @getnarro/shared-ui | Slide components for Narro presentations — headings, text, lists, code, media, charts, and layouts | | @getnarro/terminal | Terminal playbooks for Narro — a text format for a terminal session, a screen that is a pure function of the frame number, and a renderer that draws it on a grid | | @getnarro/video | Frame-deterministic video framework for Narro — a brand system, a React timeline runtime, narration-derived timing, a headless-Chrome renderer, and a scrub studio | | @getnarro/video-marketing | Marketing scene components for @getnarro/video — lower thirds, stat counters, feature grids, pull quotes, device frames, callouts and end cards, all brand-driven and frame-deterministic | | create-narro | Scaffold a new Narro presentation |

All fifteen ship from one repository and release together.

The npm package named narro is unrelated to this project. Narro's packages are all under the @getnarro/ scope; the CLI binary narro comes from @getnarro/cli.

Website · Documentation · llms.txt · GitHub · Issues · Changelog

Released under the MIT License.