Yuuichi Eguchi

Posted on Jan 24

Introducing the Constela VSCode Extension - Build UIs with JSON

#vscode #webdev #json #constela

Introducing the Constela VSCode Extension

I'm excited to announce the release of the official VSCode extension for Constela - a JSON-based UI DSL that compiles to minimal runtime JavaScript.

Install from VSCode Marketplace

What is Constela?

Constela is a declarative UI framework where you define your entire application in JSON. No complex JavaScript, no JSX - just pure, structured JSON that describes your UI, state, and interactions.

Here's a simple counter example:

{
  "version": "1.0",
  "state": {
    "count": { "type": "number", "initial": 0 }
  },
  "actions": [
    {
      "name": "increment",
      "steps": [
        { "do": "update", "name": "count", "with": "increment" }
      ]
    }
  ],
  "view": {
    "node": "element",
    "tag": "button",
    "props": {
      "onClick": { "action": "increment" }
    },
    "children": [
      {
        "node": "text",
        "content": { "expr": "state", "name": "count" }
      }
    ]
  }
}

Learn more at constela.dev

Extension Features

Syntax Highlighting

The extension provides full syntax highlighting for .constela.json files:

Expression types: lit, state, var, bin, cond, get, concat, and more
Action steps: set, update, fetch, navigate, delay, interval, etc.
View nodes: element, text, if, each, component, slot, etc.

IntelliSense Auto-completion

Get smart completions as you type:

Type "expr": " to see all available expression types
Type "do": " to see all action step types
Type "node": " to see all view node types
Reference completions for your defined state, actions, and components

Real-time Validation

Errors appear instantly as you type, powered by the Constela compiler:

JSON syntax errors
Missing required fields
Undefined state/action/component references
Type mismatches

Hover Documentation

Hover over any keyword to see its documentation, including:

Signature and structure
Description and usage
Available options

Go to Definition

Use Ctrl+Click (or Cmd+Click on macOS) to jump to:

State field definitions
Action definitions
Component definitions

Installation

Open VSCode
Go to Extensions (Ctrl+Shift+X)
Search for "Constela"
Click Install

Or install directly from the VSCode Marketplace.

Getting Started

Create a new file with the .constela.json extension
Start with the basic structure shown above
Enjoy syntax highlighting and real-time validation!

Technical Details

The extension uses the Language Server Protocol (LSP) for a robust editing experience:

Validation Engine: Full Constela compiler integration
Bundle Size: ~160KB (all dependencies included)
Zero External Dependencies: Everything is bundled with esbuild

Why Constela?

No Build Step Complexity: JSON is your source of truth
Type-Safe by Design: The compiler catches errors before runtime
Minimal Runtime: Compiles to optimized JavaScript
AI-Friendly: JSON structure is perfect for AI-assisted development

Feedback

Found a bug or have a feature request? Please open an issue on GitHub.

Give Constela a try and let me know what you think!

DEV Community