Integrate

Astro reference

Every option of the integration and the component, and the current limitations.

toonstrip(options)

The integration, added to integrations in astro.config.mjs.

The integration also registers a renderer for <ComicStrip>. The server half emits an inert <comic-strip> tag; the client half imports @toonstrip/element and sets the properties. Nothing else touches your Vite config.

<ComicStrip>

---
import { ComicStrip } from "@toonstrip/astro";
---
<ComicStrip document={doc} packs={["comic-chat"]} client:visible />

Any Astro client directive works. client:visible is the documented default; use client:load above the fold and client:idle for a strip near the top that is not the first thing the reader needs.

What renders on the server

Only the tag. There is no server-side canvas in the component, so there is no content without JavaScript beyond the element’s aria-labels, which are generated client-side too. For a static image (Open Graph, RSS, a <noscript> fallback) render the same document at build time with npx toonstrip render strip.json --out strip.png from @toonstrip/cli; it uses the same layout policy and figure selection as the element.

Limitations

• Tested against Astro 7. Astro 5 and 6 should work (nothing version-specific is used) but are not in the test matrix.
• The renderer is hand-written, not @astrojs/lit, because the element is a plain HTMLElement with no framework dependency. This is deliberate.
• packs in the integration and packs in the component take different things (specifiers vs names). The names come from each pack’s pack.json.