GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing usefresh.dev — Fresh - The simple, approachable, productive web framework.

Fresh 2.3 is here!—WebSockets, View Transitions, Temporal API, and more →

Introducing Fresh:

The framework so simple, you already know it.

No config files, no build step, no node_modules. Just one file and you have a server with routing, JSX, and islands.

deno run -Ar jsr:@fresh/init

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 11/12/2026, 11:42:55 AM

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 islands

islands/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.

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.

Forms in Fresh

routes/index.tsx

import { createDefine } from "fresh";
const define = createDefine();

export const handler = define.handlers({
  async POST(ctx) {
    const form = await ctx.req.formData();
    const treat = form.get("treat");
    await db.votes.insert({ treat });

    return new Response(null, {
      status: 303,
      headers: { location: "/thanks" },
    });
  },
});

What's your favorite treat?Lemon meringue pieLemon shortbread cookiesLemon sherbetLemon bars

Stream HTML straight from the server

Swap chunks of HTML from the server straight into the page. No full reload, no client-side routing library. Click a link or submit a form and Fresh streams just the part that changed. Perfect for interactive elements and dynamic apps.

Learn more about Partials

components/Recipes.tsx

import { Partial } from "fresh/runtime";

export const Recipes = () => (
  <div f-client-nav>
    <aside>
      <button f-partial="/recipes/lemonade">
        Lemonade
      </button>
      <button f-partial="/recipes/lemon-honey-tea">
        Lemon-honey tea
      </button>
      <button f-partial="/recipes/lemondrop">
        Lemondrop Martini
      </button>
    </aside>
    <main>
      <Partial name="recipe">
        Click a recipe to stream HTML into this spot
      </Partial>
    </main>
  </div>
);

Click a recipe to stream HTML into this spot

And so much more

View Transitions

Native-feeling page transitions with a single config flag. Customize per-element with plain CSS.

const app = new App({
  viewTransition: true,
});

Route Handlers

Define GET, POST, DELETE, or any HTTP method as a named handler on your route, with full type safety.

export const handlers = define.handlers({
  GET(ctx) { /* ... */ },
  POST(ctx) { /* ... */ },
  DELETE(ctx) { /* ... */ },
});

WebSockets

Add real-time endpoints with app.ws(). Define open, message, and close handlers in a single object.

app.ws("/chat", {
  open(socket) { /* ... */ },
  message(socket, event) {
    socket.send(event.data);
  },
});

<Head> Component

Set titles, meta tags, stylesheets, and scripts from any page or island. No hoisting hacks needed.

<Head>
  <title>My Page</title>
  <meta name="description"
    content="..." />
</Head>

OpenTelemetry

Auto-injects a traceparent meta tag into every page, connecting browser traces to server spans.

const app = new App({
  otel: true,
});

Content Security Policy

Automatic nonce injection for inline scripts and styles. Strong security defaults with zero boilerplate.

app.use(csp({
  directives: {
    scriptSrc: ["'nonce'"],
  },
}));

(…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.

Zero-config TypeScript

Just write .tsx. No tsconfig, no build step, it just works.

Deploy anywhere

Deno Deploy, Docker, Cloudflare Workers, or a single binary with deno compile.

Layouts

Nested layouts that compose automatically from the file system.

Built-in plugins

CORS, CSRF, IP filtering, and trailing slashes out of the box.

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

Read the case study

Built on Deno

Deno is the next evolution of server-side JavaScript, with stronger security, a robust built-in toolchain, and zero-config TypeScript support. (It's faster than Node, too.)

Learn more about Deno

Illustration of a lemon sliced cleanly in half, suspended in midair as though frozen in time the instant after the cut, the juice flung from the edges

Time for a Fresh start

Jump right in and build your website with Fresh. Learn everything you need to know in seconds.

Get started

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.