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
Validation
Optimistic UI
View Transitions
Middleware
CSRF Protection
CLI
Vite Config
Project Structure
Composing Hono Middleware
WebSockets
Rooms & Presence
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

hono-preact docs#

A small, opinionated full-stack framework. Hono on the edge, Preact in the browser, manifest driven routes, typed RPC, streaming everywhere.

Get started#

  • Quick start: five-minute walkthrough from pnpm install to a deployed page.
  • Project structure: what each file in a hono-preact project does.

Routing and layouts#

  • Routes: defineRoutes() and the route table.
  • Pages: view components and definePage().
  • Layouts: nested layouts that survive navigation.
  • Vite config: the honoPreact() Vite plugin and its options.
  • Active links: marking the current route in navigation.
  • View transitions: animated route changes with the View Transition API.

Data#

Auth and access#

  • Middleware: the unified use primitive for auth gates, redirects, request-scoped setup, and stream observers.
  • CSRF protection: built-in CSRF token validation for forms and mutations.
  • Composing Hono middleware: wiring Hono-native middleware and custom routes alongside the framework.

Operations#

  • Prefetch: preloading routes on hover or focus.
  • Link prefetch: browser-level speculation rules for near-instant navigation.
  • Reloading: invalidating loaders after mutations.
  • renderPage: the SSR entry point.
  • Deployment: shipping to Cloudflare Workers or Node.js.
  • WebSockets: full-duplex connections via Hono's WebSocket helper.

For LLMs and AI tools#

These docs are available as plain text for LLMs and AI coding assistants: /llms.txt is a curated index of every page, and /llms-full.txt is the entire documentation concatenated into one file.


Looking for a working app to read? The whole demo is built with the framework.