Introduction

Learn what Constela is and why it exists

What is Constela?

Constela is a compiler-first UI language designed for vibecoding. It provides a structured JSON-based DSL (Domain Specific Language) that AI assistants can easily generate and manipulate.

Unlike traditional UI frameworks that require complex build toolchains and deep JavaScript knowledge, Constela compiles declarative JSON definitions directly into optimized DOM operations.

json

{
  "version": "1.0",
  "state": {
    "message": { "type": "string", "initial": "Hello, Constela!" }
  },
  "view": {
    "kind": "element",
    "tag": "div",
    "children": [
      {
        "kind": "text",
        "value": { "expr": "state", "name": "message" }
      }
    ]
  }
}

Mental Model: Language vs Library

Tip

Think of Constela as a language, not a library. You describe what you want, and the compiler handles the how.

Traditional UI development

Write JavaScript/TypeScript code
Import framework functions
Manage state manually
Handle DOM updates yourself

Constela approach

Describe UI structure in JSON
Declare state and its types
Define actions declaratively
Compiler generates efficient code

Constela's Vision

A Simpler, Intuitive Approach: Constela provides an elegant way to build UI—describe what you want, and the compiler handles the rest
A Language, Not a Library: With its own compiler and runtime, Constela transforms your intent directly into optimized code
Scales with Your Needs: From simple widgets to complex applications, Constela's architecture grows with your project
Accessible by Default: Compile-time checks catch common a11y issues before they reach production
Extensible: Register custom functions via the plugin system to extend the DSL
Polished UX: CSS-based enter/exit transitions for smooth conditional rendering

When to Use Constela

Constela excels across a wide range of scenarios:

Use Case	Why Constela Excels
AI-generated UI	Structured JSON is easier for LLMs to generate correctly
Interactive applications	Reactive state management with zero boilerplate
Embedded components	Small runtime footprint, big capabilities
Rapid prototyping to production	Start fast, scale confidently
Complex state management	Declarative actions simplify even intricate logic

Note

Constela is particularly powerful when paired with AI assistants. The JSON-based DSL reduces hallucination and improves generation accuracy—while you maintain full control over complex application logic.

Next Steps

Ready to get started? Head to the Installation guide to set up Constela in your project.