toonstrip
한국어

Start

Getting started

Drop in a script tag and a custom element, render your first strip.

toonstrip renders a comic strip from data you supply. There is nothing to generate and no image pipeline: you write a small JSON document, the page draws it on canvases. This page gets you from an empty HTML file to a rendered panel, no install and no build step.

1. Add the element

@toonstrip/element is a custom element with no framework dependency. esm.sh resolves it and its dependencies for you, straight from a <script type="module">:

<script type="module">
  import "https://esm.sh/@toonstrip/[email protected]";
</script>

Pin the exact version, same as any other dependency.

2. Point it at a pack

The default pack is the fifteen-character Comic Chat roster with three backdrops. unpkg serves a pack’s files (pack.json, sprite sheets, backdrops) as-is, with CORS enabled, so there is nothing to copy anywhere:

strip.packs = ["https://unpkg.com/@toonstrip/[email protected]/"];

3. Render a strip

Put a <comic-strip> tag in the page and set its document property.

<comic-strip id="strip"></comic-strip>

<script type="module">
  import "https://esm.sh/@toonstrip/[email protected]";

  const strip = document.getElementById("strip");
  strip.packs = ["https://unpkg.com/@toonstrip/[email protected]/"];
  strip.document = {
    version: 1,
    panels: [
      {
        backdrop: "field",
        camera: "medium",
        bodies: [{ character: "anna", emotion: { angle: 0, intensity: 0.6 } }],
        speakers: [{ speaker: "anna", balloon: "speech", text: "My first strip." }],
      },
    ],
  };
</script>
strip.json
Open in playground →
strip.json
{
  "version": 1,
  "panels": [
    {
      "backdrop": "field",
      "camera": "medium",
      "bodies": [
        {
          "character": "anna",
          "emotion": {
            "angle": 0,
            "intensity": 0.6
          }
        }
      ],
      "speakers": [
        {
          "speaker": "anna",
          "balloon": "speech",
          "text": "My first strip."
        }
      ]
    }
  ]
}

That is the whole embed: a script tag, a pack URL, and a document. Save it as index.html and open it, no server required.

Installing locally instead?

npm install @toonstrip/element @toonstrip/pack-comic-chat works too, but a bare import "@toonstrip/element" only resolves in a browser through a bundler or an import map — a plain <script type="module"> cannot do it alone. See Plain HTML for wiring it into a bundler and serving a pack from your own static files.

Next

Write a strip walks through the document format with live examples. Plain HTML covers the element’s full API and using it from a framework. Using Astro, React, or Vue directly? See the Astro, React, or Vue reference.