Documentation

DocumentationEverything LAYR does, in reading order. Start with the quick start, or run code right away in the playground.
npx @dynshift/layr create my-app
Try it in the browser
Start
What is LAYR
LAYR is a compiled UI language for the web. Layout Authoritative Yet Responsive.
Quick start
Create a LAYR app, run it, and build a static site.
Language
Syntax
Items, modifiers, props, values, units, colours, strings and comments.
Objects
Widgets, config, slots, ids, presets, per-frame config, conditions and lists.
Widgets
Build your own widgets. Params become config keys.
State and logic
State
var, const, bind, scope, and how long state lives.
Functions and events
Named actions written as SAPI steps or TypeScript, and how objects run them.
Core concepts
Pages and the app
Pages, routes, metadata, data loading, navigation, the App, themes.
Layout and adaptation
fixed, hug and fill sizing, the layout primitives, and how LAYR adapts when space runs out.
Design Scale
Design in your design tool's pixels; LAYR fits every screen. Frames, ds units, interpolation, fonts and accessibility.
Animation
Animate interpolates every change to its object, with springs, per-property easing, and enter/exit motion.
Effects
Frosted glass, progressive blur that dissolves content toward an edge, and blurring an object's own content.
EIED
EIED: name, change, read and copy any object's features from anywhere, as reversible, ordered layers the compiler checks.
React interop
Use React packages in LAYR, and LAYR in React apps.
Ship and extend
Addons
Use addons, create them, test them, and publish them to npm.
Deploy
layr build produces a static site with every route prerendered.
CLI
Every layr command.
Migrating from v1
From @dynshift/layr 1.x React components to LAYR v3.
Troubleshooting
Common problems and how LAYR tells you about them.
AI agents
The LAYR Skill, the MCP server and llms.txt, so coding agents write real LAYR.
Reference
Widgets and keys
Every core widget, its config keys, types, defaults and aliases, generated from the schema.
Diagnostics
Every L-code the compiler and runtime report, with the fix.
CLI commands
Every layr command and its flags.
AI agents
The LAYR Skill, the MCP server and llms.txt, so coding agents write real LAYR.

Privacy
Cookies
Terms
Contact & grievances