0x Programming Language Overview

0x (also known as 0x-lang) is an open-source, AI-first full-stack programming language that compiles to React, Vue 3, Svelte 5, Express.js backends, React Native mobile apps, and Terraform infrastructure. It uses a declarative, indentation-based syntax that reduces code by approximately 80%. For example, 18 lines of 0x produces 96 lines of production React code.

Installation
npm install -g 0x-lang
Quick Start
0x init my-app && cd my-app && 0x build src/counter.ai --target react
Compile Targets (6)
React (JSX + hooks), Vue 3 (SFC + Composition API), Svelte 5 (runes), Express.js (backend API + JWT + CRUD), React Native (mobile + StyleSheet), Terraform (HCL + AWS/Vercel/Fly.io)
Key Features
80% less code, zero ambiguity, 6 compile targets (frontend + backend + mobile + infra), built-in LSP server for IDE support, VSCode extension, full Vue/Svelte feature parity (store, data, form, realtime, auth, route, model), CSS class prop (Tailwind/Bootstrap), passthrough props (data-*/aria-*), raw block escape hatch, auto useCallback/React.memo, did-you-mean error suggestions, built-in MCP server, AI Bridge, compact mode
v0.1.23 Highlights
Built-in LSP server (diagnostics, autocomplete, hover, go-to-definition, document symbols), VSCode extension with syntax highlighting, Vue/Svelte feature parity (store, data, form, realtime, auth, route, model), 5 new demo apps (blog, CRM, SaaS landing, kanban, admin), 0x-lsp CLI command
v0.1.19 Highlights
Raw block escape hatch (raw: inserts framework code directly), component children syntax, auto useCallback wrapping for fn declarations (React), auto React.memo for components with props, CSS class prop on all elements (Tailwind/Bootstrap), passthrough props (data-*, aria-*, role), did-you-mean typo suggestions with Levenshtein distance
v0.1.15 Highlights
Backend generator (Express.js), React Native generator, Terraform generator (AWS/Vercel/Fly.io), AI Bridge module, compact mode, V3 source maps
License
ISC (free for personal and commercial use)
Requirements
Node.js 18 or later
Source Code
github.com/hankimis/0x-lang
npm Package
npmjs.com/package/0x-lang
Latest Version
0.1.23
AI-First Programming Language v0.1.23

Write 18 lines. Get 96 lines of React.

0x is a full-stack language that compiles to React, Vue, Svelte, Express, React Native, and Terraform.
Designed for AI agents. 80% less code. Zero ambiguity.

See it in action
$ npm install -g 0x-lang Copied!
80% Less Code
6 Output Targets
Zero Runtime Deps
<1s Compile Time
1,767+ Tests Passing

> See the Difference

Write once in 0x. Compile to any framework.

counter.ai 0x 
page Counter:
  state count: int = 0
  derived doubled = count * 2

  fn increment():
    count += 1

  fn decrement():
    count -= 1

  layout col gap=16 padding=24 center:
    text "Counter" size=2xl bold
    text "{count}" size=3xl bold
    text "Doubled: {doubled}"

    layout row gap=8:
      button "-1" style=danger -> decrement()
      button "Reset" -> count = 0
      button "+1" style=primary -> increment()
18 lines 364 chars
compiles to
Counter.jsx React 
import React, { useState, useMemo } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  const doubled = useMemo(
    () => count * 2, [count]
  );
  const increment = () => {
    setCount(prev => prev + 1);
  };
  const decrement = () => {
    setCount(prev => prev - 1);
  };

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: '16px',
      padding: '24px',
      alignItems: 'center',
    }}>
      <span style={{
        fontSize: '32px',
        fontWeight: 'bold',
      }}>Counter</span>
      <span style={{
        fontSize: '40px',
        fontWeight: 'bold',
      }}>{count}</span>
      /* ... styles, buttons, handlers ... */
    </div>
  );
}
96 lines 1,359 chars
React JSX Vue 3 SFC Svelte 5

> Real-World Examples

Production-ready apps in 60–90 lines of 0x. Click to explore.

65 lines shadcn CRUD API Component
blog.ai 0x 
theme shadcn

