AvalonAvalon
GitHub

Islands architecture · Preact-native SSR

The full-stack islands framework.

Avalon is a full-stack framework for building fast websites. Author pages in JSX, add islands from any supported framework, and deploy to any JavaScript runtime.

Read the docs$ bun create-avalon
Compatible with
  • ReactReact
  • PreactPreact
  • VueVue
  • SvelteSvelte
  • SolidSolid
  • QwikQwik
  • LitLit

01 · Architecture

Partial 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.

Island schematicCounteron:clientCharton:visibleSearchon:interaction
Fig. 01 · Three islands on a static page. The rest is HTML.

02 · Performance

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

03 · Interoperability

Use any supported framework, side by side.

Every island compiles through its own framework's renderer and ships as an independent client chunk. A page using three frameworks ships three small runtimes — not the union.

Sourcesrc/islands/
  • Counter.tsxreact
  • Chart.vuevue
  • Feed.sveltesvelte
  • Search.solid.tsxsolid
Compileddist/islands/
  • counter.a7f2.js~44 KB
  • chart.38bc.js~34 KB
  • feed.9d01.js~8 KB
  • search.c5e4.js~7 KB

04 · Partial hydration

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.

05 · Deploy

Deploy wherever you already do.

Avalon builds on Nitro, so the same codebase ships to any JavaScript runtime. One build target. Every environment.

NodeBunDenoCloudflare WorkersVercelNetlifyAWS LambdaAzure Functions

06 · Built on

Proven foundations.

01

Preact

Pages and layouts render server-side with Preact. JSX authoring, 3KB runtime, hooks API. The same component model you already know.

Renderer
02

Vite

Instant HMR in development. Production builds with per-island code-splitting. Vite 8 environment API for SSR.

Bundler
03

Nitro

Universal server engine. API routes, middleware, edge deployment. One codebase, any JavaScript runtime.

Server

07 · Features

Everything else you need.

Beyond islands and hydration — the full toolkit.

847KB

Zero JavaScript, by default

Pages ship no client-side JavaScript unless a component is explicitly marked as an island.

Partial hydration

Each island hydrates independently. Static regions never load a runtime.

React
Vue
Svelte
Solid
Preact
Qwik
Lit

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·42 KB

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.

Start buildingView on GitHub