# LAYR

> LAYR (Layout Authoritative Yet Responsive) is a compiled UI language for the web: `.layr` files compile to React components and static CSS, with Design Scale units, deterministic layout adaptation and Export/Extract/Inject. Create a project: `npx @dynshift/layr create my-app`. npm: @dynshift/layr (CLI: layr).

Read the Skill rules before writing LAYR: https://layr.dynshift.com/skills. Every widget and config key: https://layr.dynshift.com/api. Every diagnostic: https://layr.dynshift.com/errors.

## Start

- [What is LAYR](https://layr.dynshift.com/docs/introduction.md): LAYR is a compiled UI language for the web. Layout Authoritative Yet Responsive.
- [Quick start](https://layr.dynshift.com/docs/quick-start.md): Create a LAYR app, run it, and build a static site.

## Language

- [Syntax](https://layr.dynshift.com/docs/syntax.md): Items, modifiers, props, values, units, colours, strings and comments.
- [Objects](https://layr.dynshift.com/docs/objects.md): Widgets, config, slots, ids, presets, per-frame config, conditions and lists.
- [Widgets](https://layr.dynshift.com/docs/widgets.md): Build your own widgets. Params become config keys.

## State and logic

- [State](https://layr.dynshift.com/docs/state.md): var, const, bind, scope, and how long state lives.
- [Functions and events](https://layr.dynshift.com/docs/functions.md): Named actions written as SAPI steps or TypeScript, and how objects run them.

## Core concepts

- [Pages and the app](https://layr.dynshift.com/docs/pages.md): Pages, routes, metadata, data loading, navigation, the App, themes.
- [Layout and adaptation](https://layr.dynshift.com/docs/layout.md): fixed, hug and fill sizing, the layout primitives, and how LAYR adapts when space runs out.
- [Design Scale](https://layr.dynshift.com/docs/design-scale.md): Design in your design tool's pixels; LAYR fits every screen. Frames, ds units, interpolation, fonts and accessibility.
- [Animation](https://layr.dynshift.com/docs/animation.md): Animate interpolates every change to its object, with springs, per-property easing, and enter/exit motion.
- [Effects](https://layr.dynshift.com/docs/effects.md): Frosted glass, progressive blur that dissolves content toward an edge, and blurring an object's own content.
- [Export, Extract, Inject](https://layr.dynshift.com/docs/export-extract-inject.md): Read and change any object's features from anywhere, as reversible, ordered layers the compiler checks.
- [React interop](https://layr.dynshift.com/docs/react.md): Use React packages in LAYR, and LAYR in React apps.

## Ship and extend

- [Addons](https://layr.dynshift.com/docs/addons.md): Use addons, create them, test them, and publish them to npm.
- [Deploy](https://layr.dynshift.com/docs/deploy.md): layr build produces a static site with every route prerendered.
- [CLI](https://layr.dynshift.com/docs/cli.md): Every layr command.
- [Migrating from v1](https://layr.dynshift.com/docs/migrating-from-v1.md): From @dynshift/layr 1.x React components to LAYR v3.
- [Troubleshooting](https://layr.dynshift.com/docs/troubleshooting.md): Common problems and how LAYR tells you about them.
- [AI agents](https://layr.dynshift.com/docs/ai.md): The LAYR Skill, the MCP server and llms.txt, so agents write real LAYR.

## Optional

- [Full documentation](https://layr.dynshift.com/llms-full.txt): every page in one file
- [Addon index](https://layr.dynshift.com/addons.json): official and listed addons