Getting Started — UIX Docs

Prerequisites

Node.js 20+
npm, pnpm, or yarn
A text editor (VS Code recommended — we have a dedicated extension)

Install the CLI

bash

npx @uix/devtools init

This scaffolds a .uix/config.json file and a schemas/ directory in your project.

Create your first document

A UIXDocument is a JSON file that describes a UI. Create schemas/login.uix.json:

json

{
  "id": "login-screen",
  "name": "Login Screen",
  "version": "1.0.0",
  "root": "root",
  "nodes": {
    "root": {
      "id": "root",
      "type": "Frame",
      "layout": { "width": "fill", "height": "fill", "direction": "vertical", "gap": 16 },
      "children": ["title", "email", "password", "submit"]
    },
    "title": {
      "id": "title",
      "type": "Text",
      "props": { "content": "Welcome back" }
    },
    "email": {
      "id": "email",
      "type": "Input",
      "props": { "placeholder": "Email", "inputType": "email" }
    },
    "password": {
      "id": "password",
      "type": "Input",
      "props": { "placeholder": "Password", "inputType": "password" }
    },
    "submit": {
      "id": "submit",
      "type": "Button",
      "props": { "label": "Sign In" }
    }
  },
  "tokens": {}
}

Generate code

Use the code generation package to turn your schema into platform code:

bash

npx @uix/codegen generate schemas/login.uix.json --target react

This produces a React component with typed props, layout styles, and token references.

Supported targets

Target	Output	File Extension
react	React functional component	.tsx
flutter	StatelessWidget	.dart
swiftui	SwiftUI View	.swift
vue	Single File Component	.vue
angular	@Component class	.ts
react-native	React Native component	.tsx
html	Semantic HTML	.html

Next steps

Read the Protocol Spec to understand UIXDocument, UIXNode, and UIXToken in depth
Set up the VS Code extension for inline validation and live preview
Connect the Figma plugin for design ↔ code sync