0x

Write 18 lines. Get 96 lines of production React.
A full-stack language that compiles to React, Vue 3, Svelte 5, Express, React Native, and Terraform.
Now with LSP/IDE support and full Vue/Svelte feature parity.

Website · Quick Start · Docs · npm · MCP Server · Smithery Server

What is this?

0x is a tiny language for building apps. You describe what you want, and the compiler outputs production-ready React, Vue, Svelte, Express backends, React Native mobile apps, or Terraform infrastructure.

page Counter:
  state count: int = 0

  fn increment():
    count += 1

  layout col gap=16 padding=24 center:
    text "Counter" size=2xl bold
    text "{count}" size=4xl color=cyan
    button "+1" style=primary -> increment()

That's a complete component. Run 0x build counter.ai --target react and you get a working React component with useState, event handlers, and full styling. Same source also compiles to Vue 3, Svelte 5, and React Native.

Why? Most code is boilerplate — imports, hook calls, JSX wrappers, style objects, closing tags, Express middleware, Terraform blocks. 0x skips all of that. You write what matters, the compiler handles the rest.

The numbers

Compared against production TypeScript React with full inline styling, types, and component structure.

Quick Start

npm install -g 0x-lang

Create a file called hello.ai:

page Hello:
  state name: str = "World"

  layout col gap=16 padding=24 center:
    text "Hello, {name}!" size=3xl bold
    input name placeholder="Your name"

Compile it:

# Frontend
0x build hello.ai --target react
0x build hello.ai --target vue
0x build hello.ai --target svelte

# Mobile
0x build app.ai --target react-native

# Backend
0x build server.ai --target backend

# Infrastructure
0x build infra.ai --target terraform

# Or multiple at once
0x build hello.ai --target react,vue,svelte

Scaffold a project

0x init my-app
cd my-app
0x build src/counter.ai --target react

Watch mode

0x dev counter.ai --target react

File changes auto-recompile.

Examples

Todo App — 24 lines

page Todo:
  type Item = {id: int, text: str, done: bool}

  state items: list[Item] = []
  state input: str = ""
  derived remaining = items.filter(i => !i.done).length

  fn add():
    if input.trim() != "":
      items.push({id: Date.now(), text: input, done: false})
      input = ""

  fn remove(id: int):
    items = items.filter(i => i.id != id)

  layout col gap=16 padding=24 maxWidth=600 margin=auto:
    text "Todo ({remaining} remaining)" size=2xl bold

    layout row gap=8:
      input input placeholder="What needs to be done?"
      button "Add" style=primary -> add()

    for item in items:
      layout row gap=8 center:
        toggle item.done
        text item.text strike={item.done}
        button "Delete" style=danger size=sm -> remove(item.id)

    if items.length == 0:
      text "Nothing to do" color=#999 center

Types, filtering, conditional rendering, two-way binding — all handled. Compiles to 136 lines of production React.

Dashboard with API calls — 37 lines

page Dashboard:
  type Metric = {label: str, value: float, change: float}

  state metrics: list[Metric] = []
  state period: str = "week"
  state loading: bool = true

  api getMetrics = GET "/api/metrics"

  on mount:
    metrics = await getMetrics(period: period)
    loading = false

  watch period:
    loading = true
    metrics = await getMetrics(period: period)
    loading = false

  layout col gap=24 padding=32:
    layout row between center:
      text "Dashboard" size=3xl bold
      select period options=["day", "week", "month", "year"]

    if loading:
      text "Loading..." center
    else:
      layout grid cols=3 gap=16:
        for metric in metrics:
          component MetricCard(metric)

component MetricCard:
  prop metric: Metric

  derived isPositive = metric.change >= 0
  derived changeColor = isPositive ? "green" : "red"

  layout col gap=8 padding=24 radius=12 shadow=md bg=white:
    text metric.label size=sm color=#666
    text "{metric.value}" size=2xl bold
    text "{isPositive ? '↑' : '↓'} {metric.change}%" size=sm color={changeColor}

Async data fetching, loading states, watchers, grid layouts, reusable child components.

Chat App — 31 lines

page Chat:
  type Message = {id: int, text: str, sender: str, time: datetime}

  state messages: list[Message] = []
  state input: str = ""
  state username: str = "Me"

  fn send():
    if input.trim() != "":
      messages.push({id: Date.now(), text: input, sender: username, time: now()})
      input = ""

  layout col height=100vh:
    layout row center padding=16 bg=#075e54:
      text "Chat" size=lg bold color=white

    layout col gap=8 padding=16 scroll=y grow=1:
      for msg in messages:
        layout row {msg.sender == username ? "end" : "start"}:
          layout col padding=12 radius=12 maxWidth="70%" bg={msg.sender == username ? "#dcf8c6" : "white"} shadow=sm:
            text msg.text
            text msg.time.format("HH:mm") size=xs color=#999 end

    layout row gap=8 padding=16 bg=#f0f0f0:
      input input placeholder="Type a message..." grow=1
      button "Send" style=primary -> send()

