# Markless

> Community docs for Markless, the UI framework with no hydration. Learn the model, build an app, and contribute.

## Docs

- [Markless](https://markless.dev/): Write plain components. The compiler plans every update before your app runs, and the same component renders in the browser, on a server, or in tests.

## Start here

- [What is Markless?](https://markless.dev/start/what-is-markless): The mental model. The compiler plans every update before your app runs, your component runs once, and the same component renders in many places.
- [Use Markless without a server](https://markless.dev/start/browser-only): Run a Markless component in a plain Vite app with five small files, two packages, and no server.
- [Quick start](https://markless.dev/start/quick-start): Create a multi-page Markless app with npm create markless, start it, and click the starter counter.
- [Your first component](https://markless.dev/start/your-first-component): Build a small grocery list in four steps, from plain markup to state, a list, and an input.
- [Project tour](https://markless.dev/start/project-tour): What each file in a new Markless starter app does, from the real create-markless output.

## Writing components

- [Why your component runs once](https://markless.dev/components/tsrx-syntax): How a .tsrx component is built, which lines are TypeScript and which are markup, and why the body runs only once.
- [Markup and expressions](https://markless.dev/components/markup-and-expressions): How text, attributes, and expressions in .tsrx markup turn into updates that the compiler plans ahead.
- [Control flow](https://markless.dev/components/control-flow): How @if, @switch, and keyed @for add, remove, and move real elements on the page.
- [Props and children](https://markless.dev/components/props-and-children): How a prop stays current while the child runs once, how a callback prop talks back, and where children go.
- [Scoped styles](https://markless.dev/components/styles): How a <style> block in a .tsrx file becomes CSS that matches only the elements of that file.

## State and events

- [State](https://markless.dev/state/state): Declare a value with state(), then read and write it like a plain variable.
- [Computed](https://markless.dev/state/computed): Derive a read-only value from state with computed(), and read it like a variable.
- [Shared state](https://markless.dev/state/shared): Share one piece of state between components with shared().
- [Events](https://markless.dev/state/events): Run code on clicks, typing, and other browser events with onClick and the other on-props.
- [Elements](https://markless.dev/state/elements): Reach a real page element with element() handles, link elements without ids, and run setup code with attach.
- [Async values](https://markless.dev/state/async): Load data with an async computed, and show it with @try, @pending, and @catch.
- [Storage](https://markless.dev/state/storage): Keep a string value across page reloads with storage(), saved in localStorage.

## Build an app

- [Files are your routes](https://markless.dev/apps/routing): How files in pages/ become the URLs of a Markless app.
- [Links the build can check](https://markless.dev/apps/pages-and-links): Link between pages with Link, check route patterns at build time, and control early loading.
- [Data that arrives in the same response](https://markless.dev/apps/data-loading): Load page data with an async computed value inside @try, and the server sends it in the same response.
- [API routes and middleware](https://markless.dev/apps/api-routes): Answer HTTP requests with files in api/, and run code on each request with files in middleware/.
- [Build once, deploy to many hosts](https://markless.dev/apps/building-and-deploying): Build your app into one folder, then pick where it runs with a Nitro preset.
- [Configuration](https://markless.dev/apps/configuration): The options for markless() and router() in vite.config.ts, and where Nitro configuration goes.

## UI components

- [Behavior without the look](https://markless.dev/ui/overview): @markless/ui gives you menus, dialogs and pickers that already handle keyboard, focus and screen readers, and leaves the look to you.
- [Add a component to your app](https://markless.dev/ui/using-components): Install @markless/ui, add its ui() plugin to vite.config.ts, and write a family's parts as tags.
- [Give the parts a look](https://markless.dev/ui/styling-components): Style @markless/ui parts with a class and their ui-* attributes, and beat the few built-in defaults with one plain CSS rule.
- [All 46 families](https://markless.dev/ui/component-list): Every @markless/ui family, its own import path, and what it is for.

## Tooling

- [Make your editor read .tsrx files](https://markless.dev/tooling/editor-setup): An editor extension colors TSRX, and a TypeScript plugin named in tsconfig.json adds Markless completions, hints, and errors.
- [How TypeScript checks a .tsrx file](https://markless.dev/tooling/type-checking): TypeScript checks a TSX copy of each .tsrx file, and every error points back to the line you wrote.
- [Test a component in a real browser](https://markless.dev/tooling/testing): Use @markless/vitest-browser to mount a component in the browser with render(), or render it on a server with renderSSR() and click the HTML.
- [Read a Markless error in four lines](https://markless.dev/tooling/diagnostics): Each Markless error names a code, says why, suggests a fix, and links to a page. A markless-allow comment silences one warning.

## Under the hood

- [Why Markless, technically](https://markless.dev/how-it-works/design-choices): The technical choices behind Markless on one page, with a mechanism comparison against React, Solid, Svelte, and Qwik.
- [Plan at compile time, render anywhere](https://markless.dev/how-it-works/the-big-idea): The Markless compiler decides state, updates, and event code before anything runs, and the same compiled component renders in the browser, on a server, at build time, or in tests.
- [What the compiler makes from your component](https://markless.dev/how-it-works/the-compiler): The Markless compiler runs a chain of 15 passes that turn Counter.tsrx into render modules, state and view records, and one symbol per handler and text update.
- [What the server sends](https://markless.dev/how-it-works/the-payload): When a server renders the page, Markless sends HTML plus a state record, a view record, and a small inline resumer, all inside one container div.
- [How the first interaction wakes the app](https://markless.dev/how-it-works/resuming): In every environment, one delegated listener per event name waits on the container, and the first matching event loads the code for that event and nothing else.
- [Why one write touches one text node](https://markless.dev/how-it-works/the-state-graph): Each state and computed is a node in a graph, each text or attribute that reads it is a subscription, and a write runs only the subscriptions on its path.
- [When code downloads, and when it runs](https://markless.dev/how-it-works/lazy-chunks): The compiler splits handlers and updates into symbols, production builds pack them into a few preloaded chunks, and each symbol runs only when its trigger fires.
- [The same counter on a phone](https://markless.dev/how-it-works/native-targets): Two hand-written proofs drive a counter on iOS UIKit and macOS AppKit through JavaScriptCore, from a graph-shaped artifact instead of the DOM.

## Contributing

- [A tour of the Markless repo](https://markless.dev/contributing/repo-tour): Where each Markless package lives and its role in the pipeline, from the compiler at build time to rendering in any environment.
- [Set up the repo on your machine](https://markless.dev/contributing/dev-setup): Clone Markless, install it with pnpm on Node 24, and learn the root scripts you run every day.
- [Your first pull request](https://markless.dev/contributing/your-first-pr): The path from a branch to a merged Markless change, with the checks you run before you push.
- [CI and the checks you run at home](https://markless.dev/contributing/ci-and-checks): What each Markless CI job runs, how pnpm ci:local runs the same commands on your machine, and the rules that keep CI honest.
- [Specs, rules and skills](https://markless.dev/contributing/specs-and-rules): Where Markless keeps its behavior contract and its contributor rules, how .ruler generates the agent files, and the comment policy.
- [Improve these docs](https://markless.dev/contributing/improve-these-docs): How to fix or add a page on this docs site, from the facts rule and the claim ledgers to the prose lints and the figure kit.

## Reference

- [Every Markless package](https://markless.dev/reference/packages): Each Markless package, its npm name, what it does, and whether you can install it from npm today.
- [Glossary](https://markless.dev/reference/glossary): One-line definitions for the words these docs use, one meaning per word.
- [CLI](https://markless.dev/reference/cli): The create-markless flags, the four starters, the agents subcommand, and the scripts a new app gets.

## Errors

- [Error codes](https://markless.dev/errors): Every MARKLESS_ code that Markless can print, grouped by the package that raises it.

## Agent skills

- [markless](https://markless.dev/.well-known/agent-skills/markless/SKILL.md): Read the Markless docs instead of answering from memory. Community docs for Markless, the UI framework with no hydration. Learn the model, build an app, and contribute. Use when a task involves Markless: how it works, how to set it up or configure it, or its API.

## Agent resources

- [llms-full.txt](https://markless.dev/llms-full.txt): The full Markdown of every page in one file.
- [Page Markdown](https://markless.dev/index.md): Append `.md` to any page URL to fetch that page as raw Markdown.
- [JSON API](https://markless.dev/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://markless.dev/openapi.json.
- [Agent skills](https://markless.dev/.well-known/agent-skills/index.json): Agent Skills discovery index of the skills this site publishes.
- [API catalog](https://markless.dev/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here.
- [AI catalog](https://markless.dev/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs).
- [agent-readability.json](https://markless.dev/agent-readability.json): Manifest of every agent-facing artifact on this site.
- [Sitemap](https://markless.dev/sitemap.xml): Every indexable page URL with its last-modified date.