Examples & ToolingExample Manifests

Example Manifests

Guided tour of the seven sample manifests (01_simple to 07_video) — what each demonstrates, with key excerpts you can copy.

PanelWave maintains a reference set of sample manifests, from a minimal smoke-test file to a full branching story and a schema 1.1 video showcase. This page walks through the first seven and the four literature adaptations that follow, with excerpts you can copy. Validate any manifest with the CLI (panelwave validate <file>).

The full sample set is not in a public repository yet — a public samples repository is planned. Complete manifests you can download today are the player's demo manifests in panelwave/player → projects/demo/src/assets (sample-manifest.json, canvas-manifest.json, video-sequencing-manifest.json), which also run in the live demo.

SampleFileDemonstrates
01_simplepanelwave_graphic_novel_sample_01.json3 pages × 5 panels, linear graph, two locales, format views
02_complexpanelwave_graphic_novel_sample_02.jsonVariants, hotspot decisions, content warning, paywall, tracking, UI branding
03_scifipanelwave_graphic_novel_sample_03_scifi.jsonThemed bilingual linear story, string variables, extras
04_fantasypanelwave_graphic_novel_sample_04_fantasy.jsonThemed bilingual linear story with a larger character cast
05_minimalpanelwave_graphic_novel_sample_05_minimal.jsonThe smallest realistic manifest
06_branchingpanelwave_branching_sample.jsonTrue graph branching: 2 choice points, 4 endings
07_videopanelwave_graphic_novel_sample_07_video.jsonSchema 1.1 video panels: all play/start modes, reverse variant, defaults

All samples validate cleanly against the current schema — the same check panelwave validate runs with the CLI's bundled schema.

01_simple — the linear baseline

A 3-page noir short with 5 panels per page (15 panels), bigscreen-landscape page layouts, localized titles/descriptions in en-US and de-DE, and a simple linear graph across all panels. It also shows per-format view hints (formatViews) — a minimal focus rectangle so mobile-portrait rendering knows what part of the panel matters:

"formatViews": {
  "mobile-portrait": {
    "minimalFocusRect": { "x": 0.1, "y": 0.1, "w": 0.8, "h": 0.8 },
    "allowPageView": false,
    "allowPanelView": true
  }
}

Start here to understand chapters, pages, and placements.

02_complex — the kitchen sink

The same noir setting, but exercising most optional sections at once:

  • Variables with two scopes: a session-scoped choice and a read-only global (see Variables). Earlier revisions also defined a prefs.speech preference wired to every bubble's visibleIf; that boilerplate is gone since schema 1.3 made the speech toggle implicit:
"variables": {
  "definitions": [
    { "id": "path.choice", "type": "enum", "enum": ["none", "left", "right"], "default": "none", "scope": "session", "visibility": "public" },
    { "id": "user.age", "type": "integer", "default": 18, "scope": "global", "visibility": "private", "readOnly": true }
  ]
}
  • Hotspot-based decision navigation — panel p1-3 has two goTo hotspots that both lead to p1-4 but set path.choice to left or right (see Hotspots).
  • Panel variants — p1-4 renders a left- or right-path overlay depending on path.choice, and p2-3 swaps in a blur overlay plus a "Content adjusted" text layer when user.age < 16 (see Variants).
  • A content warning on a single panel: "contentWarnings": ["cw-violence"] referencing meta.content_warnings.
  • An active paywall from page 2 — ten panel-scope rules (p2-1 … p3-5), each {"scope": "panel", "refId": "...", "requireEntitlement": "premium"} (see Paywall).
  • Tracking with required consent and a six-event whitelist, plus UI branding and an extras cover (see Tracking, UI Settings).
  • Settings with outputPresets per format, including default transitions (see Settings).

03_scifi — Starbound: Echoes

A bilingual (en-US/de-DE) linear sci-fi story with three credited creators and two characters. Notable extra: plain string variables used as global constants:

"variables": {
  "definitions": [
    { "id": "ui.themeColor", "type": "string", "scope": "global", "default": "#4A90E2", "description": "Theme color for the UI" },
    { "id": "ship.name", "type": "string", "scope": "global", "default": "Prometheus", "description": "Name of the exploration vessel" }
  ]
}

