polyxd

<img src="brand/mark.svg" alt="" width="56" align="left">

# Polyxd

[![@polyxd/react](https://img.shields.io/npm/v/@polyxd/react?label=%40polyxd%2Freact&color=FF6E40)](https://www.npmjs.com/package/@polyxd/react) [![@polyxd/web](https://img.shields.io/npm/v/@polyxd/web?label=%40polyxd%2Fweb&color=FF6E40)](https://www.npmjs.com/package/@polyxd/web) [![@polyxd/spec](https://img.shields.io/npm/v/@polyxd/spec?label=%40polyxd%2Fspec&color=FF6E40)](https://www.npmjs.com/package/@polyxd/spec) [![@polyxd/verifier](https://img.shields.io/npm/v/@polyxd/verifier?label=%40polyxd%2Fverifier&color=FF6E40)](https://www.npmjs.com/package/@polyxd/verifier) [![polyxd](https://img.shields.io/npm/v/polyxd?label=polyxd&color=FF6E40)](https://www.npmjs.com/package/polyxd) [![npm scope](https://img.shields.io/badge/npm-%40polyxd-141413)](https://www.npmjs.com/org/polyxd) [![Licence](https://img.shields.io/badge/licence-Apache--2.0-141413)](LICENSE)

**An open spec, renderer and verifier for interfaces generated on demand** — rendered natively in your design system, operable by people and agents alike, and checked before anyone sees them.

A request comes in. Something — a model, a backend, a rules engine, a person — writes a **UI document**: a small JSON file of semantic components ("a choice", "a confirmation", "a table") bound to data your app provides. A renderer turns it into your design system's components. A verifier checks it for accessibility, safety and whether an agent can operate it. Then it's used, and thrown away.

```
request ──► generator (any model or program that emits spec-valid JSON)
                      │  UI document: meaning only — no pixels, colours or fonts
                      ▼
              renderer (@polyxd/react, themed by a design-system pack)
                      │
                      ▼
              verifier → score, findings, agent task results
```

**Site and docs:** [polyxd.com](https://polyxd.com) · **Live gallery:** [polyxd.com/gallery](https://polyxd.com/gallery/)

## Packages on npm

All 37 packages are on npm under the [`@polyxd` organisation](https://www.npmjs.com/org/polyxd): the twelve below, the `polyxd` CLI among them, then [thirteen design-system packs](#the-design-systems) and [twelve templates](#the-templates).

| Package | What it is | Version |
|---|---|---|
| [`@polyxd/spec`](https://www.npmjs.com/package/@polyxd/spec) | The spec: components, patterns, the action registry and the JSON Schema | [![@polyxd/spec](https://img.shields.io/npm/v/@polyxd/spec?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/spec) |
| [`@polyxd/react`](https://www.npmjs.com/package/@polyxd/react) | The React renderer | [![@polyxd/react](https://img.shields.io/npm/v/@polyxd/react?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/react) |
| [`@polyxd/web`](https://www.npmjs.com/package/@polyxd/web) | The Web Components renderer (Vue and Svelte adapters in its README) | [![@polyxd/web](https://img.shields.io/npm/v/@polyxd/web?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/web) |
| [`@polyxd/core`](https://www.npmjs.com/package/@polyxd/core) | What both renderers share | [![@polyxd/core](https://img.shields.io/npm/v/@polyxd/core?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/core) |
| [`@polyxd/verifier`](https://www.npmjs.com/package/@polyxd/verifier) | The verifier: schema, patterns, accessibility, contrast and agent tasks | [![@polyxd/verifier](https://img.shields.io/npm/v/@polyxd/verifier?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/verifier) |
| [`polyxd`](https://www.npmjs.com/package/polyxd) | The CLI: `pack`, `check`, `dev`, `studio push` | [![polyxd](https://img.shields.io/npm/v/polyxd?label=&color=FF6E40)](https://www.npmjs.com/package/polyxd) |
| [`@polyxd/runtime`](https://www.npmjs.com/package/@polyxd/runtime) | Generates a document with the model you choose | [![@polyxd/runtime](https://img.shields.io/npm/v/@polyxd/runtime?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/runtime) |
| [`@polyxd/server`](https://www.npmjs.com/package/@polyxd/server) | A generation server around the runtime (also `ghcr.io/visualfart/polyxd-server`) | [![@polyxd/server](https://img.shields.io/npm/v/@polyxd/server?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/server) |
| [`@polyxd/mcp`](https://www.npmjs.com/package/@polyxd/mcp) | An MCP server: the spec, checks and live screens for a host's model | [![@polyxd/mcp](https://img.shields.io/npm/v/@polyxd/mcp?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/mcp) |
| [`@polyxd/a2ui`](https://www.npmjs.com/package/@polyxd/a2ui) | Export to A2UI | [![@polyxd/a2ui](https://img.shields.io/npm/v/@polyxd/a2ui?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/a2ui) |
| [`@polyxd/analytics`](https://www.npmjs.com/package/@polyxd/analytics) | Adapters for the renderers' semantic events | [![@polyxd/analytics](https://img.shields.io/npm/v/@polyxd/analytics?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/analytics) |
| [`@polyxd/ds-kit`](https://www.npmjs.com/package/@polyxd/ds-kit) | Builds design-system packs, including yours with `polyxd pack` | [![@polyxd/ds-kit](https://img.shields.io/npm/v/@polyxd/ds-kit?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/ds-kit) |

## What works today

| | |
|---|---|
| **Spec** | 44 semantic components (five of them the product's shell, authored only), 6 patterns with self-checking rules, capability registry with risk levels, Design Direction for a designer's taste, JSON Schema, A2UI export |
| **Renderers** | `@polyxd/react` on Radix primitives and `@polyxd/web` as Web Components, both on `@polyxd/core`: token-only CSS, container queries, dense B2B tables and navigation, density scale with a touch floor. A conformance suite holds the two to the same DOM, ARIA, text and findings across every document and pack; any renderer can be held to it ([Renderers](https://polyxd.com/docs/renderers/)) |
| **Events** | Both renderers emit semantic analytics events when you pass `onEvent`: shown, actions, checkpoints, completion, abandonment, input errors, statuses, undo. Keys and codes only, never what anyone typed. They go to your analytics (`@polyxd/analytics` has PostHog, Segment, GA4 and fetch adapters); Polyxd receives none of them unless you send them to Studio Insights ([Events](https://polyxd.com/docs/product/#semantic-analytics-events)) |
| **Design systems** | 13 packs on one token contract: Material 3, Carbon, Ant Design, Fluent 2, shadcn/ui, Bootstrap 5, Mantine, Radix Themes, Shopify Polaris, GitHub Primer, Adobe Spectrum 2, GOV.UK Frontend, Chakra UI. Bring your own tokens with `npx polyxd pack` and it builds a pack from them |
| **Verifier** | Schema, structure, pattern, capability and copy checks; axe-core, contrast and target-size audits in every pack, mode and width; scripted agents completing tasks through the accessibility tree alone |

All 24 examples score 100 across **1,248 renders** (13 packs × 2 widths × light and dark), **936 of 936** agent tasks complete by name alone, and the verifier catches **20 of 20** deliberately injected defects.

**There is no bundled model.** Any generator that emits spec-valid JSON drives Polyxd. See [Bring your generator](#bring-your-generator).

### The design systems

| | Design system | Pack | Version |
|---|---|---|---|
| <img src="packages/ds-material3/logo.svg" height="20" alt=""> | Material 3 | [`@polyxd/ds-material3`](packages/ds-material3/) | [![@polyxd/ds-material3](https://img.shields.io/npm/v/@polyxd/ds-material3?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/ds-material3) |
| <img src="packages/ds-carbon/logo.svg" height="20" alt=""> | IBM Carbon | [`@polyxd/ds-carbon`](packages/ds-carbon/) | [![@polyxd/ds-carbon](https://img.shields.io/npm/v/@polyxd/ds-carbon?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/ds-carbon) |
| <img src="packages/ds-antd/logo.svg" height="20" alt=""> | Ant Design | [`@polyxd/ds-antd`](packages/ds-antd/) | [![@polyxd/ds-antd](https://img.shields.io/npm/v/@polyxd/ds-antd?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/ds-antd) |
| <img src="packages/ds-fluent/logo.svg" height="20" alt=""> | Microsoft Fluent 2 | [`@polyxd/ds-fluent`](packages/ds-fluent/) | [![@polyxd/ds-fluent](https://img.shields.io/npm/v/@polyxd/ds-fluent?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/ds-fluent) |
| <img src="packages/ds-shadcn/logo.svg" height="20" alt=""> | shadcn/ui | [`@polyxd/ds-shadcn`](packages/ds-shadcn/) | [![@polyxd/ds-shadcn](https://img.shields.io/npm/v/@polyxd/ds-shadcn?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/ds-shadcn) |
| <picture><source media="(prefers-color-scheme: dark)" srcset="packages/ds-bootstrap/logo-white.svg"><img src="packages/ds-bootstrap/logo.svg" height="20" alt=""></picture> | Bootstrap 5 | [`@polyxd/ds-bootstrap`](packages/ds-bootstrap/) | [![@polyxd/ds-bootstrap](https://img.shields.io/npm/v/@polyxd/ds-bootstrap?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/ds-bootstrap) |
| <img src="packages/ds-mantine/logo.svg" height="20" alt=""> | Mantine 8 | [`@polyxd/ds-mantine`](packages/ds-mantine/) | [![@polyxd/ds-mantine](https://img.shields.io/npm/v/@polyxd/ds-mantine?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/ds-mantine) |
| <picture><source media="(prefers-color-scheme: dark)" srcset="packages/ds-radix/logo-white.svg"><img src="packages/ds-radix/logo.svg" height="20" alt=""></picture> | Radix Themes 3 | [`@polyxd/ds-radix`](packages/ds-radix/) | [![@polyxd/ds-radix](https://img.shields.io/npm/v/@polyxd/ds-radix?label=&color=FF6E40)](https://www.npmjs.com/package/@polyxd/ds-radix) |
| <img src="packages/ds-polaris/logo.svg" height="20" alt=""> | Shopify Polaris | [`@polyxd/ds-polaris`](packages/ds-polaris/) | [![@polyxd/ds-polaris](https://img.shields.io/npm/v/@polyxd/ds-polaris?label=&color=FF6E40)](https://www.npmjs.co