Quick Start

​

What you’re building

​

Step 1: Scaffold, then shape the definition

Throughout these docs, rx/ means the design folder in your Studio project workspace. Studio reads it directly; publishing sends it to your universe.

# In Studio: New Project → "acme": scaffolds rx/acme/ (components/, templates/,
# and a complete copy of the default token set in styles/)

{
  "unoverse": "1.0",
  "kind": "component",
  "name": "PriceCard",
  "category": "Commerce",
  "description": "A card showing a product name, price and short description.",
  "whenToUse": "Show a single product or plan with its price. Not for lists of products (use a list component) or for charts.",
  "props": {
    "title":       { "type": "string", "default": "Pro Plan", "input": true },
    "price":       { "type": "string", "default": "$29/mo", "input": true },
    "description": { "type": "string", "default": "Everything in Basic plus priority support.", "input": true }
  },
  "root": {
    "type": "Box",
    "style": { "width": "full", "direction": "column", "gap": "3", "padding": "lg",
               "background": "surface.base", "border": "subtle", "shadow": "lg" },
    "children": [
      { "type": "Text", "bind": { "value": "title" },
        "style": { "font": "headline.sm", "weight": "semibold", "color": "text.primary" } },
      { "type": "Text", "bind": { "value": "price" },
        "style": { "font": "headline.lg", "color": "text.primary" } },
      { "type": "Text", "bind": { "value": "description" }, "visibleWhen": "description",
        "style": { "font": "body.md", "color": "text.secondary" } }
    ]
  }
}

​

Step 2: Validate as you type

{
  "json.schemas": [
    {
      "fileMatch": ["**/rx/**/components/**/*.json", "**/rx/**/templates/**/*.json", "**/rx/**/atoms/*.json"],
      "url": "./rx/_schema/unoverse.schema.json"
    }
  ]
}

​

Step 3: Mock data & states for Studio

• Prop defaults ARE the mock. Studio renders the component from them with no backend: that’s why every prop carries a realistic default, not an empty string.
• The states/ folder is the state picker. If your component has multiple layers (a Switch on a discriminant: wizard steps, inline↔focused), enumerate each layer as states/<layer>.json and Studio automatically shows a pill per state; clicking one sets the discriminant and that layer draws itself (07). PriceCard is single-view, so it needs none.

​

Step 4: Lint, then deploy

# Validation is Studio's job: the schema checks as you type; the full lint
# (tokens, state rules, structure) runs at publish and blocks on any error
unoverse build    # nodes synthesize from your definitions at boot

• a node any workflow can use: copy it from Studio (⧉ Copy for Canvas) and paste (Cmd+V) onto the Canvas, wire data into its props, and
• an MCP resource every channel (web, native, Studio) renders natively.

​

Step 5: See it in Studio

1. Find PriceCard in the component list.
2. Mock mode: it renders from your prop defaults; multi-state components get a state picker from their states/ folder, this is your Storybook.
3. Live mode: wire it into a workflow on the Canvas and watch a real agent stream real data into it.

​

Quick-Start Checklist

• Project created in Studio (New Project); component authored in it with a full envelope
• whenToUse written outcome-first (the AI picks components by it)
• Every bind has a matching prop with a default, workflow-fed props marked input: true
• Zero raw values: token names only in every style
• Prop defaults realistic (they ARE the mock); multi-layer components enumerate states/
• Studio preview clean (mock, then live); publish passes lint with 0 errors
• Previewed in Studio (mock states, then live)