The open-source player for interactive graphic novels

One player renders every PanelWave work — in the studio preview, on the public reader and on your own site. Page and panel view, video, sound, live languages, choices and accessibility, under the MIT licence.

View on GitHub

Fig. R — Reading a PanelWave workNo app: it opens in the browser. Page or panel view, your pace, your language, sound on or off.

SpecsEngineered for real-world works

licence: MIT
gzip budget (CI): ≤180 KB
Angular versions: 20–22
latest on npm: 1.2

Three views

Panel view with transitions, page view per output format, and canvas view with camera pan and zoom.

Graph navigation

JSON Logic conditions, edge priorities, back/forward history that restores state, and a Choices button.

Variables & variants

Five scopes, read-only values seeded by your site, conditional panel variants — first match wins.

Video panels

Play and start modes, single-active-video policy, sequential playback in page view.

Audio engine

A WebAudio mixer with ambient, music, voice-over and SFX buses; reader toggles for audio, SFX and speech.

Live languages

Switch language without reload, fallback chains, per-locale assets. Player UI in English and German.

Comic lettering

The same SVG balloon engine as the studio — ten balloon types, real text, re-fitted per language.

Paywall hooks

Work/chapter/panel/extras rules, free previews, age gates — the player emits events, your site runs checkout.

Accessible

Keyboard control, ARIA labels, live regions, focus management, reduced motion; automated axe sweeps in CI.

Tracking hooks

Consent-aware event tracking with a whitelist — panel views, choices, hotspot clicks, completion.

Plugin layers

Sandboxed iframe plugin layers with an origin-checked message bus.

Lean

A CI-enforced bundle budget of 180 KB gzipped, responsive images and lookahead preloading.

EmbedTwo ways in

Embed in minutes

In an Angular app — or on any website

Angular: the npm library

Install the package and drop in the shell component.

npm

npm install @panelwave/player @ngx-translate/core

<pw-player-shell
  [manifestUrl]="'assets/my-story/panelwave.json'"
  [showToolbar]="true"
  (panelChange)="onPanel($event)">
</pw-player-shell>

Any website: the reader iframe

Publish from the studio and paste the embed code it generates.

html

<iframe
  src="https://read.panelwave.org/your-team/your-work?embed=1"
  width="800" height="600" allow="fullscreen"
  style="border:0;max-width:100%" loading="lazy"
  title="Your work title"></iframe>

The library is Angular-only today; there is no drop-in script tag or web component yet. Some reader features live on read.panelwave.org already and arrive on npm with the next player release.

Fig. 7Self-host a whole work

Fig. 7 — Open format & playerFormat CC BY 4.0, player MIT. Publish with us — or download the work archive and serve it yourself.

A work archive plays from any static host

Asset URLs in an exported archive are relative to the manifest — unzip it next to the player and it plays. No server logic, no lock-in.

MITPlayer · SDKCC BY 4.0Format

Bring graphic novels to life on your site.

Open source, MIT-licensed — and the same player PanelWave runs itself.

View on GitHub Read the format spec