epub-reader

A dependency-free EPUB 3 reader built from vanilla web platform primitives. Drop <epub-reader src="book.epub"> into any page for a Shadow-DOM viewer with TOC sidebar, toolbar, progress bar, and keyboard navigation. It reads Vanilla Breeze design tokens directly, so it inherits the active theme with zero extra wiring.

Where to find it

npm: @profpowell/epub-reader
GitHub: ProfPowell/epub-reader
Live demos: profpowell.github.io/epub-reader
License: MIT

Install

Via CDN:

Or via npm:

Not currently bundled into Vanilla Breeze — wire it in yourself. There is no build coupling between the two repos; the interface is purely CSS custom properties.

Demo

A live <epub-reader> loading a small sample EPUB. The toolbar, sidebar, progress bar, and content area all pick up VB tokens (surface, text, border, interactive, font-mono). Switch the site theme to see the reader chrome re-skin.

Quick reference

Attribute / API	Purpose
`src`	URL of an EPUB to auto-load.
`start`	Spine index to open first (default `0`).
`hide-toc`	Boolean — start with the TOC sidebar collapsed.
`allow-scripts`	Boolean — adds `allow-scripts` to the chapter iframe sandbox. Off by default for security.
`.open(source)`	Programmatic open. Accepts a URL or `ArrayBuffer`.
`.next() / .prev()`	Navigate spine.
`.goToIndex(i, fragment?)`	Jump to a specific spine entry.
`epub-loaded / epub-navigate / epub-error`	Bubbling, composed CustomEvents.

See the README for the full reference.

VB tokens consumed

The component reads VB tokens directly through shadow-DOM inheritance — no bridge file needed.

Token group	Tokens
Surfaces	`--color-background`, `--color-surface`, `--color-surface-raised`
Text	`--color-text`, `--color-text-muted`
Interactive	`--color-interactive`, `--color-interactive-text`, `--color-danger`
Chrome	`--color-border`, `--border-width-thin`, `--radius-s`, `--radius-m`, `--radius-full`, `--shadow-l`
Typography	`--font-mono`, `--font-size-2xs`, `--font-size-xs`, `--font-size-s`, `--font-size-m`, `--font-weight-semibold`
Spacing	`--size-3xs`, `--size-2xs`, `--size-s`, `--size-m`

The single component-specific override is --reader-hl-color (selection / highlight color).

Usage

Give the element a definite block size (via CSS) — it does not auto-expand. block-size: 100vh for a full-page reader, or any other fixed/percent height that fits your layout.