Web Component Integrations

Five standalone web components, published independently on npm under ~tpowell2, that drop into a Vanilla Breeze page with zero extra wiring.

Theme-ready, not VB-dependent

None of these components require Vanilla Breeze. Each ships with sensible pixel/color fallbacks so they work fine on any HTML page. But they're built to consume the same design-token namespaces VB uses — --color-*, --size-*, --font-*, --radius-*, --shadow-*, --border-width-* — so when you place them inside a VB-themed page they pick up the active theme automatically.

That means switching between VB theme packs (default, rough, extreme-swiss, extreme-neumorphism, etc.) re-skins their chrome alongside everything else. Per-instance overrides via the component's own --{component-name}-* custom properties always win, so brand customization stays available.

Available components

pdf-viewer

PDF.js wrapper with navigation, zoom, search, thumbnails, and dark mode.

image-editor

Crop, rotate, filter, resize, and export images. 35+ CSS custom properties.

code-block

Syntax-highlighted code with copy, line numbers, focus mode, and diffs.

browser-window

Safari-style window chrome for demos. Source viewing, full-screen, CodePen export.

code-playground

Live HTML/CSS/JS editor with sandboxed preview and console output.

Loading patterns

npm install

Install the package alongside your existing VB setup:

CDN ESM

Use directly in any HTML page without a build step:

Already in VB by default

Two of these components — browser-window and code-block — are already package-json dependencies of Vanilla Breeze itself, used throughout these docs to render demos. The integration pages document them anyway because they're independently usable outside VB.