# OTF Web

> Documentation, API reference, and blog content for the OTF Web framework.

This file is a curated entry point for language models. For full page content, see [llms-full.txt](https://web.opentechf.org/llms-full.txt).

## Start Here

- [Home](https://web.opentechf.org/)

## Documentation

- [Introduction](https://web.opentechf.org/docs): OTF Web is a native-first, zero-VDOM framework that compiles JSX to standard Web Components driven by fine-grained signals.
- [Configuration](https://web.opentechf.org/docs/configuration): Configure an OTF Web project with otfw.config.js — site URL, docs, API, and blog sections.
- [Assets & Workers](https://web.opentechf.org/docs/core-concepts/assets): Reference bundled files — web workers, WebAssembly, images — with new URL(…, import.meta.url).
- [Components](https://web.opentechf.org/docs/core-concepts/components): Every component compiles to a standard Custom Element. Props are reactive and children are slotted.
- [Context](https://web.opentechf.org/docs/core-concepts/context): Scoped dependency injection with createContext, ContextProvider, and $context — share values down the tree without prop drilling.
- [Error boundaries](https://web.opentechf.org/docs/core-concepts/error-boundary): Contain render and mount failures in a subtree with <ErrorBoundary> — show a fallback, retry with reset(), and keep siblings running.
- [Imperative API](https://web.opentechf.org/docs/core-concepts/imperative-api): Let a parent call into a child with $expose — publish methods on the component instance, then reach them through a $ref.
- [JSX](https://web.opentechf.org/docs/core-concepts/jsx): Every JSX pattern the OTF Web compiler supports — elements, attributes, events, conditionals, lists, fragments, and the pitfalls to avoid.
- [Lifecycle](https://web.opentechf.org/docs/core-concepts/lifecycle): Run code on mount and unmount, and react to resize, viewport visibility, and media queries — with automatic cleanup.
- [Portal](https://web.opentechf.org/docs/core-concepts/portal): Render a subtree into another DOM target with <Portal> — escape overflow, z-index, and transform traps.
- [Reactivity](https://web.opentechf.org/docs/core-concepts/reactivity): Signal-based state with $state, $derived, and $effect — no .value boilerplate.
- [Styling](https://web.opentechf.org/docs/core-concepts/styling): Global CSS, CSS Modules, inline style objects, and dynamic classes.
- [Templating](https://web.opentechf.org/docs/core-concepts/templating): Conditionals, init-once vs reactive holes, lists, and element refs inside JSX.
- [Data Fetching](https://web.opentechf.org/docs/data-fetching): Route loaders — server data for pages via loader.js and router.data — and the client-side resource() primitive.
- [Deployment](https://web.opentechf.org/docs/deployment): Ship your OTF Web app — static output to any host, or a server for SSR and API routes.
- [Production Build](https://web.opentechf.org/docs/deployment/build): Compile and bundle your app to dist/ with otfw build.
- [Fetch handler](https://web.opentechf.org/docs/deployment/fetch-handler): Deploy full-stack OTF Web apps to any Fetch-native runtime — static assets plus middleware and API routes, with platform bindings via context.env.
- [Hydration](https://web.opentechf.org/docs/deployment/hydration): How OTF Web adopts server-rendered HTML on first paint — SSG and SSR wire reactivity onto existing DOM without a virtual tree.
- [Server](https://web.opentechf.org/docs/deployment/server): Deploy per-request SSR, middleware, route loaders, and API routes with otfw serve or a runtime adapter.
- [Static Generation](https://web.opentechf.org/docs/deployment/static-generation): Pre-render every route to static HTML with otfw build --ssg.
- [Installation](https://web.opentechf.org/docs/getting-started/installation): Scaffold a new OTF Web project and start the dev server.
- [Library Template](https://web.opentechf.org/docs/getting-started/library-template): Scaffold a publishable OTF Web component package with tests.
- [Project Structure](https://web.opentechf.org/docs/getting-started/project-structure): How an OTF Web project is laid out and which files have special meaning.
- [web-docs](https://web.opentechf.org/docs/packages/web-docs): A documentation-site generator for OTF Web — themed shell, build-time nav, and MDX content.
- [Blog](https://web.opentechf.org/docs/packages/web-docs/blog): Add a blog to your site with @opentf/web-docs — a generated post list plus banner, meta, reading-time, and TOC components.
- [Components](https://web.opentechf.org/docs/packages/web-docs/components): Content components shipped with web-docs — callouts, steps, tabs, and code blocks.
- [Configuration](https://web.opentechf.org/docs/packages/web-docs/configuration): Site-wide options in otfw.config.js and per-folder ordering with _meta.js.
- [Markdown & MDX](https://web.opentechf.org/docs/packages/web-docs/markdown): Every Markdown and MDX feature OTF Web docs support — formatting, tables, code, and JSX components inline.
- [web-form](https://web.opentechf.org/docs/packages/web-form): A reactive, path-based form engine for OTF Web — signal-bound fields, nested state, and pluggable validation.
- [Nested State](https://web.opentechf.org/docs/packages/web-form/nested-state): Address deeply nested objects and arrays with path strings for fine-grained, efficient updates.
- [Validation](https://web.opentechf.org/docs/packages/web-form/validation): Validate with a plain function or a schema library like Zod, and control when validation runs.
- [web-i18n](https://web.opentechf.org/docs/packages/web-i18n): Internationalization for OTF Web — URL-prefix locale routing, ICU messages, and locale-aware Intl formatters, all reactive.
- [Formatting](https://web.opentechf.org/docs/packages/web-i18n/formatting): Locale-aware number, currency, percent, date, relative-time, and list formatting over the native Intl APIs.
- [Locale Routing](https://web.opentechf.org/docs/packages/web-i18n/routing): URL path-prefix locale routing — prefix_except_default, localized links, per-locale SSG/SSR, and locale detection.
- [web-test](https://web.opentechf.org/docs/packages/web-test): DOM testing for OTF Web — render components, drive interactions, and assert on reactive updates.
- [Queries](https://web.opentechf.org/docs/packages/web-test/queries): Find elements by role, label, text, or test id — and choose the right getBy / queryBy / findBy variant.
- [Setup](https://web.opentechf.org/docs/packages/web-test/setup): Install web-test and wire automatic JSX compilation and cleanup for your test runner.
- [Testing Strategies](https://web.opentechf.org/docs/packages/web-test/strategies): What to test and how — behavior over implementation, async, effects, forms, and route guards.
- [User Events](https://web.opentechf.org/docs/packages/web-test/user-events): Drive realistic interactions — clicks, typing, keyboard, and selection — with userEvent.
- [Writing Tests](https://web.opentechf.org/docs/packages/web-test/writing-tests): The render → query → interact → assert loop, with props, cleanup, and reactive updates.
- [API Routes](https://web.opentechf.org/docs/routing/api-routes): File-based server endpoints under app/api — standard Request/Response handlers, dynamic params, and middleware.
- [Cookies](https://web.opentechf.org/docs/routing/cookies): Read and write cookies in middleware, API routes, and loaders with RFC 6265 helpers from @opentf/web/server.
- [Dynamic Routes](https://web.opentechf.org/docs/routing/dynamic-routes): Match path segments with [param] and [...rest] folders, and read them from router.params.
- [Metadata & SEO](https://web.opentechf.org/docs/routing/metadata): Declare page titles, descriptions, Open Graph tags, and structured data on routes and layouts.
- [Middleware](https://web.opentechf.org/docs/routing/middleware): Server-side _middleware.js for every request — pages, API routes, loader data, and SSR — with context.locals shared downstream.
- [Navigation](https://web.opentechf.org/docs/routing/navigation): Client-side navigation with the Link component and the reactive router API.
- [Pages & Layouts](https://web.opentechf.org/docs/routing/pages-and-layouts): File-based routing with nested layouts and a not-found page.
- [Route Guards](https://web.opentechf.org/docs/routing/route-guards): Protect navigation with a centralized async route guard.
- [Troubleshooting](https://web.opentechf.org/docs/troubleshooting): Common OTF Web pitfalls — init-once JSX, signal mutation, hydration mismatches, compile errors, and the dev overlay.

## API Reference

- [API Reference](https://web.opentechf.org/api): Complete reference for every export across OTF Web — the core runtime, reactive macros, the CLI, and each package.
- [CLI](https://web.opentechf.org/api/cli): The otfw command — dev server, production build, and static generation.
- [Runtime API](https://web.opentechf.org/api/core): Values and components exported from @opentf/web.
- [Reactive Macros](https://web.opentechf.org/api/macros): The compiler-provided globals — $state, $derived, $effect, $ref, $context, $expose — and lifecycle hooks.
- [Server](https://web.opentechf.org/api/server): The @opentf/web/server surface — middleware, cookies, API routes, createFetchHandler, and runtime adapters.
- [web-docs API](https://web.opentechf.org/api/web-docs): The @opentf/web-docs exports — config helper, components, virtual modules, and build plugins.
- [web-form API](https://web.opentechf.org/api/web-form): createForm options, the returned form object, and the register binding.
- [web-i18n API](https://web.opentechf.org/api/web-i18n): createI18n, the reactive t() translator, the fmt formatters, the <T> component, and the locale helpers.
- [web-test API](https://web.opentechf.org/api/web-test): render, queries, userEvent, and cleanup.

## Blog

- [Blog](https://web.opentechf.org/blog)
- [How fine-grained signals work](https://web.opentechf.org/blog/how-signals-work): A look at the reactive graph that updates only the DOM nodes a change touches.
- [Introducing OTF Web](https://web.opentechf.org/blog/introducing-otf-web): Why we built a native-first, zero-VDOM framework that compiles JSX to real DOM.
- [Inside the on-demand dev server](https://web.opentechf.org/blog/on-demand-dev-server): How OTF Web boots in milliseconds by compiling only the route you visit — and how a module graph keeps hot reloads precise.

## Other Routes

- [Benchmarks](https://web.opentechf.org/benchmarks)

## Optional

- [RSS feed](https://web.opentechf.org/blog/rss.xml): Blog feed in RSS 2.0 format.
- [Atom feed](https://web.opentechf.org/blog/atom.xml): Blog feed in Atom 1.0 format.