E-commerce — 44 lines

page Shop:
  type Product = {id: int, name: str, price: float, image: str}
  type CartItem = {product: Product, qty: int}

  state products: list[Product] = []
  state cart: list[CartItem] = []
  state search: str = ""
  state loading: bool = true

  derived filteredProducts = products.filter(p => p.name.includes(search))
  derived cartTotal = cart.reduce((sum, item) => sum + item.product.price * item.qty, 0)
  derived cartCount = cart.reduce((sum, item) => sum + item.qty, 0)

  api getProducts = GET "/api/products"

  on mount:
    products = await getProducts()
    loading = false

  fn addToCart(product: Product):
    existing = cart.find(item => item.product.id == product.id)
    if existing:
      existing.qty += 1
    else:
      cart.push({product: product, qty: 1})

  fn removeFromCart(productId: int):
    cart = cart.filter(item => item.product.id != productId)

  layout col gap=24 padding=32:
    layout row between center:
      text "Shop" size=3xl bold
      layout row gap=8 center:
        text "Cart ({cartCount})" size=lg
        text "${cartTotal}" size=lg bold color=#e74c3c

    input search placeholder="Search products..."

    if loading:
      text "Loading..." center
    else:
      layout grid cols=3 gap=16:
        for product in filteredProducts:
          layout col gap=8 padding=16 radius=12 shadow=md bg=white:
            image product.image width="100%" height=200
            text product.name size=lg bold
            text "${product.price}" size=md color=#e74c3c
            button "Add to Cart" style=primary -> addToCart(product)

Backend API — Express server

page API:
  model User:
    field name: str
    field email: str
    field role: str = "user"

  auth:
    secret: JWT_SECRET
    endpoint: /auth

  route GET /api/users:
    users = await db.find("users")
    respond 200 users

  route POST /api/users:
    user = await db.create("users", body)
    respond 201 user

  env:
    DATABASE_URL: "postgres://localhost/mydb"
    JWT_SECRET: secret

Compiles to a full Express.js server with JWT auth, CORS, error handling, and CRUD routes.

React Native Mobile App

page MobileCounter:
  state count: int = 0

  fn increment():
    count += 1

  layout col gap=16 padding=24 center:
    text "Counter" size=2xl bold
    text "{count}" size=4xl color=cyan
    button "+1" style=primary -> increment()

Same 0x syntax compiles to React Native with View, Text, TouchableOpacity, and StyleSheet.

Infrastructure — Terraform

page Infra:
  deploy myApp:
    provider: aws
    region: us-east-1
    instance: t3.medium

  storage assets:
    provider: s3
    bucket: my-app-assets
    versioning: true

  domain mysite:
    provider: route53
    name: "myapp.com"

Compiles to Terraform HCL with provider blocks, resource definitions, and variable declarations.

Blog App — 64 lines

page Blog:
  state posts: list[Post] = []
  state loading: bool = true

  data posts from fetch("/api/posts")

  layout col gap=24 padding=32:
    nav "BlogApp" links=["Home", "Write", "About"]
    hero "My Blog" subtitle="Thoughts and tutorials"

    for post in posts:
      component PostCard(post)

Full CRUD blog with data fetching, auth, routing, and reusable components.

CRM Dashboard — 80 lines

page CRM:
  data customers from fetch("/api/customers")
  state search: str = ""
  derived filtered = customers.filter(c => c.name.includes(search))

  layout col gap=24 padding=32:
    text "CRM Dashboard" size=3xl bold
    input search placeholder="Search customers..."

    layout grid cols=3 gap=16:
      stat "Total" value={customers.length}
      stat "Active" value={customers.filter(c => c.active).length}
      stat "Revenue" value="$12,500"

    table filtered columns=["name", "email", "status", "revenue"]

CRM with search, stats, filterable table, and modal forms.

SaaS Landing — 77 lines, Kanban Board — 77 lines, Admin Panel — 91 lines

See all 10 examples in examples/.

IDE / Editor Support

0x includes a built-in Language Server Protocol (LSP) server for IDE integration.

VSCode Extension

Install the 0x VSCode extension for:

• Syntax highlighting — all 73+ keywords color-coded
• Autocomplete — context-aware keyword and identifier completion
• Hover info — documentation for keywords, types for variables
• Go to definition — jump to state, fn, prop declarations
• Document outline — page, component, state, fn in the sidebar
• Real-time diagnostics — parse and validation errors as you type

