toonstrip
A framework-embeddable library that renders a comic strip — panels,
characters, poses, emotions, speech/thought balloons, backdrops — from
caller-supplied data, as a live, responsive, canvas-based widget. Not a flat
pre-rendered image: panels are drawn on real <canvas> elements and
re-render as their container resizes.
toonstrip does not generate content. You supply panels, dialogue, and
emotion as data (by hand, by script, by calling an LLM yourself); toonstrip
only renders it. See TOONSTRIP_DEV_PLAN.md §0 for the full list of
non-goals.
Site: toonstrip.danielkimdev.com — intro,
docs, playground, changelog. Source in site/.
Why not an image?
| Pre-rendered PNG | Exported SVG | toonstrip |
|---|
| Reflows to the container | No — one fixed layout | Scales, doesn't reflow | Column count follows width |
| Sharp on any display | Only at export size | Yes | Yes — DPR-aware backing store |
| Screen readers | One alt text, if you wrote it | Depends on the export | Every panel described from its own lines |
| Change one line of dialogue | Re-render, re-upload | Re-export | Edit the JSON |
| Page weight (3-panel strip) | One large image | Text-heavy vector | Only the sprites it references |
FAQ
Does toonstrip generate the comic for me? No. It renders the document you
give it — the dialogue, emotions, and direction are yours, your script's, or
an LLM you call yourself.
Can I use it commercially? Yes. The code is MIT, and the default pack's
Comic Chat art is redistributed under MIT terms (see NOTICE).
How big is it? About 36 KB gzipped for element + core + schema validator;
sprite sheets load per character actually used.
Does it render on the server? The Astro component emits an inert tag on
the server and the browser draws. For static PNGs, the CLI runs the same
renderer in Node: npx -p @toonstrip/cli toonstrip render strip.json --out strip.png.
Full FAQ: toonstrip.danielkimdev.com/docs/faq/.
Packages
| Package | What it is |
|---|
packages/schema | The ComicStripDocument v1 types, JSON Schema, and a runtime validator |
packages/core | The framework-agnostic rendering engine (figures, balloons, backdrops, layout) |
packages/element | <comic-strip>, a zero-framework-deps custom element wrapping core |
packages/astro | An Astro integration + <ComicStrip> component wrapping element |
packages/react | A <ComicStrip> React component wrapping element |
packages/vue | A <ComicStrip> Vue component wrapping element |
packages/next | Deprecated — react's <ComicStrip> now carries its own 'use client' directive and cli exports the SSR-placeholder helper directly; see docs/next.md |
packages/pack-comic-chat | The default asset pack: the original 15-character Comic Chat roster + 3 backdrops (MIT, see its NOTICE) |
packages/pack-example | A second, small, wholly original pack proving the pack contract isn't coupled to pack-comic-chat |
packages/cli | The toonstrip CLI (pack validate, render to PNG) |
packages/asset-packager | The toonstrip-pack CLI: turns per-pose PNGs or grid sheets into a valid pack (validate, slice, register, sheet-pack, derive join anchors). No model, no network |
examples/astro-blog | A minimal Astro site embedding a live strip in a blog post |
examples/react-vite | A minimal Vite + React app embedding a live strip, prop-updated without a remount |
examples/vue-vite | A minimal Vite + Vue app embedding a live strip, prop-updated without a remount |
examples/next-app |
Dependency direction is one-way: schema → core → element → astro, and
element → react → next and element → vue alongside it (next also
depends on cli for its SSR placeholder). Asset packs depend on schema
only.
Quick start (development)
pnpm install
pnpm build
pnpm test
See CONTRIBUTING.md for the full workspace guide,
including how to add a new character or asset pack.
Documents
docs/schema.md — the ComicStripDocument formatdocs/packs.md — the asset pack contract, and a
worked walkthrough for adding a characterdocs/asset-image-spec.md — the rules a
character/backdrop PNG must follow to be packed by
@toonstrip/asset-packager into a packdocs/asset-sheets.md — sheet input: one generated
image holding a grid of poses or scenes, sliced into many pack assetsdocs/astro.md — embedding a strip in Astrodocs/react.md — embedding a strip with @toonstrip/reactdocs/vue.md — embedding a strip with @toonstrip/vuedocs/next.md — embedding a strip in Next.js App Router
with @toonstrip/react + @toonstrip/cli, including the SSR placeholder
(@toonstrip/next is deprecated — this doc covers the replacement)docs/vanilla-html.md — embedding a strip with
no build step at all (plain HTML, CDN imports)- — the full project plan
License
MIT (see LICENSE). The default pack-comic-chat asset pack incorporates
Microsoft Comic Chat art under the same license, with its own attribution —
see NOTICE and THIRD_PARTY.md at the repo root, and
packages/pack-comic-chat/NOTICE.
