# zerolith

> A full frontend framework with clear patterns for you and your agent: fine-grained signals, HTML templates that need no compiler, typed routing, forms, server rendering, i18n, and tooling that works wherever the app is served.

Every page below is Markdown. The [home page](/index.md) summarizes the framework, the tutorial builds an app step by step, the guides teach one pattern per concept, the reference lists every export, and every diagnostic code has its own page.

## Tutorial

- [Build a packing list](/learn.md): The zerolith tutorial: start a project, then build a packing list page one idea at a time, from signals and lists to storage, styles, tests, and a deployed build.
- [Add a page](/learn/page.md): Write a component, give it a route, and link to it from the navigation.
- [State and lists](/learn/state.md): Hold the items in a signal, render one row per item with each, and learn the one rule that keeps a page live.
- [Events and updates](/learn/events.md): Listen to clicks and form submits with @ bindings, and change state by setting a new array.
- [Components](/learn/components.md): Split the page into a row and a form, pass props, and see why a component runs once.
- [Derived state and conditions](/learn/derived.md): Count what is packed, filter the rows, and show a note when the filter leaves nothing.
- [Saving with effects](/learn/effects.md): Load the list from the browser's storage and save every change with an effect.
- [Styles](/learn/styles.md): Give a component its own styles with the css tag, scoped so they never leak into the rest of the page.
- [Testing](/learn/testing.md): Write a browser test that mounts the page, clicks through it, and checks it for accessibility defects.
- [Build and ship](/learn/ship.md): Build the packing list for production, check the build locally, and put it on a host.

## Guide

- [Introduction](/guide.md): What zerolith is, how its packages fit together, how to start a project, the one rule to learn first, and a map of the guides.
- [Application structure](/guide/structure.md): The layout a zerolith application uses, what each file owns, the conventions the tooling relies on, and the AGENTS.md that lets a coding agent work in it.
- [Signals](/guide/signals.md): The reactive graph: signals for state, computed values, effects, untracked reads, batching, ownership, and async values with resource.
- [Templates](/guide/templates.md): How html templates render and update, components, the five binding forms, keyed lists, conditions, JSX, raw markup, and what the renderer refuses.
- [Styles](/guide/styles.md): Scoped component styles, in a css literal or a stylesheet file imported with ?scoped, built on constructable stylesheets and the @scope rule, with no shadow DOM.
- [Routing](/guide/routing.md): The typed route table, plain anchors, loaders, head metadata, and the outlet.
- [Forms](/guide/forms.md): Native forms submitted with fetch, with pending state, RFC 9457 field errors, and validation written once for the browser and the server.
- [Typed client](/guide/client.md): Generate a route table and types from an OpenAPI document, call operations with checked inputs, and read failures as problems, against any backend.
- [Server rendering](/guide/server-rendering.md): Rendering views to HTML with no DOM, with the same escaping and URL rules as the browser, hydrating them in place, and serving a routed application.
- [Custom elements](/guide/elements.md): Mount a zerolith view inside a page or a tree another framework owns, through a custom element whose attributes and properties are signals.
- [Internationalization](/guide/i18n.md): Locale negotiation and state on Intl with nothing shipped, formatters that follow the locale signal, and MessageFormat 2 catalogs compiled into one module per locale.
- [Accessibility](/guide/accessibility.md): The primitives every component library rebuilds, as functions over the DOM: focus trap, roving tabindex, live announcer, focus origin, visually hidden text, and media query signals.
- [Command line](/guide/command-line.md): The Rust command line: a dev server that resolves packages itself, production builds bundled with Rolldown, a preview server, import maps with integrity hashes, and project checks.
- [Building and serving](/guide/deploying.md): What zerolith build writes and how to serve it: static hosts, web servers, a backend's own static files, a path under a domain, caching, and a backend next to the dev server.
- [Vite](/guide/vite.md): For projects that use Vite: the plugin brings zerolith's build passes into Vite and adds hot module replacement that swaps components in place and keeps named signal state.
- [Testing](/guide/testing.md): Mount views with automatic cleanup, settle async work, check that a component hydrates its own server markup, and catch the accessibility defects a test can see.
- [Dev tools](/guide/dev-tools.md): The in-page inspector, the development hook it reads, named signals, and Performance panel tracks, all independent of how the app is served.
- [Diagnostics](/guide/diagnostics.md): The one record every error and warning uses, stable codes, documentation URLs, listeners, and production builds.
- [Observability](/guide/observability.md): Spans for navigations, hydration, and requests through the OpenTelemetry API, with the tracer and the SDK left to the application.
- [Coding agents](/guide/agents.md): Set up a coding agent for a zerolith app: the project's AGENTS.md and the zerolith skill, and what the docs and diagnostics give it besides.

