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. It generates a complete, deploy-ready app and installs dependencies for you:
npm create hono-preact my-app
# or: pnpm create hono-preact my-app
# or: yarn create hono-preact my-app
# or: bun create hono-preact my-appThen:
cd my-app
pnpm devOptions:
--adapter=<cloudflare|node>pick the deployment target (default:cloudflare)--no-installskip the dependency install step--no-gitskipgit init--help,--version
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('./views/home') },
]);// src/views/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 preact-render-to-string hoofd
pnpm add -D vitev0.6.0. Pre-1.0; expect changes between minor versions.
See CONTRIBUTING.md.