0KB
Zero JavaScript, by default
Static pages ship no client-side JavaScript unless a component is explicitly marked as an island.
Build fast, server-rendered sites.
Avalon is a full-stack JavaScript framework for islands architecture and partial hydration. Create server-rendered sites with the UI frameworks you already use, and deploy with Nitro.
bun create avalonPartial hydration, per island.
Pages render to HTML on the server. Interactive components opt into hydration individually through the island prop, and Avalon loads their JavaScript on your chosen condition. The rest of the page stays static.
Optimized for Core Web Vitals.
Avalon's architecture is designed around the metrics that matter.
LCP
Largest Contentful PaintHTML streams immediately — no JS required to render content
INP
Interaction to Next PaintIslands hydrate independently — no shared main-thread contention
CLS
Cumulative Layout ShiftSSR output matches the hydrated DOM — no reflow on hydration
React and Vue on the same route.
Each island compiles through its own renderer and ships as its own chunk. Mixing frameworks on one route means multiple runtimes and more total JavaScript than a single-framework page — useful when you need components from different ecosystems, not automatically a smaller bundle.
- Counter.tsxreact
- Chart.vuevue
- Feed.sveltesvelte
- Search.solid.tsxsolid
- counter.a7f2.jsreact
- chart.38bc.jsvue
- feed.9d01.jssvelte
- search.c5e4.jssolid
Hydrate on your terms.
Built-in strategies for common patterns. Custom directives for everything else.
Hold the island's JavaScript until the component scrolls into view, then hydrate.
Best forCharts, carousels, anything below the fold.
Deploy wherever you already do.
Avalon builds on Nitro. The same codebase ships to Node, Bun, Deno, Cloudflare, Vercel, Netlify, AWS, and Azure.
Proven foundations.
01Renderer
Preact
Pages and layouts render server-side with Preact. JSX authoring, 3KB runtime, hooks API. The same component model you already know.
02Bundler
Vite
Instant HMR in development. Production builds with per-island code-splitting. Vite 8 environment API for SSR.
03Server
Nitro
Universal server engine. API routes, middleware, edge deployment. One codebase, any JavaScript runtime.
What is Avalon?
A full-stack JavaScript framework built around islands architecture and partial hydration. Pages render as HTML on the server, interactive components hydrate as islands, and deployment runs through Nitro to supported runtimes.
01Install
How do I get started with Avalon?
Run bun create avalon, follow the quick start, and add the island prop when a component needs interactivity.
02Hydration
Why does partial hydration matter?
Most marketing and content pages need little or no client-side JavaScript. Hydrating only islands limits what ships to the browser and can improve Core Web Vitals compared with hydrating the entire page.
03JS
When should I use islands?
When only some of the page needs to be interactive. Mark those components as islands and the rest stays HTML, with no client JavaScript.
What else ships with Avalon?
Beyond islands and hydration — the full toolkit.
Partial hydration
Each island hydrates independently. Static regions never load a runtime.
Multi-framework
Use any combination in the same project.
│File-based routing
The filesystem is the router. No config.
shellcontentislandslate
Streaming SSR
HTML arrives in chunks. First byte is near-instant.
GET/api/users/42
200
{ "id": 42, "name": "Ada" }Typed API routes
Server endpoints alongside your pages. Full request access, typed params, any backend resource.
webp·1200×630·optimized
Image optimization
Modern formats, no layout shift, built-in.
Middleware
Auth, redirects, logging — scoped or global.
Edge deployment
Deploy to any Nitro target. One build, every runtime.
Start shipping in a minute.
Zero config. One command: bun create-avalon.