# pracht

> A full-stack Preact framework built on Vite with hybrid rendering (SSG, SSR, ISG, SPA) and a unified data-loading model.

## Docs

- [Adapters](https://pracht.resynapse.dev/docs/adapters): Adapters are thin layers that translate between a platform's native request handling and pracht's Web Request/Response interface. pracht ships adapters for Cloudflare Workers, Vercel Edge Functions, Node.js, and pure static export.
- [Agent Trust](https://pracht.resynapse.dev/docs/agent-trust): Who is calling, may they do this, and what happened? Verified agent identity with Web Bot Auth, a prepare/commit confirmation flow for destructive operations, structured audit events, and `pracht eval` to prove agent flows in CI.
- [The Agentic Web](https://pracht.resynapse.dev/docs/agents): The web has two users now — people, and the agents acting on their behalf. pracht resolves your app into one explicit graph and projects that graph to both: components for humans, typed and trust-gated tools for agents.
- [API Routes](https://pracht.resynapse.dev/docs/api-routes): Standalone server endpoints that live alongside your pages. Export named HTTP method handlers or one default handler, then return `Response` objects directly.
- [API Validation & Typed Fetch](https://pracht.resynapse.dev/docs/api-validation): Validate API inputs once on the server, generate route contracts, and call them from the client with path, method, body, query, params, and response types connected end to end.
- [Capabilities](https://pracht.resynapse.dev/docs/capabilities): Define a typed operation once and pracht projects it everywhere — direct server calls, a generated HTTP endpoint, a WebMCP page tool for in-browser agents, and a tool on your app's own remote MCP endpoint. Explicit, validated, and private by default.
- [CLI](https://pracht.resynapse.dev/docs/cli): The `@pracht/cli` package covers development, production builds, inspection, verification, evaluation, scaffolding, previews, and agent integrations.
- [Coding Agents](https://pracht.resynapse.dev/docs/coding-agents): The other kind of agent — the one writing your app rather than using it. pracht hands coding agents the resolved app graph over MCP, an embedded authoring guide, installable skills, and machine-checkable proof that the change is the change it claims to be.
- [Content Collections](https://pracht.resynapse.dev/docs/content): Use one server-only registry for route/source mapping, locales, source and compiled representations, build iteration, and generated static assets.
- [Data Loading](https://pracht.resynapse.dev/docs/data-loading): pracht provides a unified data model that works across all rendering modes. Loaders fetch data on the server, API routes handle mutations, and client hooks give reactive access to route data — all with full TypeScript inference.
- [A full pracht app, end to end](https://pracht.resynapse.dev/docs/demo-comparison): A walkthrough of Launchpad — a realistic SaaS example that uses every render mode, both shells, auth middleware, and Markdown content negotiation in one codebase.
- [Deployment](https://pracht.resynapse.dev/docs/deployment): pracht apps deploy anywhere via platform adapters. Each adapter handles request conversion, asset serving, and the runtime's supported ISG revalidation strategy.
- [Environment Variables](https://pracht.resynapse.dev/docs/env): Typed, safe-by-default env access. Server secrets stay on the server, client-visible config is opt-in via a naming prefix, and the build fails when a non-public variable is referenced in client code.
- [Examples](https://pracht.resynapse.dev/docs/examples): Eight runnable apps in the repository, each isolating one part of the framework. Every one is a real pracht project you can clone, build, and deploy.
- [Fonts](https://pracht.resynapse.dev/docs/fonts): Self-host fonts with `defineFont()` — typed `@font-face` generation, automatic preload links, deduped head output, and layout-shift-free fallbacks. No files are fetched at build time.
- [Getting Started](https://pracht.resynapse.dev/docs/getting-started): Get a pracht app running in under a minute. This guide covers project creation, development, and your first production build.
- [Images](https://pracht.resynapse.dev/docs/images): Use `@pracht/image` for responsive image markup, reserved layout space, and deployment-specific optimization loaders.
- [Islands](https://pracht.resynapse.dev/docs/islands): Islands let mostly static routes hydrate only the components that need browser interactivity. The rest of the document stays server-rendered HTML with little or no JavaScript.
- [Middleware](https://pracht.resynapse.dev/docs/middleware): Server-side request interceptors that run before loaders and API routes. Use them for authentication, redirects, request validation, and context enrichment.
- [Migrating from Next.js](https://pracht.resynapse.dev/docs/migrate/nextjs): A practical guide to moving your Next.js App Router project to pracht. Covers routing, data loading, rendering modes, middleware, layouts, and API routes — with side-by-side code examples.
- [OpenAPI](https://pracht.resynapse.dev/docs/openapi): Generate an OpenAPI 3.1 document and optional Scalar or Swagger UI from Pracht API routes without changing ordinary route authoring.
- [Performance](https://pracht.resynapse.dev/docs/performance): What pracht costs a page, how those numbers are measured, and the automatic code splitting, module preloading, and vendor chunk extraction you get without configuring anything.
- [Prefetching](https://pracht.resynapse.dev/docs/prefetching): pracht prefetches route data before navigation so page transitions feel instant. Prefetching is automatic by default and can be configured per route.
- [Authentication](https://pracht.resynapse.dev/docs/recipes/auth): Session-based auth with @pracht/session — encrypted cookies, middleware gates, login/logout API routes, and password hashing that works on every adapter.
- [Content Security Policy](https://pracht.resynapse.dev/docs/recipes/csp): Add a focused Content Security Policy with route or shell headers, then verify it against dynamic and prerendered pages.
- [Forms & Validation](https://pracht.resynapse.dev/docs/recipes/forms): Handle form submissions with progressive enhancement using pracht's `<Form>` component and API routes. Forms work without JavaScript and upgrade to fetch-based submissions when JS is available.
- [Full-Stack Cloudflare](https://pracht.resynapse.dev/docs/recipes/fullstack-cloudflare): Build a full-stack app on Cloudflare with D1 (SQLite), KV, and R2. This recipe covers project setup, database migrations, and wiring bindings into your loaders and API routes.
- [Full-Stack Vercel](https://pracht.resynapse.dev/docs/recipes/fullstack-vercel): Build a full-stack app on Vercel with Vercel Postgres (Neon), KV (Upstash Redis), and Blob storage. This recipe covers project setup, database provisioning, and accessing services from loaders and API routes.
- [Internationalization (i18n)](https://pracht.resynapse.dev/docs/recipes/i18n): Serve your app in multiple languages with @pracht/i18n — middleware detects the locale, loaders return translations, and components consume them via route data.
- [Logging & Observability](https://pracht.resynapse.dev/docs/recipes/logging): Capture request duration, status, and failures from loaders and API routes with one wrap-around middleware — no per-handler instrumentation.
- [Server-Sent Events & WebSockets](https://pracht.resynapse.dev/docs/recipes/streaming): Push live updates to the browser with first-party Server-Sent Events helpers — createEventStream on the server, useEventSource in components — and wire WebSockets per adapter.
- [Testing](https://pracht.resynapse.dev/docs/recipes/testing): Test your pracht app at every level — unit test loaders, API routes, middleware, and form submissions with Vitest and `@pracht/test`, run full E2E tests with Playwright to verify rendering, navigation, and hydration, and prove your agent surfaces with capability tests and `pracht eval`.
- [View Transitions](https://pracht.resynapse.dev/docs/recipes/view-transitions): Animate client-side route changes with the browser View Transitions API while keeping pracht's data loading, scroll restoration, and fallback behavior intact.
- [API Reference](https://pracht.resynapse.dev/docs/reference/api): Every export an application uses, grouped by what it does, with the guide that explains it. Look a symbol up here when you know the name but not the page.
- [Configuration Reference](https://pracht.resynapse.dev/docs/reference/config): Every option accepted by the `pracht()` Vite plugin and by `defineApp()`, with its default and a pointer to the guide that explains it.
- [i18n Reference](https://pracht.resynapse.dev/docs/reference/i18n): The full API of `@pracht/i18n` — locale detection, typed lazy dictionaries, translation helpers, locale-prefixed paths, and hreflang. For a walkthrough, start with the i18n recipe.
- [Rendering Modes](https://pracht.resynapse.dev/docs/rendering): pracht supports four rendering modes configured per route. Each route declares how and when its HTML is generated — giving you the right performance and freshness trade-off for every page in one app.
- [Routing](https://pracht.resynapse.dev/docs/routing): pracht uses a hybrid routing model: route modules live as files by convention, but their wiring — shells, middleware, render modes, and URL patterns — is declared explicitly in a single `src/routes.ts` manifest.
- [Shells](https://pracht.resynapse.dev/docs/shells): Layout wrappers that surround route content. Shells are decoupled from URL structure — a flat route like `/settings` can share a shell with `/dashboard` without nesting.
- [Standalone Capabilities](https://pracht.resynapse.dev/docs/standalone-capabilities): Mount Pracht's validated capability pipeline in an existing Web-standard server without adopting the Pracht router, Vite plugin, or Preact.
- [Styling](https://pracht.resynapse.dev/docs/styling): Pracht optimizes style loading for CSS that exists at build time. Prefer CSS Modules, Tailwind, or plain stylesheets over runtime CSS-in-JS — especially on server-rendered routes.
- [Why Pracht?](https://pracht.resynapse.dev/docs/why-pracht): How pracht compares to other full-stack frameworks — and when it's the right fit.