Other Editors

The LSP server works with any editor that supports LSP:

# Start the LSP server
0x-lsp --stdio

Configure your editor's LSP client to connect to 0x-lsp --stdio for .ai files.

Language Reference

Top-level declarations

page PageName:              # Page component (has routing)
component ComponentName:    # Reusable component
app AppName:                # App root

State

state count: int = 0                    # Reactive state
state items: list[Item] = []            # Typed list
derived total = price * quantity         # Auto-computed
prop title: str = "Default"             # External prop

Types

type Item = {id: int, text: str, done: bool}
type User = {name: str, email: str, age: optional[int]}

Built-in: int, float, str, bool, list[T], optional[T], datetime, object

Functions

fn increment():
  count += 1

fn add(text: str):
  items.push({id: Date.now(), text: text, done: false})

async fn fetchData():
  data = await api.getData()

Layout

layout col gap=16 padding=24:        # Vertical (flexbox column)
layout row gap=8 center:              # Horizontal (flexbox row)
layout grid cols=3 gap=16:            # CSS Grid

Props: gap, padding, margin, center, between, end, wrap, grow, maxWidth, bg, radius, shadow, scroll

UI Elements

text "Hello" size=2xl bold color=#333           # Text
text "{variable}" size=lg                        # Dynamic text
button "Click" style=primary -> action()        # Button with handler
button "Set" -> count = 0                        # Inline mutation
input binding placeholder="Type..."             # Two-way binding
toggle binding                                   # Toggle switch
select binding options=["a", "b", "c"]          # Dropdown
image src width=100 height=100                   # Image
link "Click here" href="/path"                   # Link

Styling

text "Big" size=2xl bold color=blue              # Inline props
button "Go" style=primary size=lg rounded=full   # Presets

style card:                                       # Named style block
  padding: 24
  radius: 12
  shadow: md
  bg: white

layout col .card:                                 # Apply named style
  text "Inside a card"

Sizes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl
Button styles: primary, secondary, danger, outline, ghost

CSS Classes & Passthrough Props

layout col class="container mx-auto p-4":
  text "Title" class="text-xl font-bold text-blue-600"
  button "Save" -> save() class="btn btn-primary"
  input name class="form-input" aria-label="Name" data-testid="name-input"

• class="..." adds className (React) or class (Vue/Svelte) to any element
• Works with Tailwind CSS, Bootstrap, or any CSS framework
• Unknown props (data-*, aria-*, role, etc.) pass through as HTML attributes

Raw Block (Framework Escape Hatch)

raw:
  <CustomComponent onSpecialEvent={handler} />

raw { <div dangerouslySetInnerHTML={{__html: content}} /> }

• raw: inserts code directly into JSX/template output (NOT the script section)
• Different from js: which goes into the script/hook section
• Use for third-party components or framework-specific code

Component Children

component Dialog(title="Settings"):
  layout col:
    text "Content"
    button "Close" -> close()

component Card(item)    # Self-closing (no children)

• When a component call ends with :, indented children are wrapped inside the component
• Without :, renders as a self-closing tag

Control flow

if condition:
  text "True"
elif other:
  text "Other"
else:
  text "False"

for item in items:
  text item.name

show isVisible:                         # Show when true
hide isHidden:                          # Hide when true

Lifecycle & Watchers

on mount:
  data = await fetchData()

on destroy:
  cleanup()

watch selectedId:
  details = await fetchDetails(selectedId)

API calls

api getData = GET "/api/data"
api createItem = POST "/api/items"
api updateItem = PUT "/api/items/{id}"
api deleteItem = DELETE "/api/items/{id}"

Validation

check items.length <= 500 "Max 500 items"
check price >= 0 "Price must be positive"

Events

button "Save" -> save()                          # Click
button "Reset" -> count = 0                       # Inline
input query @keypress=onKeyPress                  # Keyboard

Performance Optimization (React)

• fn declarations are auto-wrapped in useCallback with extracted deps
• derived values use useMemo with extracted deps
• Components with prop declarations are auto-wrapped in React.memo
• No manual optimization needed — the compiler handles it automatically

Programmatic API

Use 0x as a library in your own tools:

import { compile } from '0x-lang';

const source = `
page Hello:
  state name: str = "World"
  layout col:
    text "Hello, {name}!" size=2xl bold
`;

// Frontend targets
const react  = compile(source, { target: 'react' });
const vue    = compile(source, { target: 'vue' });
const svelte = compile(source, { target: 'svelte' });

// Mobile
const rn = compile(source, { target: 'react-native' });

// Backend & infrastructure
const server = compile(backendSource, { target: 'backend' });
const infra  = compile(infraSource, { target: 'terraform' });