page Blog:
  type Post = {id: int, title: str, content: str, date: str}

  state posts: list[Post] = []
  state newTitle: str = ""
  state newContent: str = ""
  state loading: bool = true

  derived postCount = posts.length

  api getPosts = GET "/api/posts"
  api createPost = POST "/api/posts"

  on mount:
    posts = await getPosts()
    loading = false

  fn addPost():
    if newTitle.trim() != "" && newContent.trim() != "":
      result = await createPost(title: newTitle, content: newContent)
      posts.push(result)
      newTitle = ""
      newContent = ""

  fn deletePost(id: int):
    posts = posts.filter(p => p.id != id)

  layout col gap=24 padding=32 maxWidth=800 margin=auto:
    // Header
    layout row between center:
      text "Blog" size=3xl bold
      text "{postCount} posts" size=lg color=#666

    // New Post Form
    layout col gap=12 padding=24 radius=12 shadow=md bg=white:
      text "New Post" size=xl bold
      input newTitle placeholder="Post title..."
      input newContent placeholder="Write your content..."
      button "Publish" style=primary -> addPost()

    // Post List
    if loading:
      text "Loading..." center
    else:
      if posts.length == 0:
        text "No posts yet" color=#999 center
      else:
        for post in posts:
          component PostCard(post)

component PostCard:
  prop post: Post

  style card:
    padding: 24
    radius: 12
    shadow: sm
    bg: white

  layout col gap=8 .card:
    layout row between center:
      text post.title size=xl bold
      text post.date size=sm color=#999
    text post.content color=#444
localhost:3000/blog
Blog3 posts
New Post
Getting Started with 0x2026-02-11
A quick guide to writing your first 0x component...
Why AI-First Languages Matter2026-02-10
How 0x reduces token usage by 80% while improving accuracy...
Multi-Framework Compilation2026-02-09
One source file, six output targets. React, Vue, Svelte and more...
81 lines shadcn Dashboard Search Modal
crm.ai 0x 
theme shadcn

page CRM:
  type Customer = {id: int, name: str, email: str, status: str}

  state customers: list[Customer] = []
  state searchQuery: str = ""
  state showAddModal: bool = false
  state newName: str = ""
  state newEmail: str = ""
  state loading: bool = true

  derived filtered = customers.filter(c => c.name.includes(searchQuery))
  derived totalCount = customers.length
  derived activeCount = customers.filter(c => c.status == "active").length

  api getCustomers = GET "/api/customers"
  api createCustomer = POST "/api/customers"

  on mount:
    customers = await getCustomers()
    loading = false

  fn addCustomer():
    if newName.trim() != "" && newEmail.trim() != "":
      result = await createCustomer(name: newName, email: newEmail)
      customers.push(result)
      showAddModal = false

  layout col gap=24 padding=32:
    text "CRM Dashboard" size=3xl bold

    // Stats
    layout grid cols=3 gap=16:
      layout col gap=4 center padding=24 radius=12 shadow=md:
        text "{totalCount}" size=3xl bold
        text "Total" size=sm color=#666
      layout col gap=4 center padding=24 radius=12 shadow=md:
        text "{activeCount}" size=3xl bold color=#27ae60
        text "Active" size=sm color=#666

    // Search & Actions
    layout row gap=12 center:
      input searchQuery placeholder="Search customers..."
      button "Add Customer" style=primary -> showAddModal = true

    // Customer List
    for customer in filtered:
      layout row gap=16 padding=16 radius=8 shadow=sm center:
        layout col grow=1:
          text customer.name size=lg bold
          text customer.email size=sm color=#666
        text customer.status size=sm
localhost:3000/crm
CRM Dashboard
Total Customers
24
Active
18
Inactive
6
CustomerStatusAction
Sarah Chen
sarah@acme.co
active
James Park
james@startup.io
active
Maria Garcia
maria@corp.com
inactive
78 lines shadcn Board Derived Component
kanban.ai 0x 
theme shadcn

