DEV Community

Yuuichi Eguchi
Yuuichi Eguchi

Posted on

Introducing create-constela: Bootstrap Constela Projects in Seconds

#constela #webdev #javascript #typescript

TL;DR 

npx create-constela my-app
cd my-app
npm run dev
Enter fullscreen mode Exit fullscreen mode

Three commands. That's all you need to start building with Constela.

What is create-constela?

create-constela is a scaffolding CLI tool for Constela projects. Similar to create-next-app or create-vite, it lets you bootstrap a new project with a single command.

Features

  • Interactive mode: Choose project name and package manager interactively
  • Template selection: Start with examples using the --example option
  • Flexible options: Skip git initialization or dependency installation as needed

Usage

Basic Usage 

npx create-constela my-app
Enter fullscreen mode Exit fullscreen mode

This command will:

  1. Prompt you to select a package manager (npm / yarn / pnpm)
  2. Create the project directory
  3. Copy template files
  4. Initialize git repository
  5. Install dependencies

CLI Options

Option Description
--example <name> Use a specific example template
--template <name> Use a specific template
--list List available templates and examples
--no-git Skip git initialization
--no-install Skip dependency installation
--package-manager <pm> Specify package manager (npm/yarn/pnpm)

Examples 

# List available templates
npx create-constela --list

# Create with a specific example
npx create-constela my-app --example counter

# Skip git and install
npx create-constela my-app --no-git --no-install

# Use pnpm
npx create-constela my-app --package-manager pnpm
Enter fullscreen mode Exit fullscreen mode

Generated Project Structure 

my-app/
├── constela.config.json
├── package.json
├── .gitignore
└── src/
    └── routes/
        └── index.json
Enter fullscreen mode Exit fullscreen mode

The generated index.json gives you a minimal starting point:

{
  "version": "1.0",
  "state": {},
  "actions": [],
  "view": {
    "kind": "element",
    "tag": "div",
    "children": [
      {
        "kind": "element",
        "tag": "h1",
        "children": [
          { "kind": "text", "value": { "expr": "lit", "value": "Welcome to Constela" } }
        ]
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

What is Constela?

Constela is a compiler-first UI language designed for AI-generated UIs.

Unlike React or Next.js, you don't write UI with JavaScript. Instead, you describe UI behavior as a constrained JSON DSL, which is validated, analyzed, and compiled into minimal runtime code.

Key Differences

Constela React / Next.js
UI authoring JSON DSL JavaScript / JSX
Execution compiler-driven runtime-driven
State updates declarative actions arbitrary JS
Errors structured errors runtime exceptions

Performance Comparison

We rebuilt Constela's official website using both Constela and Next.js:

Metric Constela Next.js Difference
Build time 2.2s 12.3s 5.6× faster
node_modules size 297MB 794MB 2.7× smaller
Output size 14MB 72MB 5.1× smaller

Technical Implementation

create-constela is built with:

  • commander.js: CLI argument parsing
  • @inquirer/prompts: Interactive prompts
  • Node.js fs API: File copying and transformation
  • TDD: 163 test cases ensuring quality

Security

Path traversal protection is built-in. Malicious inputs like ../../../etc/passwd are rejected at the template resolution layer.

Getting Started

Ready to try Constela? Run:

npx create-constela my-app
cd my-app
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 and start building!

Links

Have questions or feedback? Drop a comment below!

Top comments (0)