// Options
const result = compile(source, {
  target: 'react',
  validate: true,       // Run validator (default: true)
  sourceMap: true,      // Add source line comments (default: true)
  useClient: true,      // Add 'use client' for Next.js (default: auto)
  compact: true,        // AI-optimized compact output — strips comments
});

console.log(react.code);       // Full React component
console.log(react.lineCount);  // Line count

AI Bridge

import { getLanguageSpec, generatePrompt, compileFromDescription } from '0x-lang';

// Get the full 0x language spec for an LLM
const spec = getLanguageSpec();

// Generate a structured prompt for AI code generation
const prompt = generatePrompt("todo app with authentication", 'react');

// Auto-generate a 0x skeleton from a natural language description
const skeleton = compileFromDescription("dashboard with charts and API");

Pipeline access

import { tokenize, parse, validate, generateReact } from '0x-lang';

const tokens = tokenize(source);     // Lexical tokens
const ast = parse(source);           // Abstract syntax tree
const result = validate(ast);        // Errors & warnings
const output = generateReact(ast);   // React JSX string

Exports

MCP Server

0x has a built-in MCP server so AI tools can compile 0x directly. The AI writes compact 0x internally and returns production framework code — the user never touches 0x.

Setup

{
  "mcpServers": {
    "0x": {
      "command": "npx",
      "args": ["-y", "0x-lang-mcp-server"]
    }
  }
}

{
  "mcpServers": {
    "0x": {
      "command": "npx",
      "args": ["-y", "0x-lang-mcp-server"]
    }
  }
}

npx @smithery/cli install 0x

Tools

How it works

You:  "Build me a todo app in React"
AI:   [0x_reference] → writes 30 lines of 0x → [0x_compile] → 140 lines of React
You:  Gets a working React component

The AI generates ~30 lines of 0x internally. The compiler outputs ~140 lines of production code. Fewer tokens generated, fewer mistakes made, better results delivered.

See mcp-server/ for full docs.

For AI agent builders

If you're building tools that generate code, 0x works well as an intermediate representation:

import { compile } from '0x-lang/compiler';
import { compileFromDescription, generatePrompt } from '0x-lang';

// Auto-generate 0x skeleton from natural language
const skeleton = compileFromDescription("e-commerce product page");

// Or use the AI bridge to generate a prompt for your LLM
const prompt = generatePrompt("todo app with auth", 'react');

// Compile with compact mode for AI-optimized output
const react  = compile(source, { target: 'react', compact: true });
const server = compile(source, { target: 'backend', compact: true });

Why this matters for AI:

• 80% fewer output tokens — less generation cost, lower latency
• One syntax, zero decisions — no "which React pattern?" hallucinations
• Full-stack — frontend, backend, mobile, and infrastructure from one language
• Compact mode — strips comments and whitespace for minimal token usage
• AI Bridge — built-in spec, prompt generation, and skeleton creation
• Deterministic — same input always produces the same output
• Validated — the compiler catches errors before they reach the user

Architecture

Source (.ai)
    ↓
Tokenizer ─── Indentation-aware lexical analysis
    ↓
Parser ────── Recursive descent → typed AST
    ↓
Validator ─── Circular deps · unused state · type checks
    ↓
Generator
    ├── React ────────── JSX + hooks + CSS-in-JS
    ├── Vue ──────────── SFC + Composition API + store/data/form/auth/model
    ├── Svelte ──────── Runes + store/data/form/auth/model
    ├── React Native ── View + StyleSheet + TouchableOpacity
    ├── Backend ─────── Express + JWT + CRUD + middleware
    ├── Terraform ───── HCL + providers + resources
    └── AI Bridge ───── Spec + prompts + skeleton generation
    ↓
LSP Server ─── Diagnostics · completion · hover · go-to-def · symbols

~14,000 lines of TypeScript. Zero runtime dependencies (except gen-mapping for source maps).

CLI

0x build <file.ai> --target <target> [--output <dir>]
0x dev <file.ai> --target <target>
0x bench <file.ai>
0x init [project-name]
0x-lsp --stdio                          # Start LSP server

Flags:
  --target, -t    react, vue, svelte, react-native, backend, terraform (comma-separated)
  --output, -o    Output directory (default: ./dist/)
  --help, -h      Show help

Contributing

git clone https://github.com/hankimis/0x-lang.git
cd 0x-lang
npm install
npm test          # 303 tests across 12 test suites
npm run build

Tests cover tokenizer, parser, validator, all three generators, benchmarks, and integration. See CONTRIBUTING.md.

License

ISC — free for everything.

0xlang.com · GitHub · npm · Smithery · Smithery Server