Web Component Integrations

Ten 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

bg-wc

Animated WebGL/Canvas2D backgrounds behind any content. Dozens of presets, theme-token aware, also usable via data-background attributes.

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.

screen-saver

17 idle-overlay effects, five of which pair with matching VB themes (bauhaus, memphis, art-deco, brutalist, kawaii).

epub-reader

Dependency-free EPUB 3 viewer with TOC, toolbar, and keyboard navigation. Reads VB tokens directly.

terminal-window

Styled terminal with prompts, typing animation, and a custom-command registry. Theme-aware via VB token bridge.

browser-console

In-page console capturing console.* calls with severity colors, console.table, timers, and groups. Theme-aware via VB token bridge.

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.