A compiler-first UI language for vibecoding

Define your UI as structured JSON, let the compiler validate your schema, and render with a minimal, reactive runtime. Perfect for AI-assisted development.

Built for the AI Era

Constela bridges the gap between human intent and machine-generated UI with a language designed from the ground up for reliability.

AI-Friendly DSL

JSON-based structure that AI models can easily generate, understand, and validate without ambiguity.

Deterministic Actions

Every action step is typed and predictable. No hidden side effects, no surprises.

Schema Validation

Compile-time validation catches errors before runtime. Invalid UI definitions never make it to production.

Minimal Runtime

Fine-grained reactivity without a virtual DOM. Only what changes gets updated.

Structured Errors

JSON Pointer paths pinpoint exact error locations. Debug faster with precise, actionable messages.

See It in Action

A simple counter in Constela. Declarative state, typed actions, and reactive views in pure JSON.

counter.constela.json

{
  "version": "1.0",
  "state": {
    "count": { "type": "number", "initial": 0 }
  },
  "actions": [
    {
      "name": "increment",
      "steps": [
        { "do": "update", "target": "count", "operation": "increment" }
      ]
    },
    {
      "name": "decrement",
      "steps": [
        { "do": "update", "target": "count", "operation": "decrement" }
      ]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "children": [
      { "kind": "text", "value": { "expr": "state", "name": "count" } },
      {
        "kind": "element",
        "tag": "button",
        "props": { "onClick": { "event": "click", "action": "increment" } },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "+" } }]
      },
      {
        "kind": "element",
        "tag": "button",
        "props": { "onClick": { "event": "click", "action": "decrement" } },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "-" } }]
      }
    ]
  }
}

Live Preview

This preview demonstrates the counter's behavior.
The actual Constela runtime compiles and renders the JSON on the left.