Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Integrations
Using Vanilla Breeze with static site generators and frameworks.
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.
Framework Philosophy
Vanilla Breeze follows HTML-first, CSS-second, JavaScript-third principles. This means:
- Universal compatibility - Components work with any backend that generates HTML
- No build step required - Use directly in the browser for basic usage
- Progressive enhancement - Content is accessible without JavaScript
- 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:
Directory structure
integrations/├── astro/ # Astro components and layouts│ ├── components/ # .astro component files│ ├── layouts/ # Page layout templates│ └── styles/ # Astro-specific CSS└── eleventy/ # Eleventy templates ├── _includes/ # Nunjucks partials ├── _layouts/ # Page layouts ├── _data/ # Site configuration └── assets/ # 11ty-specific CSSCopy the relevant integration folder into your project and customize as needed. See the individual integration pages for detailed setup instructions.