Documentation
Docs
Start with the install, then write a strip. Everything is shown as code next to the strip it produces.
Start
- Getting started
Drop in a script tag and a custom element, render your first strip.
- Writing a strip
The Comic Strip Document, built up from one panel to a two-speaker scene.
Authoring
- Emotions and poses
The emotion wheel, rendered face by face, and the three gestures that claim the torso.
- Cameras and panels
The six framing presets on one scene, plus room titles, dark panels, and silent bodies.
- Balloons
Speech, thought, and caption balloons; how they wrap, stack, and find space beside a head.
Integrate
- Responsive layout
How the strip decides on one, two, or three columns, and what happens to panel size.
- Asset packs
Using the two shipped packs, registering more than one, and adding a character of your own.
- Plain HTML
The comic-strip custom element without Astro, in any page or framework.
- Astro reference
Every option of the integration and the component, and the current limitations.
- React reference
The <ComicStrip> component's props, and why prop updates don't remount the element.
- Vue reference
The <ComicStrip> component's props, and why prop updates don't remount the element.
- Next.js (deprecated)
<ComicStrip> behind an App-Router-safe client boundary, plus an SSR placeholder helper, now built into @toonstrip/react and @toonstrip/cli directly.
Reference
- Schema reference
Every field of the Comic Strip Document, generated from the published JSON Schema.
- Accessibility
What the element emits for assistive technology, and how to write lines that read well aloud.
- FAQ
No AI, no game engine, the licence and the trademark, browser support, and server rendering.
- Agent skill
A packaged SKILL.md that teaches an AI coding agent the document shape, so it stops guessing.
- Asset packager
Turn a folder of PNGs, or one labelled sheet, into a valid toonstrip asset pack.