Weft documentation
An agent-friendly UI description format — strict markup that models read and write, canonical JSON that tools validate and patch.
An agent-friendly UI description format — strict markup that models read and write, canonical JSON that tools validate and patch.
17 pages from pyrlyn/weft/docs at 1ab1443, in development
Paths into the docs
Pick where to go next.
-
Start3 pages
- What is Weft Weft is an open format for describing a screen of a user interface so that an AI agent can read it, write it, check it and change it safely, and so that ordinary tools can check, preview and convert it too.
- A ten-minute tour In this tour you take one real screen, the login form from the corpus/ folder, and work with it from start to finish.
- How it works Weft is a specification plus a set of small programs that all agree on it. This page shows what the programs are, how they depend on each other and what happens to a screen when you use one of them.
-
Tools6 pages
- The weft command weft checks, formats and explains Weft files from a terminal. It is the Rust core as a program: it has no other dependencies, starts instantly and works the same on a laptop and in CI.
- MCP server @weft/mcp is a small server for the Model Context Protocol that gives an AI agent eight tools to read, check, edit and preview Weft screens.
- Claude Code plugin The weft plugin makes Claude Code, including Claude Code Desktop, good at Weft files. It adds four commands you can type, one skill Claude loads on its own, and the MCP server.
- Cursor plugin
- Open Design plugin
- Weft in Xcode
-
Guides5 pages
- Rendering Rendering turns a screen and some data into something you can look at. The reference renderer is @weft/render-react.
- Importing Importing turns something that already exists, a web page or an accessibility snapshot, into a Weft screen, so you can start from the real thing and refine it with the MCP tools instead of writing from nothing.
- Exporting to React Exporting turns a Weft screen into a React component you can drop into an app. The component is plain JavaScript with JSX, in one file, with no dependency on Weft at run time.
- Patches
- Projects
-
Catalogs3 pages
- Catalog and tokens Two things decide what a Weft screen is allowed to say. The catalog is the vocabulary: which elements exist and what each may contain. Design tokens are the values of design: spacing, sizes, colors.
- Publishing a catalog A catalog that more than one project uses is a library: it names a prefix, and every component it adds starts with that prefix. This page shows how to make one, publish it as an npm package and use it from a project.
- Known catalogs Known catalogs that extend the core catalog weft-core, and the prefixes they take. The list is kept by the maintainer of this repository.