{"slug": "show-hn-seqvio-a-whiteboard-explainer-toolkit-for-react-tsx-videos", "title": "Show HN: Seqvio – a whiteboard explainer toolkit for React/TSX videos", "summary": "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.", "body_md": "English | [简体中文](/makesynt/seqvio/blob/main/README.zh-CN.md)\n\n**Structured content to narrated explainer videos.**\n\nSeqvio 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.\n\nCurrent status:Seqvio`0.4.0`\n\npublishes`@seqvio/core`\n\n,`@seqvio/whiteboard`\n\n,`@seqvio/scatterbrain`\n\n,`@seqvio/product-demo`\n\n, and`@seqvio/renderer`\n\n. 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].\n\nPre-rendered overview videos with ElevenLabs narration and burned-in captions. Source compositions live in [ examples/compositions/](/makesynt/seqvio/blob/main/examples/compositions).\n\n**English overview** — `seqvio-overview-en.tsx`\n\n## seqvio-overview-en.mp4\n\n**中文介绍** — `seqvio-overview-zh.tsx`\n\n## seqvio-overview-zh.mp4\n\nSeqvio has two separate pieces:\n\n| Piece | What it is | Install with |\n|---|---|---|\nAgent skill |\nTeaches Cursor and other agents how to author TSX compositions and run the render workflow | `npx skills add ...` |\nRenderer CLI |\nRuns `seqvio-render` , `seqvio-audio` , and `seqvio-qa` |\n`npm install @seqvio/renderer` or a local repo build |\n\nInstalling the skill alone is **not** enough to render videos. You also need the CLI (or a local checkout of this repository).\n\n```\nnpx skills add makesynt/seqvio --skill seqvio -a cursor -y\n```\n\nReplace `cursor`\n\nwith your agent if needed (`claude-code`\n\n, `codex`\n\n, etc.). To preview available skills first:\n\n```\nnpx skills add makesynt/seqvio --list\n```\n\nThis step copies the Seqvio skill into your agent. It does **not** install npm packages, clone this repo, or render MP4 output by itself.\n\nPick one path:\n\n**Option A — npm package (simplest for most users)**\n\n```\nnpm install -g @seqvio/renderer\nseqvio-render --help\n```\n\nPublished packages: `@seqvio/core`\n\n, `@seqvio/whiteboard`\n\n, `@seqvio/scatterbrain`\n\n, `@seqvio/product-demo`\n\n, and `@seqvio/renderer`\n\n.\n\nInstall optional style/component packages when a composition imports them directly:\n\n```\nnpm install @seqvio/product-demo @seqvio/scatterbrain\n```\n\n**Option B — local repository (best for contributors and example compositions)**\n\n```\ngit clone https://github.com/makesynt/seqvio.git\ncd seqvio\nnpm ci\nnpm run build\nnode packages/renderer/dist/cli.js --help\n```\n\nUse the workspace CLI when you want the bundled [ examples/compositions/](/makesynt/seqvio/blob/main/examples/compositions) and monorepo smoke scripts.\n\nFor ElevenLabs or other TTS providers, export credentials before synthesis:\n\n```\nexport ELEVENLABS_API_KEY=your_key\n```\n\nSee [ .env.example](/makesynt/seqvio/blob/main/.env.example). The CLI reads process environment variables and does not auto-load\n\n`.env`\n\n.After steps 1 and 2, try a prompt like:\n\nUsing\n\n`/seqvio`\n\n, create a 4-scene Chinese product overview with whiteboard visuals, ElevenLabs narration, and burned-in captions. Render the final MP4.\n\nThe skill guides the agent through: pick an example composition, edit TSX, extract narration metadata, synthesize audio, and run `seqvio-render`\n\n.\n\nSupported agents include Cursor, Claude Code, Codex, Gemini CLI, and other coding agents that support skills.\n\n```\nseqvio-render \\\n  --component path/to/scene.tsx \\\n  --output ./output/demo.mp4 \\\n  --width 1280 --height 720 --fps 30 --quality medium\n```\n\nWhen using a local repo checkout, run the built CLI with `node packages/renderer/dist/cli.js`\n\n. More detail: [Manual setup](#manual-setup).\n\n**Requirements:** Node.js `>=18`\n\n, Chromium (via Puppeteer), FFmpeg (bundled in `@seqvio/renderer`\n\n). Local repo development uses npm workspaces and `package-lock.json`\n\n.\n\n- Product and framework intro videos\n- Lesson explainers and concept breakdowns\n- Process diagrams and onboarding walkthroughs\n- Multi-scene narrated videos with captions\n- Reusable explainer compositions for automated content pipelines\n\nStart from examples:\n\n| Example | Description |\n|---|---|\n`seqvio-overview-en.tsx` |\n\n`seqvio-overview-zh.tsx`\n\n`seqvio-audio-demo.tsx`\n\n`seqvio-style-manifest-demo.tsx`\n\n`seqvio-product-demo-preview.tsx`\n\n`seqvio-scatterbrain.tsx`\n\n`loop-engineering-explainer.tsx`\n\n`packages/whiteboard/examples/`\n\n``` php\nTSX composition -> audio manifest -> TTS synthesis -> seqvio-render -> MP4\n```\n\n- Author a composition in TSX with\n`@seqvio/core`\n\nplus visual packages such as`@seqvio/whiteboard`\n\n,`@seqvio/scatterbrain`\n\n, or`@seqvio/product-demo`\n\n. - Declare narration in\n`meta.audio.narration`\n\nwhen the video needs voiceover. - Extract and synthesize audio with\n`seqvio-audio`\n\n. - Check key frames with\n`seqvio-qa`\n\nwhen layout or visual fidelity matters. - Render frames and mux narration with\n`seqvio-render`\n\n.\n\nSee [ docs/COMPOSITION-AUTHORING.md](/makesynt/seqvio/blob/main/docs/COMPOSITION-AUTHORING.md) for the authoring contract.\n\nThe skill lives in [ skills/seqvio/SKILL.md](/makesynt/seqvio/blob/main/skills/seqvio/SKILL.md) with supporting references:\n\n| Reference | Purpose |\n|---|---|\n`authoring-patterns.md` |\n\n`audio-workflow.md`\n\n`render-workflow.md`\n\n`production-techniques.md`\n\n`planning-workflow.md`\n\nInstall the skill (see [Quick Start](#quick-start)):\n\n```\nnpx skills add makesynt/seqvio --skill seqvio -a cursor -y\n```\n\nThe skill teaches workflow and commands. Install `@seqvio/renderer`\n\nseparately when you need to render MP4 output.\n\nSeqvio is not trying to be a general-purpose video editor or a generic HTML-to-video engine. It focuses on structured explainer videos.\n\n**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`\n\nand product walkthrough scenes with`@seqvio/product-demo`\n\n**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\n\n- React/TSX composition files with\n`meta`\n\nduration and fps `@seqvio/whiteboard`\n\ncomponents:`WhiteboardScene`\n\n,`DrawText`\n\n,`DrawShape`\n\n,`DrawImage`\n\n,`DrawIcon`\n\n,`Hand`\n\n, and style presets`@seqvio/scatterbrain`\n\nsticky-note / cork-board components`@seqvio/product-demo`\n\ncomponents:`ProductDemoScene`\n\n,`BrowserFrame`\n\n,`ScreenshotPlaceholder`\n\n,`CursorPath`\n\n,`Callout`\n\n,`ProductTitle`\n\n`@seqvio/core`\n\nscene and transition primitives:`VideoComposition`\n\n,`Scene`\n\n,`Transition`\n\n- Storyboard IR schema, layout registry, validation, and TSX compilation helpers\n`seqvio-render`\n\nCLI for TSX-to-MP4 rendering`seqvio-audio`\n\nCLI for audio/caption manifest extraction and TTS synthesis`seqvio-qa`\n\nCLI for key-frame visual snapshots and lightweight render checks- ElevenLabs, OpenAI, MiniMax, and edge-tts narration providers\n\nUse this section when working from a local repository checkout or when you need narrated renders with bundled examples.\n\n```\nnpm install -g @seqvio/renderer\n```\n\nThis installs `seqvio-render`\n\n, `seqvio-audio`\n\n, `seqvio-generate`\n\n, `seqvio-preview`\n\n, `seqvio-add`\n\n, and `seqvio-qa`\n\nglobally. Dependencies `@seqvio/core`\n\nand `@seqvio/whiteboard`\n\nare pulled in automatically. Install `@seqvio/product-demo`\n\nor `@seqvio/scatterbrain`\n\nseparately when your composition imports those packages outside the monorepo.\n\n```\ngit clone https://github.com/makesynt/seqvio.git\ncd seqvio\nnpm ci\nnpm run build\nnode packages/renderer/dist/cli.js \\\n  --component examples/compositions/seqvio-intro.tsx \\\n  --output output/seqvio-intro.mp4 \\\n  --width 1280 --height 720 --fps 30 --quality medium\n```\n\nLocal renders write to [ output/](/makesynt/seqvio/blob/main/output) (gitignored).\n\n```\nnode packages/renderer/dist/audio-cli.js extract \\\n  --component examples/compositions/seqvio-overview-en.tsx \\\n  --out output/seqvio-overview-en.manifest.json\n\nnode packages/renderer/dist/audio-cli.js synthesize \\\n  --provider elevenlabs \\\n  --manifest output/seqvio-overview-en.manifest.json \\\n  --outDir output/seqvio-overview-en-audio\n\nnode packages/renderer/dist/cli.js \\\n  --component examples/compositions/seqvio-overview-en.tsx \\\n  --output output/seqvio-overview-en.mp4 \\\n  --width 1280 --height 720 --fps 30 --quality medium \\\n--audioManifest output/seqvio-overview-en-audio/audio-manifest.resolved.json\n```\n\nVoiceover is muxed automatically from the manifest. **Do not** add `--burnCaptions`\n\nunless 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).\n\n| Package | Description |\n|---|---|\n`@seqvio/whiteboard` |\n\n`@seqvio/core`\n\n`@seqvio/scatterbrain`\n\n`@seqvio/product-demo`\n\n`@seqvio/renderer`\n\n`seqvio-render`\n\nand `seqvio-audio`\n\nCLIsStart at the docs hub: `docs/README.md`\n\nRecommended reading:\n\n— authoring contract and API rules`docs/COMPOSITION-AUTHORING.md`\n\n— renderer, audio, and environment issues`docs/TROUBLESHOOTING.md`\n\n— example catalog and conventions`examples/compositions/README.md`\n\n— agent production loop`skills/seqvio/SKILL.md`\n\n— narrated explainer production rules and QA checklist`skills/seqvio/references/production-techniques.md`\n\nIf 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.\n\nPlanned or in-progress work includes:\n\n- AI-assisted scene generation CLI\n- Richer script-to-voice authoring beyond the current TTS workflow\n- Visual editor / studio workflow\n- Storyboard JSON and template auto-layout expansion beyond the current validation/layout registry\n- Expanded transition catalog (today:\n`fade`\n\n,`slide`\n\n, and`wipe`\n\n)\n\nDesign proposals and historical notes:\n\nContributions are welcome. Please read:\n\n[MIT](/makesynt/seqvio/blob/main/LICENSE) © Seqvio Team", "url": "https://wpnews.pro/news/show-hn-seqvio-a-whiteboard-explainer-toolkit-for-react-tsx-videos", "canonical_source": "https://github.com/makesynt/seqvio", "published_at": "2026-07-08 12:18:42+00:00", "updated_at": "2026-07-08 12:30:18.829740+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "generative-ai"], "entities": ["Seqvio", "React", "TypeScript", "ElevenLabs", "Puppeteer", "FFmpeg", "Cursor", "Claude Code"], "alternates": {"html": "https://wpnews.pro/news/show-hn-seqvio-a-whiteboard-explainer-toolkit-for-react-tsx-videos", "markdown": "https://wpnews.pro/news/show-hn-seqvio-a-whiteboard-explainer-toolkit-for-react-tsx-videos.md", "text": "https://wpnews.pro/news/show-hn-seqvio-a-whiteboard-explainer-toolkit-for-react-tsx-videos.txt", "jsonld": "https://wpnews.pro/news/show-hn-seqvio-a-whiteboard-explainer-toolkit-for-react-tsx-videos.jsonld"}}