page Kanban:
  type Task = {id: int, title: str, status: str}

  state tasks: list[Task] = []
  state newTask: str = ""

  derived todoTasks = tasks.filter(t => t.status == "todo")
  derived doingTasks = tasks.filter(t => t.status == "doing")
  derived doneTasks = tasks.filter(t => t.status == "done")
  derived totalCount = tasks.length

  fn addTask():
    if newTask.trim() != "":
      tasks.push({id: Date.now(), title: newTask, status: "todo"})
      newTask = ""

  fn moveTask(id: int, newStatus: str):
    task = tasks.find(t => t.id == id)
    if task:
      task.status = newStatus

  fn deleteTask(id: int):
    tasks = tasks.filter(t => t.id != id)

  layout col gap=24 padding=32:
    layout row between center:
      text "Kanban Board" size=3xl bold
      text "{totalCount} tasks" size=lg color=#666

    layout row gap=8:
      input newTask placeholder="New task..."
      button "Add" style=primary -> addTask()

    // Board Columns
    layout grid cols=3 gap=16:
      layout col gap=12 padding=16 radius=12 bg=#f0f0f0:
        text "To Do ({todoTasks.length})" size=lg bold color=#e74c3c
        for task in todoTasks:
          component TaskCard(task)
      layout col gap=12 padding=16 radius=12 bg=#f0f0f0:
        text "In Progress ({doingTasks.length})" size=lg bold color=#f39c12
        for task in doingTasks:
          component TaskCard(task)
      layout col gap=12 padding=16 radius=12 bg=#f0f0f0:
        text "Done ({doneTasks.length})" size=lg bold color=#27ae60
        for task in doneTasks:
          component TaskCard(task)

component TaskCard:
  prop task: Task
  layout col gap=8 padding=16 radius=8 shadow=sm bg=white:
    text task.title size=md
    layout row gap=4:
      if task.status != "doing":
        button "Start" size=sm -> moveTask(task.id, "doing")
      if task.status != "done":
        button "Done" size=sm style=primary -> moveTask(task.id, "done")
      button "Delete" size=sm style=danger -> deleteTask(task.id)
localhost:3000/kanban
Kanban Board6 tasks
To Do(2)
Design mockups
Write tests
In Progress(2)
Set up database
Build API routes
Done(2)
Write API docs
Project setup
78 lines shadcn Landing Pricing Nav + Footer
saas-landing.ai 0x 
theme shadcn

page SaasLanding:
  type Feature = {title: str, desc: str, icon: str}

  state features: list[Feature] = []

  on mount:
    features.push({title: "Fast", desc: "Lightning fast builds", icon: "rocket.png"})
    features.push({title: "Secure", desc: "Enterprise-grade security", icon: "shield.png"})
    features.push({title: "Scalable", desc: "Scales to enterprise", icon: "chart.png"})

  layout col:
    // Nav
    layout row between center padding=24 bg=white shadow=sm:
      text "LaunchPad" size=xl bold
      layout row gap=24 center:
        link "Features" href="#features"
        link "Pricing" href="#pricing"
        button "Get Started" style=primary

    // Hero
    layout col gap=16 padding=64 center:
      text "Build Products Faster" size=4xl bold
      text "The all-in-one platform for modern teams." size=lg color=#666
      layout row gap=12 center:
        button "Start Free" style=primary
        button "Learn More" style=outline

    // Features Grid
    layout col gap=24 padding=48:
      text "Features" size=3xl bold center
      layout grid cols=3 gap=24:
        for feature in features:
          layout col gap=12 padding=24 radius=12 shadow=md center:
            image feature.icon width=64 height=64
            text feature.title size=xl bold
            text feature.desc color=#666 center

    // Pricing
    layout col gap=24 padding=48:
      text "Pricing" size=3xl bold center
      layout grid cols=3 gap=24:
        layout col gap=16 padding=32 radius=12 shadow=md center:
          text "Starter" size=xl bold
          text "$0/mo" size=3xl bold
          text "1 project" size=sm color=#666
          button "Get Started" style=outline
        layout col gap=16 padding=32 radius=12 shadow=md center:
          text "Pro" size=xl bold
          text "$29/mo" size=3xl bold
          text "10 projects" size=sm color=#666
          button "Choose Pro" style=primary
localhost:3000
LaunchPad
FeaturesPricing
Build Products Faster
The all-in-one platform for modern teams.
Features
🚀
Fast
Lightning fast builds
🛡
Secure
Enterprise-grade security
📈
Scalable
Scales to enterprise
Pricing
Starter
$0/mo
1 project
Popular
Pro
$29/mo
10 projects
Enterprise
$99/mo
Unlimited
92 lines shadcn Sidebar Table Tabs
admin.ai 0x 
theme shadcn

