Gutenberg Documentation

Build semantic, themable pages from YAML

Complete reference for all page types, components, and configuration options.

Read Guide View Examples
## Getting Started Gutenberg pages are defined in YAML and rendered through a 5-stage pipeline: 1. **LINT** — Parse and validate your schema 2. **SCAFFOLD** — Build an unclassed HTML structure 3. **ENRICH** — Resolve semantic roles to CSS classes 4. **STYLE** — Apply theme and serialize to HTML 5. **SNAPSHOT** — Capture screenshots for QA Each stage is a separate MCP tool, allowing you to inspect intermediate artifacts and compose custom workflows.

Core Features

📝

Semantic Markup

Each component carries semantic roles (hero-heading, btn-primary, feature-card) that resolve to CSS classes automatically.

Learn more
🎨

5 Built-in Themes

Ink (editorial), Mono (technical), Ocean (modern), Light and Dark variants. All pure bespoke CSS, no Tailwind.

Learn more
⚙️

Composable Pipeline

Use tools independently or chain them together. Inspect intermediate artifacts. Reuse scaffolds across themes.

Learn more
📱

Responsive by Default

All layouts respond to viewport size via CSS Grid and semantic width constraints (narrow, standard, wide).

Learn more
🌍

Deploy Instantly

Export to static HTML and deploy to Cloudflare Pages with a single command.

Learn more
🔗

No Dependencies

All CSS is embedded. No external CDN, no JavaScript required. Output is a single .html file.

Learn more
## Available Section Types | Type | Variants | Usage | |---|---|---| | **navigation** | default, centered, split | Site header and navigation links | | **hero** | centered, split, full-bleed | Large attention-grabbing section | | **features** | grid-2, grid-3, grid-4, list | Showcase multiple features or benefits | | **content** | prose, narrow, wide | Flexible markdown or HTML content | | **cta** | centered, split, banner | Call-to-action with buttons | | **footer** | simple, detailed, newsletter | Site footer with links and info | Each section accepts optional semantic axes to modify tone and emphasis: - **vibe**: serene, gentle, steady, vibrant, intense, urgent - **intent**: engage, inform, persuade, direct - **narrative**: exposition, inciting, rising, climax, falling, resolution - **cohesion**: opens, continues, amplifies, supports, contrasts, pivots, echoes, resolves, closes

Ready to Build?

Start with a simple YAML spec and render across all 5 themes instantly.

View Examples