Introduction

Summary

Avalon is a multi-framework islands architecture framework. Pages are static HTML by default; interactive components ("islands") hydrate selectively on the client.

Core primitives:

• island prop — added to any component to make it an island; condition controls when it hydrates, ssr: false skips SSR and mounts in the browser
• Hydration conditions: on:client (immediate), on:visible (IntersectionObserver), on:interaction (first click/hover), on:idle (requestIdleCallback), media:<query> (CSS media query)
• File-system routing — scaffolded apps use app/modules/<name>/pages/ (the main module is /); without modules in config, routes come from src/pages/
• Optional client navigation — clientRouter: true fetches the next SSR HTML document and swaps it in without a full reload

Supported frameworks: React, Preact, Vue, Svelte, Solid, Lit (all usable in the same project)

Runtime: Nitro server (Node, Bun, Deno, Cloudflare Workers, Vercel)

What is Avalon?

Avalon is a multi-framework islands architecture for building fast, modern websites. It lets you use React, Preact, Vue, Svelte, Solid, or Lit — all in the same project — while shipping zero JavaScript by default.

The core idea is simple: most of your page is static HTML. Only the parts that need interactivity become "islands" that hydrate on the client. Everything else stays as pure HTML and CSS, making your pages fast by default.

Core Philosophy

Zero JS by default. Pages render as pure HTML on the server. No JavaScript is sent to the browser unless you explicitly mark a component as an island.

Selective hydration. You control exactly when each island becomes interactive — on page load, when it scrolls into view, on first interaction, or when the browser is idle.

Multi-framework. Use the framework that fits the job. A data visualization in React, a form in Svelte, a counter in Preact — all on the same page, each bundled independently.

File-system routing. Add a file under a module’s pages/ folder (or under src/pages/ when not using modules) and it becomes a route. No route table required.

Edge-ready. Powered by Nitro, Avalon deploys to Node, Deno, Bun, Cloudflare Workers, Vercel, and more.

How it compares

Avalon shares Astro’s islands-first idea: static HTML by default, interactive regions on the client, for landers, blogs, docs, and product UI. Pages are JSX or MDX on Vite and Nitro, not .astro templates. See Avalon vs Astro.

Next.js is a React application framework (App Router, Server Components). Avalon is islands: HTML first, JavaScript only where you mark an island. See Avalon vs Next.js.

• JSX and MDX pages — pages and layouts are JSX (.tsx) or MDX, not .astro templates
• Nitro server — APIs, middleware, and deployment presets in one full-stack model
• Multi-framework — React, Vue, Svelte, Solid, Lit, and Qwik in one project when your boundaries warrant it (islands architecture)

Next steps

Ready to try it? Head to Installation to create your first project.