Quick start

Build a price card, see it render in studio, and publish it to your universe. You need studio running. Studio covers the install.

Make your org

Your work lives in an org, and one org is one Git repo. unoverse create asks for the org’s name, suggesting the folder’s, and that name travels with everything the org publishes.

mkdir acme && cd acme
unoverse create

Choose Studio at the prompt and give the org a name. The folder becomes the org’s repo, with a first commit, and the org’s folders sit at its root:

acme

unoverse.yaml org: acme, the org's name

styles colour, type, spacing

identity who the organisation is

.github/workflows a pull-request check that runs unoverse lint

.vscode editor checks for every file you write

That is the baseline. Add components/, apps/, skills/, blocks/ and nodes/ as you need them. Worked examples live in the public demo org repo, acme, to read and copy.

Write the definition

Create components/pricecard/pricecard.yaml in your org repo. The file name is the component’s name, and the lint enforces the match.

unoverse: "1.0"
type: component
name: pricecard
category: Commerce
props:
  title:
    type: string
    input: true
    default: Pro Plan
  price:
    type: string
    input: true
    default: $29/month
  description:
    type: string
    input: true
    default: Everything in Basic, plus priority support.
root:
  type: Box
  style:
    width: full
    direction: column
    gap: "3"
    padding: "6"
    background: surface.base
    border: subtle
    radius: 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 }

Reading it top to bottom:

Part	What it does
`unoverse` `type` `name`	The envelope. It marks the file as a component definition
`category`	The job’s domain. The rest of the discovery meta lives in the manifest
`props`	Every field a workflow can fill. `input: true` marks a field as workflow-fed
`default`	The value studio previews from, so make each one realistic content
`root`	The layout, composed only from the closed primitive set
`bind`	Maps a primitive’s target to a field: `{ value: title }`, `{ src: image }`
`visibleWhen`	A bare field name is a truthy test, so the row hides when the field is empty
`style`	Token names only. Never `12px`, never `#fff`

Add the manifest

A manifest.yaml beside the definition is how an Agent finds the component. A flat file you only place yourself can skip it; anything an Agent should find carries one:

description: A card showing a product name, price and short description.
whenToUse: Show a single product or plan with its price.

The definition says what the component is. The manifest says when to reach for it, and that split never blurs: discovery meta lives here and nowhere else.

Catch mistakes as you type

Your editor can mark an unknown primitive, a missing whenToUse or an illegal condition while you are still in the file. unoverse create sets this up: the org repo’s .vscode/settings.json maps each kind of file to a schema on this site. The checks need the YAML extension, redhat.vscode-yaml, which the repo recommends when you open it. These are the design entries the settings carry:

{
  "yaml.schemas": {
    "https://docs.unoverse.ai/schemas/design/unoverse.schema.json": [
      "components/**/!(manifest).yaml",
      "templates/**/!(manifest).yaml",
      "apps/**/!(manifest).yaml",
      "atoms/**/*.yaml"
    ],
    "https://docs.unoverse.ai/schemas/design/manifest.schema.json": [
      "components/**/manifest.yaml",
      "templates/**/manifest.yaml",
      "apps/**/manifest.yaml"
    ],
    "https://docs.unoverse.ai/schemas/design/agent.schema.json": ["agents/*.yaml"]
  }
}

A manifest has its own shape, so the definition schema skips files named manifest.yaml and the manifest schema checks them. The settings file is written once and never replaced. An org repo made before these entries existed gets the same checks when you paste them into its yaml.schemas.

See it

unoverse studio

Open Components and find pricecard. It renders from the prop defaults with no backend involved, which is why the defaults matter. Open the code view and the definition sits beside the live preview: edit, save, and the preview follows. A component with a state tree gets one pill per public state, taken straight from the tree. This card has none, so it shows none.

Ship it

Check it, then commit and push to your org repo. Every universe connected to the repo pulls it (Environments).

unoverse lint
git push

The universe runs the same lint before it applies the commit, so nothing broken reaches it. Once it lands, your card is a node any workflow can use: open it in studio, click Copy for Canvas, and paste it onto a workflow with Cmd+V. Edits to a component that already shipped apply live, and so does a brand new one: no restart.

Getting Started

Core Concepts

Workflow

Make your org

Write the definition

Add the manifest

Catch mistakes as you type

See it

Ship it

Next steps

Components

Primitives

​Make your org

​Write the definition

​Add the manifest

​Catch mistakes as you type

​See it

​Ship it

​Next steps

Components

Primitives

Make your org

Write the definition

Add the manifest

Catch mistakes as you type

See it

Ship it

Next steps