Constela
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.
Performance Comparison
Constela delivers faster builds and smaller bundles compared to traditional frameworks.
Build Time
Constela
2.2s
Next.js
12.3s
node_modules Size
Constela
297MB
Next.js
794MB
Deploy Time
Constela
10s
Next.js
50s
Output Size
Constela
14MB
Next.js
72MB
Why Constela
Built for theAI Era
Machine-Readable Format
AI-Friendly DSL
JSON-based structure that AI models can easily generate, understand, and validate without ambiguity. Perfect for AI-assisted development workflows.
Predictable Behavior
Deterministic Actions
Every action step is typed and predictable. No hidden side effects, no surprises. What you define is exactly what gets executed.
Catch Errors Early
Compile-Time Safety
Schema validation catches errors before runtime. Invalid UI definitions never make it to production. Debug with precise JSON Pointer paths.
Blazing Fast
Minimal Runtime
Fine-grained reactivity without a virtual DOM. Only what changes gets updated. Smaller bundles, faster loads, better performance.
See It in Action
Interactive like buttons with conditional rendering. Declarative state, typed actions, and reactive views in pure JSON.
comments.constela.json
json
{
"version": "1.0",
"state": {
"comments": {
"type": "list",
"initial": [
{
"id": 1,
"name": "Sarah Chen",
"avatar": "from-indigo-400 to-purple-500",
"time": "2h",
"text": "This is amazing! Great work on the new feature.",
"liked": false,
"likes": 12
},
{
"id": 2,
"name": "Alex Kim",
"avatar": "from-emerald-400 to-cyan-500",
"time": "5h",
"text": "Can't wait to try this out!",
"liked": false,
"likes": 8
},
{
"id": 3,
"name": "Jordan Lee",
"avatar": "from-orange-400 to-rose-500",
"time": "1d",
"text": "Love the clean API design.",
"liked": false,
"likes": 5
}
]
}
},
"actions": {
"toggleLike": {
"name": "toggleLike",
"steps": [
{
"do": "if",
"condition": {
"expr": "var",
"name": "payload",
"path": "liked"
},
"then": [
{
"do": "setPath",
"target": "comments",
"path": {
"expr": "lit",
"value": [
{
"expr": "var",
"name": "payload",
"path": "index"
},
"likes"
]
},
"value": {
"expr": "bin",
"op": "-",
"left": {
"expr": "var",
"name": "payload",
"path": "likes"
},
"right": {
"expr": "lit",
"value": 1
}
}
}
],
"else": [
{
"do": "setPath",
"target": "comments",
"path": {
"expr": "lit",
"value": [
{
"expr": "var",
"name": "payload",
"path": "index"
},
"likes"
]
},
"value": {
"expr": "bin",
"op": "+",
"left": {
"expr": "var",
"name": "payload",
"path": "likes"
},
"right": {
"expr": "lit",
"value": 1
}
}
}
]
},
{
"do": "setPath",
"target": "comments",
"path": {
"expr": "lit",
"value": [
{
"expr": "var",
"name": "payload",
"path": "index"
},
"liked"
]
},
"value": {
"expr": "not",
"operand": {
"expr": "var",
"name": "payload",
"path": "liked"
}
}
}
]
}
},
"view": {
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "w-full max-w-sm mx-auto font-sans antialiased"
}
},
"children": [
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "rounded-xl overflow-hidden bg-white shadow-[0_2px_8px_rgba(0,0,0,0.08),0_8px_32px_rgba(0,0,0,0.12)]"
}
},
"children": [
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "flex items-center gap-2 px-3 py-2 bg-gray-100 border-b border-gray-200"
}
},
"children": [
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "flex gap-1.5"
}
},
"children": [
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "w-3 h-3 rounded-full bg-red-400"
}
}
},
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "w-3 h-3 rounded-full bg-yellow-400"
}
}
},
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "w-3 h-3 rounded-full bg-green-400"
}
}
}
]
},
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "flex-1 mx-2 px-3 py-1 bg-white rounded text-xs text-gray-500 text-center truncate"
}
},
"children": [
{
"kind": "text",
"value": {
"expr": "lit",
"value": "myapp.constela.dev"
}
}
]
}
]
},
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "p-4"
}
},
"children": [
{
"kind": "element",
"tag": "h2",
"props": {
"class": {
"expr": "lit",
"value": "text-base font-semibold text-gray-900 mb-3"
}
},
"children": [
{
"kind": "text",
"value": {
"expr": "lit",
"value": "Comments"
}
}
]
},
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "space-y-3 mb-4 max-h-48 overflow-y-auto pr-1"
}
},
"children": [
{
"kind": "each",
"items": {
"expr": "state",
"name": "comments"
},
"as": "comment",
"index": "i",
"key": {
"expr": "var",
"name": "comment",
"path": "id"
},
"body": {
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "flex gap-3 p-3 bg-gray-50 rounded-lg"
}
},
"children": [
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "concat",
"items": [
{
"expr": "lit",
"value": "w-8 h-8 rounded-full bg-gradient-to-br "
},
{
"expr": "var",
"name": "comment",
"path": "avatar"
},
{
"expr": "lit",
"value": " flex-shrink-0"
}
]
}
}
},
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "flex-1 min-w-0"
}
},
"children": [
{
"kind": "element",
"tag": "div",
"props": {
"class": {
"expr": "lit",
"value": "flex items-center gap-2 mb-1"
}
},
"children": [
{
"kind": "element",
"tag": "span",
"props": {
"class": {
"expr": "lit",
"value": "text-sm font-medium text-gray-900"
}
},
"children": [
{
"kind": "text",
"value": {
"expr": "var",
"name": "comment",
"path": "name"
}
}
]
},
{
"kind": "element",
"tag": "span",
"props": {
"class": {
"expr": "lit",
"value": "text-xs text-gray-400"
}
},
"children": [
{
"kind": "text",
"value": {
"expr": "var",
"name": "comment",
"path": "time"
}
}
]
}
]
},
{
"kind": "element",
"tag": "p",
"props": {
"class": {
"expr": "lit",
"value": "text-sm text-gray-600 mb-2"
}
},
"children": [
{
"kind": "text",
"value": {
"expr": "var",
"name": "comment",
"path": "text"
}
}
]
},
{
"kind": "element",
"tag": "button",
"props": {
"class": {
"expr": "cond",
"if": {
"expr": "var",
"name": "comment",
"path": "liked"
},
"then": {
"expr": "lit",
"value": "flex items-center gap-1.5 text-rose-500 text-xs font-medium transition-colors"
},
"else": {
"expr": "lit",
"value": "flex items-center gap-1.5 text-gray-400 hover:text-rose-500 text-xs transition-colors"
}
},
"onClick": {
"event": "click",
"action": "toggleLike",
"payload": {
"index": {
"expr": "var",
"name": "i"
},
"liked": {
"expr": "var",
"name": "comment",
"path": "liked"
},
"likes": {
"expr": "var",
"name": "comment",
"path": "likes"
}
}
}
},
"children": [
{
"kind": "if",
"condition": {
"expr": "var",
"name": "comment",
"path": "liked"
},
"then": {
"kind": "element",
"tag": "svg",
"props": {
"class": {
"expr": "lit",
"value": "w-4 h-4"
},
"viewBox": {
"expr": "lit",
"value": "0 0 24 24"
},
"fill": {
"expr": "lit",
"value": "currentColor"
}
},
"children": [
{
"kind": "element",
"tag": "path",
"props": {
"d": {
"expr": "lit",
"value": "m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"
}
}
}
]
},
"else": {
"kind": "element",
"tag": "svg",
"props": {
"class": {
"expr": "lit",
"value": "w-4 h-4"
},
"viewBox": {
"expr": "lit",
"value": "0 0 24 24"
},
"fill": {
"expr": "lit",
"value": "none"
},
"stroke": {
"expr": "lit",
"value": "currentColor"
},
"stroke-width": {
"expr": "lit",
"value": "1.5"
}
},
"children": [
{
"kind": "element",
"tag": "path",
"props": {
"stroke-linecap": {
"expr": "lit",
"value": "round"
},
"stroke-linejoin": {
"expr": "lit",
"value": "round"
},
"d": {
"expr": "lit",
"value": "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
}
}
}
]
}
},
{
"kind": "text",
"value": {
"expr": "var",
"name": "comment",
"path": "likes"
}
}
]
}
]
}
]
}
}
]
}
]
}
]
}
]
}
}Live
PreviewClick the heart icons to like/unlike comments.
The Constela runtime renders the JSON code on the left.