Vanilla Breeze

Integrations

Using Vanilla Breeze with static site generators, content management systems, and theme-ready third-party web components.

Static Site Generators

Framework-specific components and templates for popular SSGs.

Astro

8 components, 4 layouts, TypeScript support. Modern content-focused sites with islands architecture.

Eleventy (11ty)

Nunjucks templates, 3 layouts, 6 partials. Simple and flexible static site generation.

Content Management

CMS adapters and recipes are coming soon. Vanilla Breeze pages render fine from any CMS that emits HTML — see Vanilla Press for an HTML-first publishing front-end already in use.

Web Components

Standalone web components that ship independently on npm and drop into a Vanilla Breeze page with zero extra wiring. They don't depend on VB — they're theme-ready, reading the same --color-*, --size-*, --font-*, and --shadow-* tokens, with sensible fallbacks so they also work outside VB.

pdf-viewer

PDF.js wrapper with navigation, zoom, search, thumbnails, and dark mode. Theme-pack aware.

image-editor

Crop, rotate, filter, resize, and export images. Drag-and-drop, undo/redo, 35+ CSS custom properties.

code-block

Syntax-highlighted code with copy, line numbers, focus mode, diff support, and multi-file tabs.

browser-window

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

code-playground

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

screen-saver

17 idle-overlay effects, five of which (bauhaus, memphis, art-deco, brutalist, kawaii) inherit VB theme tokens.

epub-reader

Dependency-free EPUB 3 viewer with TOC sidebar, toolbar, and keyboard navigation. Inherits 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.

Framework Philosophy

Vanilla Breeze follows HTML-first, CSS-second, JavaScript-third principles. This means:

  1. Universal compatibility - Components work with any backend that generates HTML
  2. No build step required - Use directly in the browser for basic usage
  3. Progressive enhancement - Content is accessible without JavaScript
  4. Web Components - Provide interactivity when needed

The integrations provide idiomatic components for each framework while maintaining Vanilla Breeze conventions.

Integration Features

Components

  • BaseHead - Standard head setup with meta tags
  • ThemeToggle - Theme switcher button
  • NavTree - Tree navigation from data
  • PageToc - Auto-generated table of contents
  • Card, FormField - Layout element wrappers
  • CodeBlock, BrowserWindow - Demo helpers

Layouts

  • BaseLayout - Minimal page structure
  • DocsLayout - Documentation with sidebar
  • BlogLayout - Blog post with metadata
  • LandingLayout - Marketing page

Conventions

  • Uses --size-* tokens for spacing
  • Uses --color-* tokens for colors
  • Uses layout-* custom elements
  • Uses data-* attributes for config
  • Follows progressive enhancement

Other Libraries

Vanilla Breeze components are framework-agnostic and work seamlessly with any HTML-first approach:

  • HTMX - Hypermedia-driven applications with minimal JavaScript
  • Alpine.js - Lightweight reactive JavaScript framework
  • Hotwire/Turbo - HTML over the wire for fast navigation
  • Plain HTML - No framework needed for static sites

Since Vanilla Breeze uses standard HTML, CSS, and Web Components, it integrates naturally with any tool that outputs HTML.

Installation

The integration files are located in the /integrations/ directory:

Copy the relevant integration folder into your project and customize as needed. See the individual integration pages for detailed setup instructions.
↑