hono-preact
Overview
Quick Start
The Route Table
Layouts & Nesting
Adding Pages
Active Links
Server Loaders
Loading States
Reloading Data
Prefetching
Streaming
Live Loaders
Realtime Channels
Server Actions
Optimistic UI
View Transitions
Middleware
CSRF Protection
CLI
Vite Config
Project Structure
Composing Hono Middleware
WebSockets
renderPage
Link Prefetch
Build & Deploy
Overview
Dialog
Popover
Tooltip
Menu
Context Menu
Select
Combobox
Toast
renderElement
useControllableState
mergeRefs
useListNavigation
useTypeahead
useListboxSelection
usePosition
usePositioner
useDismiss
useFocusReturn
useSafeArea
usePresence

CLI#

create-hono-preact scaffolds a new hono-preact app and can add agent guidance to an existing one. It is the same binary whether you run it through npm, pnpm, or yarn.

Create a new app#

pnpm create hono-preact my-app

This scaffolds my-app/, installs dependencies, and initializes a git repo. Then:

cd my-app
pnpm dev

Options#

FlagDefaultDescription
--adapter=<cloudflare|node>cloudflareTarget runtime. cloudflare for Workers, node for a Node server.
--no-installinstall runsSkip the dependency install step.
--no-gitgit init runsSkip initializing a git repository.
--version, -vPrint the CLI version.
--help, -hPrint usage.

Add agent guidance to an existing app#

If you added hono-preact to a project you did not scaffold (for example with pnpm add hono-preact), drop in the guidance an AI coding agent reads:

npx create-hono-preact add-agents

This writes AGENTS.md (framework conventions for any AI coding agent) and a one-line CLAUDE.md pointer into the current directory. Existing files are left untouched unless you pass --force.

FlagDefaultDescription
--forceoffOverwrite AGENTS.md / CLAUDE.md if they already exist.

See Quick Start for the full walkthrough.