page Admin:
  type User = {id: int, name: str, email: str, role: str, active: bool}

  state users: list[User] = []
  state activeTab: str = "users"
  state searchQuery: str = ""
  state loading: bool = true

  derived filteredUsers = users.filter(u => u.name.includes(searchQuery))
  derived totalUsers = users.length
  derived activeUsers = users.filter(u => u.active).length
  derived adminCount = users.filter(u => u.role == "admin").length

  api getUsers = GET "/api/users"
  api deleteUserApi = DELETE "/api/users/{id}"
  api updateUser = PUT "/api/users/{id}"

  on mount:
    users = await getUsers()
    loading = false

  fn deleteUser(id: int):
    await deleteUserApi(id: id)
    users = users.filter(u => u.id != id)

  fn toggleStatus(id: int):
    user = users.find(u => u.id == id)
    if user:
      user.active = !user.active

  layout row height=100vh:
    // Sidebar
    layout col gap=8 padding=24 bg=#2c3e50 width=240:
      text "Admin Panel" size=xl bold color=white
      layout col gap=4:
        button "Users" -> activeTab = "users"
        button "Settings" -> activeTab = "settings"
        button "Logs" -> activeTab = "logs"

    // Main Content
    layout col gap=24 padding=32 grow=1:
      if activeTab == "users":
        layout grid cols=3 gap=16:
          layout col gap=4 padding=24 radius=12 shadow=md:
            text "{totalUsers}" size=3xl bold color=#3498db
            text "Total Users" size=sm color=#666
          layout col gap=4 padding=24 radius=12 shadow=md:
            text "{activeUsers}" size=3xl bold color=#27ae60
            text "Active" size=sm color=#666

        input searchQuery placeholder="Search users..."

        for user in filteredUsers:
          layout row gap=16 padding=12 center shadow=sm radius=4:
            text user.name grow=1
            text user.email grow=1 color=#666
            text user.role size=sm
            layout row gap=4:
              button "Toggle" size=sm -> toggleStatus(user.id)
              button "Delete" size=sm style=danger -> deleteUser(user.id)
localhost:3000/admin
Admin Panel
Total Users
42
Active
38
Admins
5
NameEmailRoleStatusActions
Alice Kimalice@corp.comadminActive
Bob Leebob@dev.iouserActive
Carol Wangcarol@org.couserInactive

All examples compile to React, Vue 3, and Svelte 5 with zero changes. Add theme shadcn for shadcn/ui, MUI, Ant Design, or Chakra UI output. View all on GitHub →

> Built for AI

Every design decision optimizes for token efficiency and generation accuracy.

80% Less Code

18 lines of 0x replaces 96 lines of production React. AI generates less, you ship faster.

Zero Ambiguity

Indentation-based, declarative syntax eliminates the structural choices that cause AI hallucinations.

Multi-Target

One source file compiles to React JSX, Vue 3 SFC, and Svelte 5 simultaneously.

MCP Integration

Built-in MCP server for Claude and Cursor. AI agents compile 0x directly in their workflow. Try on Smithery

Zero Dependencies

Pure TypeScript compiler with no runtime dependencies. Fast, portable, predictable.

Full Language

State, derived values, types, functions, layouts, control flow, lifecycle hooks, APIs, and validation.

Source Maps

Source line mapping comments link generated code back to your 0x source. Debug with confidence.

SSR Ready

Auto 'use client' for Next.js App Router. Generated code works with SSR out of the box.

Design Systems

One line: theme shadcn. Auto-generates shadcn/ui, MUI, Ant Design, or Chakra UI components instead of plain HTML.

Backend Gen

Compile to Express.js servers with JWT auth, CRUD routes, middleware, background jobs, and caching.

React Native

Same 0x syntax compiles to React Native with View, StyleSheet, and native mobile components.

Terraform

Generate HCL infrastructure code for AWS, Vercel, Fly.io, Docker, GCP, and Cloudflare.

AI Bridge

Built-in language spec, prompt generation, and skeleton creation for AI agent integration.

Compact Mode

AI-optimized output that strips comments and minimizes whitespace for minimal token usage.

