Skip to content
Kadal Deck docs

Fresh

Terminal window
npm install @kadal/deck-fresh preact @preact/signals
src/main.tsx
registerLazyRenderer("fresh", () => import("@kadal/deck-fresh").then((m) => m.freshRenderer));
/** @jsxImportSource preact */
// counter.fresh.tsx — a Fresh island, unchanged
import { useSignal } from "@preact/signals";
import { deckFresh } from "@kadal/deck-fresh";


export const Counter = deckFresh(({ start = 0 }) => {
  /* … */
});
// vite.config.ts — keep React's plugin off Fresh files, as for Preact
import { deckFreshFiles } from "@kadal/deck-fresh/build";


plugins: [react({ exclude: [...deckFreshFiles] }) /* , … */];

This is the Preact renderer with a different name. Fresh’s client runtime is Preact: an island is a Preact component and useSignal is @preact/signals. What Fresh adds is a server — routing, partials, server-rendered pages — and every part of that is about delivering a page, which a slide already in the browser doesn’t need.

What the package does give you is the name: register "fresh", write framework="fresh", and a Fresh island’s source moves onto a slide unchanged.