Fresh - The simple, approachable, productive web framework.

Fresh v1.6 has been released with Tailwind CSS, better Plugin API and more →

The simple, approachable, productive web framework

deno run -A -r https://fresh-7zrrnv0qg3ze.deno.dev

Introducing Fresh:

The framework so simple, you already know it.

Fresh is designed to be easy to use by building on the best well-known tools, conventions, and web standards.

Build fast apps fast

Fresh routes are dynamically server-rendered Preact components, so there's zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

routes/index.tsx

export default function HomePage() {
  const time = new Date().toLocaleString();
  return (
    <p>Freshly server-rendered {time}</p>
  );
}

Freshly server-rendered Nov 25, 2024, 12:25:03 PM

Island-based architecture

Fresh ships plain HTML to the client, and then hydrates with JavaScript only where needed.

Because it's Preact, you get best-in-class performance, plus the convenience of Signals.

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, the right way

Don't fight the browser. Fresh helps you handle form submissions and other dynamic requests server-side, from any route.

Since Fresh is built on Deno, it's built on web standards.

Forms in Fresh

routes/index.tsx

import { Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  async POST(req) {
    const form = await req.formData();

    // Do something with the form data here,
    // then redirect user to thank you page

    const headers = new Headers();
    headers.set("location", "/thanks");
    return new Response(null, {
      status: 303,
      headers,
    });
  },
};

Stream HTML straight from the server

Fresh Partials let you fetch HTML and slot it directly into the page, without a full page reload.

Learn more about Partials

components/Recipes.tsx

import { Partial } from "$fresh/runtime.ts";

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

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