## Reference

- [zerolith](/reference/zerolith.md): API reference for zerolith: 50 exports, generated from the source.
- [zerolith/ssr](/reference/zerolith-ssr.md): API reference for zerolith/ssr: 4 exports, generated from the source.
- [zerolith/element](/reference/zerolith-element.md): API reference for zerolith/element: 3 exports, generated from the source.
- [zerolith/internal](/reference/zerolith-internal.md): API reference for zerolith/internal: 14 exports, generated from the source.
- [zerolith/jsx-runtime](/reference/zerolith-jsx-runtime.md): API reference for zerolith/jsx-runtime: 6 exports, generated from the source.
- [@zerolith/router](/reference/zerolith-router.md): API reference for @zerolith/router: 20 exports, generated from the source.
- [@zerolith/router/server](/reference/zerolith-router-server.md): API reference for @zerolith/router/server: 2 exports, generated from the source.
- [@zerolith/devtools](/reference/zerolith-devtools.md): API reference for @zerolith/devtools: 4 exports, generated from the source.
- [@zerolith/vite](/reference/zerolith-vite.md): API reference for @zerolith/vite: 27 exports, generated from the source.
- [@zerolith/vite/runtime](/reference/zerolith-vite-runtime.md): API reference for @zerolith/vite/runtime: 6 exports, generated from the source.
- [@zerolith/forms](/reference/zerolith-forms.md): API reference for @zerolith/forms: 18 exports, generated from the source.
- [@zerolith/client](/reference/zerolith-client.md): API reference for @zerolith/client: 12 exports, generated from the source.
- [@zerolith/client/generate](/reference/zerolith-client-generate.md): API reference for @zerolith/client/generate: 10 exports, generated from the source.
- [@zerolith/client/port](/reference/zerolith-client-port.md): API reference for @zerolith/client/port: 5 exports, generated from the source.
- [@zerolith/test](/reference/zerolith-test.md): API reference for @zerolith/test: 9 exports, generated from the source.
- [@zerolith/a11y](/reference/zerolith-a11y.md): API reference for @zerolith/a11y: 15 exports, generated from the source.
- [@zerolith/i18n](/reference/zerolith-i18n.md): API reference for @zerolith/i18n: 10 exports, generated from the source.
- [@zerolith/i18n/compile](/reference/zerolith-i18n-compile.md): API reference for @zerolith/i18n/compile: 6 exports, generated from the source.
- [@zerolith/otel](/reference/zerolith-otel.md): API reference for @zerolith/otel: 4 exports, generated from the source.

## Diagnostics