04_fantasy — The Crystal Quest

Structurally similar to 03_scifi — a bilingual linear fantasy adventure — useful as a second data point for the same patterns (multi-creator credits, character roster, extras cover, image asset catalog with picsum placeholder art).

05_minimal — the smallest realistic manifest

One chapter, one page, three panels, two slide-transition edges, one cover extra. Good template for a "hello world" manifest — pair it with the Quickstart. Key shape:

"graph": {
  "entry": "p1",
  "edges": [
    { "from": "p1", "to": "p2", "transition": { "type": "slide", "dir": "left", "durationMs": 300 } },
    { "from": "p2", "to": "p3", "transition": { "type": "slide", "dir": "left", "durationMs": 300 } }
  ]
}

06_branching — The Crossroads of Fate

True branching navigation (as opposed to variant-based content swapping): 9 panels, 2 decision points, 4 distinct endings.

                [Start]
                   |
           [First Crossroads]
             /          \
        Forest          Mountain
           |               |
    [Forest Choice]  [Mountain Choice]
      /       \        /        \
 Clearing    Cave    Peak     Stream
     |         |       |         |
 [Ending1] [Ending2] [Ending3] [Ending4]

Each choice panel has two goTo hotspots pointing at different panels, recording the decision via mutations:

{
  "id": "hs-forest",
  "label": { "en-US": "Enter the Forest", "de-DE": "Betrete den Wald" },
  "shape": { "type": "rect", "x": 0.05, "y": 0.3, "w": 0.4, "h": 0.6 },
  "action": {
    "type": "goTo",
    "to": "panel-forest-path",
    "mutations": [{ "op": "set", "var": "choices.first", "value": "forest" }],
    "transition": { "type": "slide", "dir": "left", "durationMs": 350 }
  }
}

The chapter graph declares all nine edges up front (with per-edge transitions — fade into the first crossroads, directional slides along the branches), so the story structure is fully visible to tools like the CMS graph editor without executing anything.

07_video — schema 1.1 video showcase

A single-chapter manifest (panelwave.version: "1.1.0") that systematically exercises the video panel fields:

  • All four playMode values — once, loop, pingpong (with a direction: "reverse" VideoVariant on vid-pingpong for smooth backward playback), and loop-from with loopFromMs: 3000.
  • All three startMode values — on-view, on-hover, on-click.
  • A poster on the vid-once asset (VideoPoster).
  • Legacy backward compatibility — panel p-legacy-fields uses only the schema 1.0 autoplay/loop booleans and relies on the documented mapping (loop: true → playMode: "loop", autoplay: true → startMode: "on-view").
  • Work-level video defaults in settings.ui:
"settings": {
  "ui": {
    "autoplayDefault": false,
    "videoPlayModeDefault": "once",
    "videoStartModeDefault": "on-view",
    "videoMutedDefault": true
  }
}

08–11 — full-story literature adaptations

Four album-length samples adapt public-domain classics (Sherlock Holmes ×2, Jules Verne ×2) with complete story data, bilingual text (en-US/de-DE), per-chapter sequence audio, branching viewpoints, and premium-gated finale chapters.

The largest, 11_verne_20000_leagues (61 A4 pages, 183 panels, panelwave.version: "1.3.0"), is the showcase for the schema 1.3 reusable style presets: all 104 captions reference a single caption entry in settings.typography.textStyles, and all 79 speech bubbles reference one of six balloonPresets (speech/shout/thought × tail direction) via styleRef — the two whisper one-offs demonstrate combining a preset with a small inline balloonConfig override.

09_sherlock_speckled_band demonstrates what visibleIf is for now that the speech toggle is implicit: three clue bubbles appear only after the reader taps the matching hotspot ({ "var": "band.clue.vent" } etc.) — pure story logic, no speech-preference boilerplate anywhere.

  • Manifest Structure — the top-level layout all samples share
  • Validation — validating manifests with AJV or the CLI
  • CLI — panelwave validate, diff, and friends