CSS Classes

Use class="..." on any element. Works with Tailwind, Bootstrap, or any CSS framework.

Passthrough Props

data-testid, aria-label, role pass through as HTML attributes automatically.

Did You Mean?

Typo suggestions powered by Levenshtein distance. "pge" → Did you mean 'page'?

Auto Optimize

React: fn → useCallback, derived → useMemo, components → React.memo. Zero manual work.

LSP / IDE Support

Built-in Language Server: autocomplete, hover docs, go-to-definition, diagnostics. VSCode extension included.

Full Parity

Vue 3 and Svelte 5 support every feature React has: store, data, form, realtime, auth, route, model.

> How It Works

From .ai source to production code in milliseconds.

1

.ai Source

Write declarative 0x code with zero boilerplate

2

Tokenize

Lexer splits source into typed tokens

3

Parse

Build typed AST from token stream

4

Validate

Type-check and verify semantic correctness

5

Generate

React Vue Svelte Express RN Terraform

> Benchmarks

0x source vs production TypeScript React with full styling.

0%
Average Code Reduction
Write 18 lines of 0x. Get 96 lines of React.
Component 0x React Saved Reduction
counter.ai 18 lines 96 lines 81%
todo.ai 24 lines 136 lines 82%
dashboard.ai 37 lines 185 lines 80%
chat.ai 31 lines 155 lines 80%
ecommerce.ai 44 lines 210 lines 79%

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

> 0x vs Traditional Frameworks

Why AI agents choose 0x over writing raw JSX, Vue templates, or Svelte code.

Without 0x
  • 96 lines for a counter component
  • AI must choose between 20+ React patterns
  • Separate tools for frontend, backend, mobile, infra
  • Manual useCallback, useMemo, React.memo
  • Styling decisions cause hallucinations
With 0x
  • 18 lines — same functionality
  • One syntax, zero ambiguity
  • 6 targets — frontend, backend, mobile, infra
  • Auto useCallback + React.memo optimization
  • Tailwind, Bootstrap, or built-in styles

> What Developers Say

Early adopters on building with 0x.

"

The token efficiency is insane. My AI agent generates a full dashboard in 0x with half the tokens it would take in React. Less hallucination, faster iteration.

JK
James K.
AI/ML Engineer
"

Write once, get React AND Vue output? I migrated our component library's prototypes to 0x and cut our design-to-code time by 70%.

SL
Sarah L.
Frontend Lead
"

New hires were writing production components in 0x within hours, not days. The syntax is so intuitive that onboarding friction basically disappeared.

MP
Mike P.
Engineering Manager
"

As a solo dev, 0x is a game changer. I ship features 3x faster because I'm writing 80% less code. The MCP integration with Cursor is chef's kiss.

AR
Alex R.
Indie Developer

> Get Started in 30 Seconds

1

Install

npm install -g 0x-lang
2

Create

0x init my-app && cd my-app
3

Compile

0x build src/counter.ai --target react

> What is 0x?

0x is an open-source, AI-first full-stack programming language designed to compile into production-ready React, Vue 3, Svelte 5, Express.js backends, React Native mobile apps, and Terraform infrastructure. Instead of writing verbose boilerplate, developers write concise, declarative 0x code — and the compiler generates framework-specific output with full styling, state management, APIs, and infrastructure.

Created for the age of AI-assisted development, 0x uses an indentation-based syntax that eliminates the structural choices (curly braces, closing tags, import statements) that cause AI hallucinations. The result: AI agents generate 80% fewer tokens with higher accuracy. 0x includes a built-in MCP server for seamless integration with Claude and Cursor.

Whether you're a solo developer doing rapid prototyping, a team shipping multi-framework components, or an AI agent builder looking for a token-efficient intermediate representation — 0x covers your entire stack: frontend, backend, mobile, and infrastructure. Install with npm install -g 0x-lang and start compiling in under 30 seconds.

> What's New

Recent improvements to the 0x compiler.

v0.1.23

LSP/IDE Support & Vue/Svelte Parity

  • LSP server — Diagnostics, autocomplete, hover, go-to-definition, document symbols for .ai files
  • VSCode extension — Syntax highlighting (73+ keywords), bracket matching, integrated language intelligence
  • Vue/Svelte parity — 8 features now fully supported: store, data, form, realtime, auth, route, model
  • 5 new demos — Blog, CRM, SaaS landing, Kanban board, Admin panel (all compile to React/Vue/Svelte)
  • CLI — 0x-lsp --stdio command for any LSP-compatible editor