- [Diagnostics](/e.md): Every diagnostic code zerolith can emit, with its cause and fix.
- [binding_in_comment](/e/binding_in_comment.md): An expression appears inside an HTML comment.
- [binding_in_raw_text](/e/binding_in_raw_text.md): An expression appears inside an element whose content is raw text.
- [binding_in_tag_position](/e/binding_in_tag_position.md): An expression appears where a tag or attribute name is expected.
- [binding_not_single](/e/binding_not_single.md): A boolean attribute, property, or event binding has more than one expression or extra text.
- [button_without_name](/e/button_without_name.md): A <button> has no content and no aria-label, so it has no accessible name.
- [computed_cycle](/e/computed_cycle.md): A computed value read itself, directly or through other computed values.
- [css_value_not_allowed](/e/css_value_not_allowed.md): A css literal received a value that is not a number or another css result.
- [each_items_function](/e/each_items_function.md): each() received a function as its items. It reads a signal or an array, so a function would render no rows.
- [each_key_duplicate](/e/each_key_duplicate.md): Two items in an each() list produced the same key.
- [each_key_undefined](/e/each_key_undefined.md): The key function passed to each() returned undefined for an item.
- [effect_cycle](/e/effect_cycle.md): An effect was triggered synchronously while it was already running.
- [effect_loop](/e/effect_loop.md): Effects kept re-triggering each other for more than 100 rounds in one batch.
- [event_handler_not_function](/e/event_handler_not_function.md): An @event binding received something other than a function or an object with handleEvent.
- [frame_without_title](/e/frame_without_title.md): An <iframe> has no title attribute, so what it embeds is not announced.
- [hydration_mismatch](/e/hydration_mismatch.md): The server-rendered markup did not match the view, and the differing part was rendered again on the client.
- [image_without_alt](/e/image_without_alt.md): An <img> in a template has no alt attribute, so assistive technology has nothing to read for it.
- [jsx_not_lowered](/e/jsx_not_lowered.md): A JSX expression reached the runtime, which means the lowering in @zerolith/vite did not run for this file.
- [lazy_module_not_split](/e/lazy_module_not_split.md): A module meant to load as a chunk of its own, a view declared with lazy() from @zerolith/router or a locale of a message index compiled by zerolith-i18n, is also imported statically, so the bundler put it in the importing chunk.
- [mount_component_uncalled](/e/mount_component_uncalled.md): render(), hydrate(), or renderToString() received a component that takes props, passed instead of called, so it would run without them.
- [mount_target_missing](/e/mount_target_missing.md): render or hydrate received a selector that matches no element in the document.
- [on_dispose_outside_scope](/e/on_dispose_outside_scope.md): onDispose() was called with no enclosing effect or scope to attach to.
- [package_version_mismatch](/e/package_version_mismatch.md): A package released together with zerolith, such as @zerolith/vite, @zerolith/devtools, or the command line, met a zerolith of another version. They share the zerolith/internal entry, which can change with every version, so each requires the zerolith of its own version.
- [ref_not_assignable](/e/ref_not_assignable.md): A ref binding received something other than a writable signal or a function.
- [script_in_template](/e/script_in_template.md): A template contains a script element.
- [signal_written_inside_computed](/e/signal_written_inside_computed.md): A signal was written while a computed value was being evaluated.
- [template_frozen_read](/e/template_frozen_read.md): A .get() read is bound in a template, so the value was read once when the template was created and never updates; the Vite plugin reports it in development, since the runtime cannot tell a frozen read from a deliberate one.
- [template_not_prepared](/e/template_not_prepared.md): A template reached the runtime that the build's prepare pass never saw, in a bundle built without the scanner.
- [template_unclosed_tag](/e/template_unclosed_tag.md): A template ends inside a tag, attribute, or comment.
- [unrenderable_value](/e/unrenderable_value.md): A value of a type the renderer cannot display was bound as content.
- [unsafe_attribute_binding](/e/unsafe_attribute_binding.md): An attribute binding targets an attribute that runs script or parses HTML.
- [unsafe_property_binding](/e/unsafe_property_binding.md): A property binding targets a property that parses its value as HTML.
- [unsafe_url_blocked](/e/unsafe_url_blocked.md): A URL attribute or property received a value with a scheme that can run script, and the attribute was removed.
- [when_condition_function](/e/when_condition_function.md): when() received a function as its condition. A function is always truthy, so the first branch would always show.

## Agent Skills

- [zerolith](/skills/zerolith/SKILL.md): the rules, the pattern for each concept, the commands, and a checklist for finishing a change, with every guide as a reference; `zerolith new` writes it into every project, and `npx zerolith skill` adds or updates it

## Optional

- [Playground](/playground.md): Edit a zerolith app in the browser, run it with Ctrl+Enter, and share a link to what you made.
- [API manifest](/api.json): every export with its kind, module, and documentation, as JSON