es617 / claude-replay

claude-replay > Community tool — not affiliated with or endorsed by Anthropic. AI coding sessions are great for development, but hard to share. Screen recordings are bulky and transcripts are hard to navigate. **claude-replay** turns Claude Code, Cursor, and Codex CLI session logs into interactive, shareable HTML replays. The generated replay is a single self-contained HTML file with no external dependencies — you can email it, host it anywhere, or embed it in documentation. **Try the live demo** Claude Code, Cursor, and Codex CLI store conversation transcripts as JSONL files on disk. **claude-replay** auto-detects the format and converts them into visual replays suitable for blog posts, demos, and documentation. | Source | Transcript location | |---|---| | Claude Code | | | Cursor | | | Codex CLI | | Features • Self-contained HTML output (no dependencies) • Interactive playback with speed control • Collapse/expand tool calls and thinking blocks (Claude's internal reasoning traces) • Bookmarks / chapters • Secret redaction before export • Multiple color themes • Terminal-style bottom-to-top scroll • Embeddable via iframe • Web-based editor UI for visual session editing and preview Use cases claude-replay is useful for: • **Blog posts** — show AI-assisted development sessions interactively • **Documentation** — embed AI debugging sessions or code walkthroughs • **Demos** — share reproducible sessions without video • **Bug reports** — attach a replay instead of long logs • **Teaching** — step through AI reasoning and tool usage Installation Or run directly with npx (zero install): Docker Open http://localhost:7331 for the web editor. Session directories are mounted read-only. For CLI usage: Quick start Running with no arguments opens a browser-based editor that auto-discovers your Claude Code and Cursor sessions. From there you can browse, edit, preview, and export replays visually. For CLI usage, you can pass just a session ID — claude-replay will search , , and to find the matching file. Or pass the full path to a JSONL file directly. Cursor Cursor transcripts are also supported — the format is auto-detected. Cursor transcripts don't include timestamps, so playback uses paced timing by default (see Timing modes). Codex CLI Codex CLI (OpenAI) transcripts are also supported — the format is auto-detected. Codex tool calls ( , ) are mapped to their Claude Code equivalents ( , / ) so they render with the same diff views and command previews. Web Editor The default experience. Launch it by running with no arguments: The editor provides: • **Session browser** — auto-discovers sessions from , , and , plus a folder navigator for JSONL files stored elsewhere • **Turn editor** — include/exclude turns, edit user prompts, expand assistant blocks (read-only), add bookmarks • **Options panel** — theme, speed, thinking/tool call toggles, redaction rules, labels • **Live preview** — updates as you edit, renders the same output as the CLI • **Export** — download the final HTML replay The editor runs a local server on (localhost only, not exposed to the network). It never modifies your original JSONL files — all edits are held in memory and only affect the exported output. Usage Each can be a file path or a session ID. If it does not end in and is not an existing file path, it is treated as a session ID. claude-replay searches , , and for a matching session file. You can find your current session ID in Claude Code by running . Multiple inputs are concatenated into a single replay (up to 20). When all sessions have timestamps, turns are sorted chronologically; otherwise command-line order is used. This is useful when accepting a plan creates a new session — chain the sessions to get the full story in one replay. Commands Launches the web-based replay editor. Optionally pass a file path or session ID to auto-load it on startup. See Web Editor above. Extract the embedded turn data from a previously generated replay HTML file. Outputs JSONL by default (one turn per line, bookmarks embedded). Use for the legacy JSON format. The extracted JSONL can be fed back into to regenerate with different options. Bookmarks are preserved as a field on each turn. Options | Flag | Description | |---|---| | | Output HTML file (default: stdout) | | | Only include turns N through M | | | Exclude specific turns by index | | | Start time filter (ISO 8601) | | | End time filter (ISO 8601) | | | Initial playback speed, e.g. (default: 1.0) | | | Hide thinking blocks by default | | | Hide tool call blocks by default | | | Add a bookmark/chapter at turn N (repeatable) | | | JSON file with bookmarks | | | Disable automatic secret redaction | | | Replace all occurrences of text with (repeatable) | | | Replace all occurrences of text with custom replacement (repeatable) | | | Page title (default: derived from input path) | | | Meta description for link previews (default: ) | | | OG image URL for link previews (default: hosted default). A default image is always included; to use your own, host it and pass the URL. | | | Label for user messages (default: ) | | | Label for assistant messages (default: auto-detected) | | | Timestamp mode: , , (default: ) | | | Built-in theme (default: ) | | | Custom theme JSON file (overrides ) | | | Use unminified template (default: minified if available) | | | Embed raw JSON instead of compressed data (for older browsers) | | | Open the generated HTML in the default browser (requires ) | | | List available built-in themes and exit | | | Port for the editor server (default: 7331) | Examples Timing modes The flag controls how playback speed is derived: | Mode | Behavior | |---|---| | | Uses real timestamps if available, falls back to (default) | | | Uses original timestamps from the transcript | | | Generates synthetic timing based on content length | mode creates presentation-style timing — similar to how slides appear in a presentation or subtitles are timed in a vide…