# hono-preact

> A small full-stack framework: Hono on the server, Preact in the browser, routes declared in code, typed loaders/actions/guards, streaming everywhere.

## Introduction

- [Overview](https://framework.sbesh.com/docs): A small, opinionated full-stack framework.
- [Quick Start](https://framework.sbesh.com/docs/quick-start): Build a movies list with a server loader and a form action.

## Pages & Routing

- [The Route Table](https://framework.sbesh.com/docs/routes): Declare every URL in your app in one place: `src/routes.ts`.
- [Layouts & Nesting](https://framework.sbesh.com/docs/layouts): A layout is a wrapper component that stays mounted across navigations between sibling routes.
- [Adding Pages](https://framework.sbesh.com/docs/pages): Add a page by creating a view component and registering it in the route table.
- [Active Links](https://framework.sbesh.com/docs/active-links): Highlighting the current page in navigation needs one question answered: does the current URL match a given route?

## Data

- [Server Loaders](https://framework.sbesh.com/docs/loaders): Pages often need data.
- [Loading States](https://framework.sbesh.com/docs/loading-states): Show a loading UI during client-side navigation by passing a `fallback` to `loader.View()`, so users see a skeleton or spinner instead of a blank page while their data loads.
- [Reloading Data](https://framework.sbesh.com/docs/reloading): Sometimes you need to re-run the loader imperatively, for example after a user adds a record to a table.
- [Prefetching](https://framework.sbesh.com/docs/prefetch): `prefetch` runs a loader and fills its cache ahead of navigation, so the destination route renders immediately when the user arrives.
- [Streaming](https://framework.sbesh.com/docs/streaming): Reach for streaming when the data changes while the user is looking at it: dashboards, log tails, chat token streams, progressive search results.
- [Live Loaders](https://framework.sbesh.com/docs/live-loaders): A live loader is a streaming loader that connects once and survives intra-scope navigation.
- [Realtime Channels](https://framework.sbesh.com/docs/realtime): Realtime channels let you push live data from the server to the client without polling.

## Mutations

- [Server Actions](https://framework.sbesh.com/docs/actions): Pages often need to mutate data: adding a record, toggling a flag, deleting a row.
- [Validation](https://framework.sbesh.com/docs/validation): The framework integrates with the Standard Schema spec so you can validate action payloads, form fields, and loader params using any compliant library: Zod, Valibot, ArkType, or any other implementation.
- [Optimistic UI](https://framework.sbesh.com/docs/optimistic-ui): `useOptimistic` and `useOptimisticAction` let you show the result of a mutation in the UI before the server confirms it, then automatically reconcile when the server responds.

## View Transitions

- [View Transitions](https://framework.sbesh.com/docs/view-transitions): The framework wraps every same-document route change in `document.startViewTransition` automatically.

## Access Control

- [Middleware](https://framework.sbesh.com/docs/middleware): Middleware is how you add auth gates, tracing, timing, and request logging to loaders, actions, and page renders without repeating that logic in each handler.
- [CSRF Protection](https://framework.sbesh.com/docs/csrf): This page is a recipe for CSRF protection.

## Infrastructure

- [CLI](https://framework.sbesh.com/docs/cli): One command gets you from nothing to a running hono-preact app: `create-hono-preact` scaffolds the project, installs dependencies, and initializes a git repo.
- [Vite Config](https://framework.sbesh.com/docs/vite-config): The `hono-preact/vite` subpath exports a `honoPreact()` plugin that configures Vite for the framework's two-pass build and dev server.
- [Project Structure](https://framework.sbesh.com/docs/structure): A hono-preact app is organized around a few key files: a route table, a layout shell, and paired view and server modules.
- [Composing Hono Middleware](https://framework.sbesh.com/docs/hono-middleware): A `hono-preact` server is a Hono app.
- [WebSockets](https://framework.sbesh.com/docs/websockets): hono-preact ships two WebSocket layers.
- [Rooms & Presence](https://framework.sbesh.com/docs/rooms): Rooms give you multi-connection fan-out over WebSockets with a built-in presence roster.
- [renderPage](https://framework.sbesh.com/docs/render-page): Use `renderPage` in your server's catch-all handler to SSR your app.
- [Link Prefetch](https://framework.sbesh.com/docs/link-prefetch): Link prefetch makes navigation feel instant by fetching destinations before the user clicks.
- [Build & Deploy](https://framework.sbesh.com/docs/deployment): hono-preact ships a build pipeline for each target runtime.

## Getting started

- [Overview](https://framework.sbesh.com/docs/components): hono-preact ships a set of headless, accessible UI primitives that lean on the platform: the native `<dialog>` element and top layer, a battle-tested positioning library, and a thin ARIA, keyboard, and collection layer on top.

## Overlays

- [Dialog](https://framework.sbesh.com/docs/components/dialog): An accessible modal dialog built on the native `<dialog>` element.
- [Popover](https://framework.sbesh.com/docs/components/popover): A non-modal, anchored overlay for interactive content: menus of actions, small forms, or detail panels.
- [Tooltip](https://framework.sbesh.com/docs/components/tooltip): A small label that appears on hover or keyboard focus.
- [Menu](https://framework.sbesh.com/docs/components/menu): A button-triggered dropdown of commands: a list of actions, toggles, and single-select choices that opens from a trigger and closes when you pick something or dismiss it.
- [Context Menu](https://framework.sbesh.com/docs/components/context-menu): A menu opened by a right-click (the `contextmenu` event) on a region rather than by a button.
- [Select](https://framework.sbesh.com/docs/components/select): A custom listbox select: a button that opens a popup of options and writes the chosen value back.
- [Combobox](https://framework.sbesh.com/docs/components/combobox): An editable text input combined with a popup listbox.
- [Toast](https://framework.sbesh.com/docs/components/toast): Imperative, accessible toast notifications.

## Foundations

- [renderElement](https://framework.sbesh.com/docs/components/render-element): `renderElement` is the composition engine behind every component's `render` prop.
- [useControllableState](https://framework.sbesh.com/docs/components/use-controllable-state): `useControllableState` lets a single component support both controlled and uncontrolled use from one hook.
- [mergeRefs](https://framework.sbesh.com/docs/components/merge-refs): `mergeRefs` combines several refs into one callback ref.
- [useListNavigation](https://framework.sbesh.com/docs/components/use-list-navigation): `useListNavigation` is the keyboard navigation binding the Menu and Select components use.
- [useTypeahead](https://framework.sbesh.com/docs/components/use-typeahead): `useTypeahead` is the type-to-select hook useListNavigation uses internally, exported for composing your own keyboard navigation.
- [useListboxSelection](https://framework.sbesh.com/docs/components/use-listbox-selection): `useListboxSelection` is the selection core shared by Select and Combobox.
- [usePosition](https://framework.sbesh.com/docs/components/use-position): Hook to keep a floating element anchored to a reference element, with preferred side and alignment, automatic repositioning on scroll and resize, and optional arrow offset data.
- [usePositioner](https://framework.sbesh.com/docs/components/use-positioner): `usePositioner` is the complete anchored-overlay positioning hook the library's own Popover, Tooltip, Menu, Select, and Combobox parts are built on.
- [useDismiss](https://framework.sbesh.com/docs/components/use-dismiss): `useDismiss` registers an open overlay with a shared dismissal stack.
- [useFocusReturn](https://framework.sbesh.com/docs/components/use-focus-return): `useFocusReturn` is the focus management Popover uses.
- [useSafeArea](https://framework.sbesh.com/docs/components/use-safe-area): `useSafeArea` keeps a hover-opened floating element open while the pointer travels the empty gap toward it.
- [usePresence](https://framework.sbesh.com/docs/components/use-presence): `usePresence` keeps an element mounted while it animates out, then unmounts it.

## Full corpus

- [Complete documentation](https://framework.sbesh.com/llms-full.txt): every page above concatenated as one file