A small full-stack framework. Hono on the edge, Preact in the browser, manifest driven routes, typed RPC, streaming everywhere.
hono-preact is a single-package framework that pairs Hono (the runtime that handles requests on Cloudflare Workers) with Preact (the renderer in the browser). Routes are declared in code, not inferred from a folder tree, and loaders, actions, guards, and forms are typed end-to-end.
Four files. That's the whole project shape.
The fastest way to start is the scaffolder. Run it with no arguments for the interactive wizard, or pass a directory:
npm create hono-preact
# or: pnpm create hono-preact my-appThe wizard picks the adapter (Cloudflare Workers or Node), optional
hono-preact-ui components, and whether to install and init git. For scripting,
every prompt has a flag (--adapter, --ui/--no-ui, --no-install,
--no-git, --yes); with npm, pass tool flags after --
(npm create hono-preact my-app -- --adapter node). pnpm, yarn, and bun forward
them directly.
Full CLI reference: Docs · CLI.
These are the four files the scaffolder writes:
// vite.config.ts
import { honoPreact } from 'hono-preact/vite';
import { cloudflareAdapter } from 'hono-preact/adapter-cloudflare';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [honoPreact({ adapter: cloudflareAdapter() })],
});// src/routes.ts
import { defineRoutes } from 'hono-preact';
export default defineRoutes([
{ path: '/', view: () => import('./pages/home.js') },
]);// src/pages/home.tsx
export default function Home() {
return <h1>Hello</h1>;
}// src/Layout.tsx
import { ClientScript, Head } from 'hono-preact';
export default function Layout({ children }) {
return (
<html>
<Head defaultTitle="hono-preact" />
<body>
<main id="app">{children}</main>
<ClientScript />
</body>
</html>
);
}Full walkthrough: Docs · Quick start.
Adding hono-preact to an existing project instead of scaffolding a new one:
pnpm add hono-preact hono preact 'preact-iso@github:preactjs/preact-iso#22460942e6e0ff9b9d4a8a9cf16222ad59797777' preact-render-to-string hoofd
pnpm add -D vite
preact-isocomes from GitHub, pinned to an immutable v3 commit (github:preactjs/preact-iso#22460942e6e0ff9b9d4a8a9cf16222ad59797777); the npm release is still 2.x and lacks theRouteHookshape (pathParams/searchParams) the framework relies on. The scaffolder pins this for you.
v0.13.0. Pre-1.0; expect changes between minor versions.
See CONTRIBUTING.md.