v0.1.19

DX & Performance Optimization

  • Raw block — raw: inserts framework-specific JSX/template code directly (escape hatch)
  • Component children — component Dialog(title="Hi"): wraps children inside component tags
  • useCallback auto-wrap — All fn declarations wrapped in useCallback with extracted deps (React)
  • React.memo auto-wrap — Components with props auto-wrapped for render optimization
  • CSS classes — class="tailwind-class" on all elements, works with Tailwind/Bootstrap
  • Passthrough props — data-testid, aria-label, role pass through as HTML attributes
  • Did you mean? — Typo suggestions with Levenshtein distance: "pge" → Did you mean 'page'?
v0.1.15

Full-Stack Compilation

  • Backend generator — Express.js server with JWT auth, CRUD routes, middleware, caching
  • React Native generator — Mobile apps with View, StyleSheet, native components
  • Terraform generator — IaC for AWS, Vercel, Fly.io, Docker, GCP, Cloudflare
  • AI Bridge — Language spec, prompt generation, skeleton creation for AI agents
  • Compact mode — AI-optimized output, strips comments and whitespace
  • V3 Source Maps — Inline base64 source maps for debugging
v0.1.13

Production-Ready Output

  • Source line mapping — {/* 0x:L5 */} comments trace generated code back to 0x source
  • Auto 'use client' — Next.js App Router SSR support, auto-detected from hook usage
  • Smart imports — Only import React hooks that are actually used
  • CompileOptions — New sourceMap and useClient options for output control
v0.1.12

Code Quality

  • Conditional rendering — React show/hide uses {cond && (...)} instead of CSS display:none
  • Chart optimization — Bar chart maxVal extracted outside .map() (O(n) vs O(n²))
  • Gallery keys — Content-based keys img ?? i instead of array index
  • Parser errors — Nearby token context for better debugging
v0.1.11

Language Features

  • Template literals — Backtick strings with ${expr} interpolation
  • let declarations — let x = 10 in page/component body
  • External imports — import, use ... from, js { } blocks
  • Form improvements — Optional colon syntax, button post-action props

> Frequently Asked Questions

Everything you need to know about 0x.

What is 0x programming language?

0x is an AI-first, declarative programming language that compiles to React JSX, Vue 3 SFC, and Svelte 5 components. It uses indentation-based syntax designed to minimize token usage and eliminate ambiguity for AI code generation. 18 lines of 0x produces 96 lines of production React code. It's open-source under the ISC license and available on npm as 0x-lang.

How do I install 0x?

Install globally via npm: npm install -g 0x-lang. Then create a project with 0x init my-app, and compile with 0x build src/counter.ai --target react. Requires Node.js 18+. Zero runtime dependencies.

What frameworks does 0x compile to?

0x compiles to 6 targets: React (JSX + hooks), Vue 3 (SFC + Composition API), Svelte 5 (runes), Express.js (backend API with JWT auth, CRUD, middleware), React Native (mobile apps with StyleSheet), and Terraform (infrastructure-as-code for AWS, Vercel, Fly.io, Docker, GCP). One source file targets any or all simultaneously.

How much code does 0x save?

On average, 0x reduces code by 80%. A counter takes 18 lines vs 96 in React (81% reduction). A todo app takes 24 vs 136 lines (82%). A dashboard takes 37 vs 185 lines (80%). These are benchmarked against production TypeScript React with full inline styling.

Can I use 0x with Claude or Cursor?

Yes. 0x has a built-in MCP (Model Context Protocol) server that integrates with Claude Desktop and Cursor. Add the 0x MCP server to your config, and AI agents can compile 0x code directly. Also available via Smithery for easy setup.

How does 0x compare to JSX?

Unlike JSX, 0x has no closing tags, no curly braces, no import statements, and no boilerplate hooks. The compiler handles all of that. 0x is also framework-agnostic — the same source compiles to React, Vue, and Svelte — whereas JSX only works with React. 0x also includes built-in layout primitives (col, row, grid) that eliminate manual CSS.

