Litro
Litro is a greenfield fullstack web framework built on three pillars:
- Web Components — choose your framework: Lit (default), FAST Element, or Elena
- Nitro — the server engine (same server powering Nuxt). Handles routing, API routes, SSR, and deployment adapters.
- Vite — client-side bundling and HMR during development.
Why Litro?
Most frameworks lock you into a proprietary component model and a tightly coupled server layer. Litro is different:
- Components are standard web components — they work anywhere the browser does.
- You choose your web component framework. Same routing, data layer, and deployment — different component model.
- The server is Nitro — you get access to every Nitro deployment adapter (Node.js, Cloudflare Workers, Vercel Edge, and more) without any additional configuration.
- SSR is spec-compliant — Declarative Shadow DOM streaming for Lit/FAST, light DOM for Elena. No VDOM required.
Choose Your Framework
Litro's adapter system lets you pick the web component framework that fits your project:
| Adapter | DOM Model | SSR | Best For |
|---|---|---|---|
| Lit (default) | Shadow DOM | DSD streaming | General-purpose apps, largest ecosystem |
| FAST Element | Shadow DOM | DSD streaming | Fluent UI integration, observable reactivity |
| Elena | Light DOM | Direct rendering | Content sites, global CSS, smallest payloads |
The adapter is selected at project creation via --adapter lit|fast|elena. Everything else — routing, data fetching, content, deployment — stays the same. See the Adapter overview for details.
Architecture
User Request
│
▼
Nitro Server
├── /api/** → server/api/ route files (plain H3 handlers)
└── /** → Page Handler
├── SSR mode: FrameworkAdapter.renderPage() → streams HTML
│ ├── Lit/FAST: @lit-labs/ssr or @microsoft/fast-ssr → DSD HTML
│ └── Elena: light DOM SSR → plain HTML
└── SSG: prerendered .html served statically
What You Get
- File-system routing (pages/ directory → URL)
- SSR with streaming Declarative Shadow DOM
definePageDatafor server-side data fetching- Built-in client-side router (
LitroRouter) using the URLPattern API - Content layer for Markdown (11ty-compatible)
- SSG (static site generation) via the
ssgPreset - Recipes for common project types (fullstack, 11ty blog, Starlight docs)
Adapter Guides
- Adapter Overview — how the adapter system works, what stays the same
- Lit Adapter — Shadow DOM, DSD SSR, decorator API
- FAST Element Adapter — Shadow DOM, DSD SSR, observable API
- Elena Adapter — Light DOM, direct SSR, mixin API
- Switching Adapters — migration guide
Coming from Another Framework?
If you're evaluating Litro from the perspective of a framework you already know:
- Litro vs Next.js — same file-based routing and SSR, different component model
- Litro vs Nuxt.js — shared Nitro server engine; migration is primarily replacing Vue with Lit
- Litro vs Enhance — both render web components server-first; different authoring model and deployment story
- Why Web Components? — the philosophical case for standards-based development
Migration guides with step-by-step code walkthroughs: