Show HN: Seqvio – a whiteboard explainer toolkit for React/TSX videos

Seqvio, a new open-source toolkit for creating whiteboard explainer videos from React/TSX compositions, has been released in version 0.4.0. The toolkit provides a pipeline for scene composition, narration, captions, and local MP4 rendering, targeting developers who want to turn lessons and product walkthroughs into short videos. It includes packages for core functionality, whiteboard visuals, product demos, and a renderer CLI, with optional AI agent integration for authoring.

English | 简体中文 /makesynt/seqvio/blob/main/README.zh-CN.md Structured content to narrated explainer videos. Seqvio is a focused workflow for turning lessons, product walkthroughs, and technical concepts into short explainer videos. It combines scene composition, whiteboard-style visuals, product-demo primitives, narration metadata, captions, visual QA, and local MP4 rendering into one source-controlled pipeline. Current status:Seqvio 0.4.0 publishes @seqvio/core , @seqvio/whiteboard , @seqvio/scatterbrain , @seqvio/product-demo , and @seqvio/renderer . The repository supports explicit React/TSX compositions, storyboard IR validation/compilation, style presets, product walkthrough scenes, audio/caption metadata, visual QA snapshots, and local MP4 rendering. Higher-level AI authoring and studio workflows are tracked in the Roadmap . Pre-rendered overview videos with ElevenLabs narration and burned-in captions. Source compositions live in examples/compositions/ /makesynt/seqvio/blob/main/examples/compositions . English overview — seqvio-overview-en.tsx seqvio-overview-en.mp4 中文介绍 — seqvio-overview-zh.tsx seqvio-overview-zh.mp4 Seqvio has two separate pieces: | Piece | What it is | Install with | |---|---|---| Agent skill | Teaches Cursor and other agents how to author TSX compositions and run the render workflow | npx skills add ... | Renderer CLI | Runs seqvio-render , seqvio-audio , and seqvio-qa | npm install @seqvio/renderer or a local repo build | Installing the skill alone is not enough to render videos. You also need the CLI or a local checkout of this repository . npx skills add makesynt/seqvio --skill seqvio -a cursor -y Replace cursor with your agent if needed claude-code , codex , etc. . To preview available skills first: npx skills add makesynt/seqvio --list This step copies the Seqvio skill into your agent. It does not install npm packages, clone this repo, or render MP4 output by itself. Pick one path: Option A — npm package simplest for most users npm install -g @seqvio/renderer seqvio-render --help Published packages: @seqvio/core , @seqvio/whiteboard , @seqvio/scatterbrain , @seqvio/product-demo , and @seqvio/renderer . Install optional style/component packages when a composition imports them directly: npm install @seqvio/product-demo @seqvio/scatterbrain Option B — local repository best for contributors and example compositions git clone https://github.com/makesynt/seqvio.git cd seqvio npm ci npm run build node packages/renderer/dist/cli.js --help Use the workspace CLI when you want the bundled examples/compositions/ /makesynt/seqvio/blob/main/examples/compositions and monorepo smoke scripts. For ElevenLabs or other TTS providers, export credentials before synthesis: export ELEVENLABS API KEY=your key See .env.example /makesynt/seqvio/blob/main/.env.example . The CLI reads process environment variables and does not auto-load .env .After steps 1 and 2, try a prompt like: Using /seqvio , create a 4-scene Chinese product overview with whiteboard visuals, ElevenLabs narration, and burned-in captions. Render the final MP4. The skill guides the agent through: pick an example composition, edit TSX, extract narration metadata, synthesize audio, and run seqvio-render . Supported agents include Cursor, Claude Code, Codex, Gemini CLI, and other coding agents that support skills. seqvio-render \ --component path/to/scene.tsx \ --output ./output/demo.mp4 \ --width 1280 --height 720 --fps 30 --quality medium When using a local repo checkout, run the built CLI with node packages/renderer/dist/cli.js . More detail: Manual setup manual-setup . Requirements: Node.js =18 , Chromium via Puppeteer , FFmpeg bundled in @seqvio/renderer . Local repo development uses npm workspaces and package-lock.json . - Product and framework intro videos - Lesson explainers and concept breakdowns - Process diagrams and onboarding walkthroughs - Multi-scene narrated videos with captions - Reusable explainer compositions for automated content pipelines Start from examples: | Example | Description | |---|---| seqvio-overview-en.tsx | seqvio-overview-zh.tsx seqvio-audio-demo.tsx seqvio-style-manifest-demo.tsx seqvio-product-demo-preview.tsx seqvio-scatterbrain.tsx loop-engineering-explainer.tsx packages/whiteboard/examples/ php TSX composition - audio manifest - TTS synthesis - seqvio-render - MP4 - Author a composition in TSX with @seqvio/core plus visual packages such as @seqvio/whiteboard , @seqvio/scatterbrain , or @seqvio/product-demo . - Declare narration in meta.audio.narration when the video needs voiceover. - Extract and synthesize audio with seqvio-audio . - Check key frames with seqvio-qa when layout or visual fidelity matters. - Render frames and mux narration with seqvio-render . See docs/COMPOSITION-AUTHORING.md /makesynt/seqvio/blob/main/docs/COMPOSITION-AUTHORING.md for the authoring contract. The skill lives in skills/seqvio/SKILL.md /makesynt/seqvio/blob/main/skills/seqvio/SKILL.md with supporting references: | Reference | Purpose | |---|---| authoring-patterns.md | audio-workflow.md render-workflow.md production-techniques.md planning-workflow.md Install the skill see Quick Start quick-start : npx skills add makesynt/seqvio --skill seqvio -a cursor -y The skill teaches workflow and commands. Install @seqvio/renderer separately when you need to render MP4 output. Seqvio is not trying to be a general-purpose video editor or a generic HTML-to-video engine. It focuses on structured explainer videos. Explainer-first workflow — scenes, narration, captions, and visual steps in one composition Whiteboard-native primitives — handwritten-style text, shapes, images, icons, style presets, and pen/hand timing Specialized visual packages — sticky-note workshop scenes with @seqvio/scatterbrain and product walkthrough scenes with @seqvio/product-demo Structured narration contract — visual timing and audio metadata stay close together Visual QA loop — snapshot key frames and catch blank renders before final MP4 work Agent-friendly authoring surface — small contracts, explicit frame timing, curated examples Local, deterministic rendering — Puppeteer + FFmpeg from source-controlled compositions - React/TSX composition files with meta duration and fps @seqvio/whiteboard components: WhiteboardScene , DrawText , DrawShape , DrawImage , DrawIcon , Hand , and style presets @seqvio/scatterbrain sticky-note / cork-board components @seqvio/product-demo components: ProductDemoScene , BrowserFrame , ScreenshotPlaceholder , CursorPath , Callout , ProductTitle @seqvio/core scene and transition primitives: VideoComposition , Scene , Transition - Storyboard IR schema, layout registry, validation, and TSX compilation helpers seqvio-render CLI for TSX-to-MP4 rendering seqvio-audio CLI for audio/caption manifest extraction and TTS synthesis seqvio-qa CLI for key-frame visual snapshots and lightweight render checks- ElevenLabs, OpenAI, MiniMax, and edge-tts narration providers Use this section when working from a local repository checkout or when you need narrated renders with bundled examples. npm install -g @seqvio/renderer This installs seqvio-render , seqvio-audio , seqvio-generate , seqvio-preview , seqvio-add , and seqvio-qa globally. Dependencies @seqvio/core and @seqvio/whiteboard are pulled in automatically. Install @seqvio/product-demo or @seqvio/scatterbrain separately when your composition imports those packages outside the monorepo. git clone https://github.com/makesynt/seqvio.git cd seqvio npm ci npm run build node packages/renderer/dist/cli.js \ --component examples/compositions/seqvio-intro.tsx \ --output output/seqvio-intro.mp4 \ --width 1280 --height 720 --fps 30 --quality medium Local renders write to output/ /makesynt/seqvio/blob/main/output gitignored . node packages/renderer/dist/audio-cli.js extract \ --component examples/compositions/seqvio-overview-en.tsx \ --out output/seqvio-overview-en.manifest.json node packages/renderer/dist/audio-cli.js synthesize \ --provider elevenlabs \ --manifest output/seqvio-overview-en.manifest.json \ --outDir output/seqvio-overview-en-audio node packages/renderer/dist/cli.js \ --component examples/compositions/seqvio-overview-en.tsx \ --output output/seqvio-overview-en.mp4 \ --width 1280 --height 720 --fps 30 --quality medium \ --audioManifest output/seqvio-overview-en-audio/audio-manifest.resolved.json Voiceover is muxed automatically from the manifest. Do not add --burnCaptions unless you intentionally want hard-coded subtitles in the frames short lines + bottom safe area . For YouTube/Bilibili, upload SRT separately instead. See skills/seqvio/references/audio-workflow.md /makesynt/seqvio/blob/main/skills/seqvio/references/audio-workflow.md caption-burn-in-optional . | Package | Description | |---|---| @seqvio/whiteboard | @seqvio/core @seqvio/scatterbrain @seqvio/product-demo @seqvio/renderer seqvio-render and seqvio-audio CLIsStart at the docs hub: docs/README.md Recommended reading: — authoring contract and API rules docs/COMPOSITION-AUTHORING.md — renderer, audio, and environment issues docs/TROUBLESHOOTING.md — example catalog and conventions examples/compositions/README.md — agent production loop skills/seqvio/SKILL.md — narrated explainer production rules and QA checklist skills/seqvio/references/production-techniques.md If documentation conflicts with code, treat the code and docs/COMPOSITION-AUTHORING.md /makesynt/seqvio/blob/main/docs/COMPOSITION-AUTHORING.md as the source of truth. Planned or in-progress work includes: - AI-assisted scene generation CLI - Richer script-to-voice authoring beyond the current TTS workflow - Visual editor / studio workflow - Storyboard JSON and template auto-layout expansion beyond the current validation/layout registry - Expanded transition catalog today: fade , slide , and wipe Design proposals and historical notes: Contributions are welcome. Please read: MIT /makesynt/seqvio/blob/main/LICENSE © Seqvio Team