Does 0x support debugging generated code?

Yes. Since v0.1.23, 0x adds source line mapping comments to generated code. Each UI element includes a {/* 0x:L5 */} (React) or <!-- 0x:L5 --> (Vue/Svelte) comment linking back to the original 0x source line. This makes it easy to trace runtime errors back to your 0x code. You can disable source maps with the sourceMap: false compile option.

Does 0x work with Next.js or Nuxt?

Yes. For React targets, 0x automatically adds the 'use client' directive when client-side hooks (useState, useEffect, useRef, useCallback) are used, enabling seamless Next.js App Router SSR support. For Vue targets, the output is standard SFC compatible with Nuxt. You can control this with the useClient compile option.

Can I use external JavaScript libraries with 0x?

Yes. 0x supports three ways to integrate external libraries: import { Chart } from 'chart.js' for ES imports, use myHook from './hooks' for custom hooks, and js { ... } or js: blocks for inline JavaScript. This lets you use any npm package alongside 0x's declarative syntax.

How optimized is the generated React code?

0x generates production-quality React code: conditional rendering with {cond && (...)} instead of CSS display:none, content-based keys instead of array indices, extracted style constants to reduce duplication, optimized chart computations (O(n) instead of O(n²)), and smart imports that only include hooks you actually use. The output passes ESLint and React strict mode.

Is 0x free?

Yes. 0x is 100% free and open-source under the ISC license. Free for personal and commercial use. Source code on GitHub. Published on npm as 0x-lang.

Can 0x generate backend servers?

Yes. The backend target compiles to a full Express.js server with JWT authentication, CRUD routes, middleware, background jobs (Bull queues), caching (Redis), webhooks, S3 file storage, database migrations, and health checks. Use 0x build server.ai --target backend.

Can 0x build mobile apps?

Yes. The react-native target compiles to React Native components with View, Text, TouchableOpacity, TextInput, StyleSheet, and native modals. Same 0x syntax you use for web — just change the target flag to --target react-native.

Can 0x generate infrastructure code?

Yes. The terraform target generates HCL configuration files with provider blocks, resource definitions, and variable declarations. Supports AWS (EC2, S3, Route53, CloudFront, ElastiCache), Vercel, Fly.io, Docker, GCP, Cloudflare, Datadog, and Sentry. Use 0x build infra.ai --target terraform.

Does 0x work with Tailwind CSS or Bootstrap?

Yes. Since v0.1.17, 0x supports a class prop on all UI elements. Use class="container mx-auto p-4" on layouts, class="text-xl font-bold" on text, etc. React outputs className, Vue/Svelte output class. You can combine class with 0x's built-in styles. Unknown props like data-testid and aria-label also pass through as HTML attributes.

Does 0x auto-optimize React performance?

Yes. The React generator automatically wraps fn declarations in useCallback with extracted dependencies, derived values in useMemo, and components with props in React.memo. No manual optimization needed — the compiler handles it all, eliminating unnecessary re-renders without any developer effort.

Does 0x have IDE / editor support?

Yes. Since v0.1.23, 0x includes a built-in LSP (Language Server Protocol) server that provides real-time diagnostics, autocomplete, hover documentation, go-to-definition, and document symbols. A VSCode extension is available with syntax highlighting for all 73+ keywords and integrated language intelligence. The LSP server works with any editor that supports LSP — run 0x-lsp --stdio and connect your editor's LSP client.

Do Vue and Svelte have the same features as React?

Yes. Since v0.1.23, all three targets have full feature parity. Vue 3 and Svelte 5 generators support every Phase 2 feature: store (localStorage persistence), data (async fetching with loading/error), form (validation + submit), realtime (WebSocket), auth (login/signup/guards), route (routing config), and model (CRUD API). Each uses idiomatic patterns for its framework.

Can I use framework-specific code with 0x?

Yes. The raw: block is an escape hatch that inserts code directly into JSX/template output. Use it for third-party components, custom directives, or framework-specific code that 0x doesn't abstract. Example: raw: <CustomComponent onSpecialEvent={handler} />. For JavaScript in the script section, use js: blocks instead.

Ready to write less
and ship more?

Join the community building the future of AI-driven development.

Star on GitHub View on npm