Preact and 
Vite, with file-system routing and signals. Server-render by default, and ship JavaScript only for the islands that need it.Introduction
Fresh is a small, fast, full-stack web framework for Preact, built on Vite. Routes render on the server, and islands hydrate the parts that need to be interactive.
Introducing Fresh 3:
The framework so simple, you already know it.
Preact and Vite, with file-system routing and signals. Server-render by default, and ship JavaScript only for the islands that need it.
Get started
npm create @frsh/app@latest
pnpm create @frsh/app
yarn create @frsh/app
deno run -A npm:@frsh/create-app
Take a tour of Fresh
Server-rendered by default
Every route renders on the server as a Preact component. Zero JavaScript hits the browser unless you opt in with an island. Pages are fast because they start as plain HTML.
routes/index.tsx
export default function HomePage() {
const now = Temporal.Now.plainDateTimeISO()
.toLocaleString("en-US");
return (
<p>Freshly server-rendered {now}</p>
);
}Freshly server-rendered 6/21/2026, 4:00:53 PM
Interactive where it matters
Most of your page is static HTML. Islands are the small, interactive parts that get hydrated with JavaScript. You choose exactly what runs on the client.
Built on Preact and Signals, so islands are tiny and reactive out of the box.
Learn more about islandsislands/Counter.tsx
import { useSignal } from "@preact/signals";
export default function Counter(props) {
const count = useSignal(props.start);
return (
<div>
<h3>Interactive island</h3>
<p>The server supplied the initial value of {props.start}.</p>
<div>
<button onClick={() => count.value -= 1}>-</button>
<div>{count}</div>
<button onClick={() => count.value += 1}>+</button>
</div>
</div>
);
}Interactive island
The server supplied the initial value of 3.
3
Forms that just work
Handle submissions server-side with standard Request and FormData. No client-side state management, no serialization headaches. Progressive enhancement comes free.
Routes and forms in Freshroutes/index.tsx
import { handler } from "./$index.ts";
export const handlers = handler({
async POST(ctx) {
const form = await ctx.req.formData();
const treat = form.get("treat");
await db.votes.insert({ treat });
return ctx.redirect("/thanks", 303);
},
});Swap parts of the page during navigation
Click a link or submit a form and Fresh replaces just the parts of the page that need to change. No full reload, no client-side routing library. The browser navigation UI still works: address bar, back and forward buttons, loading indicator.
Learn more about Partialsroutes/docs/[id].tsx
import { handler, page } from "./$[id].ts";
import { Partial } from "fresh/runtime";
export const handlers = handler({
async GET(ctx) {
const content = await loadDoc(ctx.params.id);
return { data: { content } };
},
});
export default page(({ data }) => (
<div f-client-nav>
<aside>
<a href="/docs/introduction">Introduction</a>
<a href="/docs/routing">Routing</a>
<a href="/docs/islands">Islands</a>
</aside>
<main>
<Partial name="content">
{data.content}
</Partial>
</main>
</div>
));And so much more
<Head> component
Set titles, meta tags, stylesheets, and scripts from any page or island. Fresh hoists them into the document head for you.
<Head>
<title>My Page</title>
<meta name="description"
content="..." />
</Head>Route handlers
Define GET, POST, DELETE, or any HTTP method as a named handler on your route, with full type safety.
export const handlers = handler({
GET(ctx) { /* ... */ },
POST(ctx) { /* ... */ },
DELETE(ctx) { /* ... */ },
});Typed everything
Generated $ helpers give you typed ctx, params, and props.data inferred from the actual handler. No manual interfaces.
import { handler, page } from
"./$[id].ts";
export const handlers = handler({
GET(ctx) {
return { data: ctx.params.id };
},
});Nested layouts
Drop a _layout.tsx into any folder under routes/. Fresh composes the layouts outermost-first, automatically.
import { layout } from
"./$_layout.ts";
export default layout(
({ Component }) => (
<div class="app">
<Component />
</div>
),
);Events on static pages
Wire onClick into server-rendered HTML with serializable handlers. No island required. The surrounding markup stays static.
import { add } from "fresh/events";
<button onClick={add(count, 1)}>
+
</button>Vite-powered dev
Built on Vite. Instant dev server, fast HMR with Preact Fast Refresh, and full Vite plugin support.
import { defineConfig } from "vite";
import { fresh } from "fresh/vite";
export default defineConfig({
plugins: [fresh()],
});(…and even more)
File-based routing
Drop a file in routes/, get a URL. Dynamic params via [id].tsx.
Middleware
Chain auth, logging, or any logic before your routes run.
Signals & reactivity
Preact Signals power reactive state inside islands and even on the static page.
Deploy anywhere
Nitro builds for Node, Deno Deploy, Cloudflare Workers, containers, and more.
Error pages
A single _error.tsx renders 404s, 405s, and any thrown error.
Partials
Swap regions of the page during navigation, with no full reload.
Built for the edge
Fresh is the secret sauce behind production-grade, enterprise-ready software like Deco.cx, Brazil's top eCommerce platform
“The team also used Fresh, a next-gen Deno-native full stack web framework that sends zero JavaScript to the client, for its modern developer experience and snappy performance…
This stack unlocked 5x faster page load speeds and a 30% jump in conversion rates for their clients.”
Runtime agnostic
Fresh builds with Nitro and runs anywhere Nitro does. Node, Deno, Cloudflare Workers, containers, or a static export for a CDN. Pick a host and deploy.
No custom runtime, no fork of the standard library, no host-specific entry file. The same project ships to all of them.
Get started
Time for a Fresh start
Jump right in and build your website with Fresh. Learn everything you need to know in seconds.
Get started