![\"0x](\"website/assets/0xlogo.svg\")
\n\n \n
\n Write 18 lines. Get 96 lines of production React.
\n A full-stack language that compiles to React, Vue 3, Svelte 5, Express, React Native, and Terraform.
\n Now with LSP/IDE support and full Vue/Svelte feature parity.\n
\n ![\"npm\"](\"https://img.shields.io/npm/v/0x-lang.svg?style=flat-square&color=00e5cc&label=npm\")
\n ![\"downloads\"](\"https://img.shields.io/npm/dm/0x-lang.svg?style=flat-square&color=7c3aed&label=downloads\")
\n ![\"License\"](\"https://img.shields.io/badge/license-ISC-blue.svg?style=flat-square\"){kind=icon}
\n \n
\n Website · Quick Start · Docs · npm · MCP Server · Smithery Server\n
\n\n---\n\n## What is this?\n\n0x 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.\n\n```python\npage Counter:\n state count: int = 0\n\n fn increment():\n count += 1\n\n layout col gap=16 padding=24 center:\n text \"Counter\" size=2xl bold\n text \"{count}\" size=4xl color=cyan\n button \"+1\" style=primary -> increment()\n```\n\nThat'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.\n\n**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.\n\n## The numbers\n\n| Component | 0x | React | You save |\n|:---|:---:|:---:|:---:|\n| Counter | 18 lines | 96 lines | **81%** |\n| Todo App | 24 lines | 136 lines | **82%** |\n| Dashboard | 37 lines | ~185 lines | **80%** |\n| Chat App | 31 lines | ~155 lines | **80%** |\n| E-commerce | 44 lines | ~210 lines | **79%** |\n\n> Compared against production TypeScript React with full inline styling, types, and component structure.\n\n## Quick Start\n\n```bash\nnpm install -g 0x-lang\n```\n\nCreate a file called `hello.ai`:\n\n```python\npage Hello:\n state name: str = \"World\"\n\n layout col gap=16 padding=24 center:\n text \"Hello, {name}!\" size=3xl bold\n input name placeholder=\"Your name\"\n```\n\nCompile it:\n\n```bash\n# Frontend\n0x build hello.ai --target react\n0x build hello.ai --target vue\n0x build hello.ai --target svelte\n\n# Mobile\n0x build app.ai --target react-native\n\n# Backend\n0x build server.ai --target backend\n\n# Infrastructure\n0x build infra.ai --target terraform\n\n# Or multiple at once\n0x build hello.ai --target react,vue,svelte\n```\n\n### Scaffold a project\n\n```bash\n0x init my-app\ncd my-app\n0x build src/counter.ai --target react\n```\n\n### Watch mode\n\n```bash\n0x dev counter.ai --target react\n```\n\nFile changes auto-recompile.\n\n---\n\n## Examples\n\n### Todo App — 24 lines\n\n```python\npage Todo:\n type Item = {id: int, text: str, done: bool}\n\n state items: list[Item] = []\n state input: str = \"\"\n derived remaining = items.filter(i => !i.done).length\n\n fn add():\n if input.trim() != \"\":\n items.push({id: Date.now(), text: input, done: false})\n input = \"\"\n\n fn remove(id: int):\n items = items.filter(i => i.id != id)\n\n layout col gap=16 padding=24 maxWidth=600 margin=auto:\n text \"Todo ({remaining} remaining)\" size=2xl bold\n\n layout row gap=8:\n input input placeholder=\"What needs to be done?\"\n button \"Add\" style=primary -> add()\n\n for item in items:\n layout row gap=8 center:\n toggle item.done\n text item.text strike={item.done}\n button \"Delete\" style=danger size=sm -> remove(item.id)\n\n if items.length == 0:\n text \"Nothing to do\" color=#999 center\n```\n\nTypes, filtering, conditional rendering, two-way binding — all handled. Compiles to 136 lines of production React.\n\n### Dashboard with API calls — 37 lines\n\n```python\npage Dashboard:\n type Metric = {label: str, value: float, change: float}\n\n state metrics: list[Metric] = []\n state period: str = \"week\"\n state loading: bool = true\n\n api getMetrics = GET \"/api/metrics\"\n\n on mount:\n metrics = await getMetrics(period: period)\n loading = false\n\n watch period:\n loading = true\n metrics = await getMetrics(period: period)\n loading = false\n\n layout col gap=24 padding=32:\n layout row between center:\n text \"Dashboard\" size=3xl bold\n select period options=[\"day\", \"week\", \"month\", \"year\"]\n\n if loading:\n text \"Loading...\" center\n else:\n layout grid cols=3 gap=16:\n for metric in metrics:\n component MetricCard(metric)\n\ncomponent MetricCard:\n prop metric: Metric\n\n derived isPositive = metric.change >= 0\n derived changeColor = isPositive ? \"green\" : \"red\"\n\n layout col gap=8 padding=24 radius=12 shadow=md bg=white:\n text metric.label size=sm color=#666\n text \"{metric.value}\" size=2xl bold\n text \"{isPositive ? '↑' : '↓'} {metric.change}%\" size=sm color={changeColor}\n```\n\nAsync data fetching, loading states, watchers, grid layouts, reusable child components.\n\n### Chat App — 31 lines\n\n```python\npage Chat:\n type Message = {id: int, text: str, sender: str, time: datetime}\n\n state messages: list[Message] = []\n state input: str = \"\"\n state username: str = \"Me\"\n\n fn send():\n if input.trim() != \"\":\n messages.push({id: Date.now(), text: input, sender: username, time: now()})\n input = \"\"\n\n layout col height=100vh:\n layout row center padding=16 bg=#075e54:\n text \"Chat\" size=lg bold color=white\n\n layout col gap=8 padding=16 scroll=y grow=1:\n for msg in messages:\n layout row {msg.sender == username ? \"end\" : \"start\"}:\n layout col padding=12 radius=12 maxWidth=\"70%\" bg={msg.sender == username ? \"#dcf8c6\" : \"white\"} shadow=sm:\n text msg.text\n text msg.time.format(\"HH:mm\") size=xs color=#999 end\n\n layout row gap=8 padding=16 bg=#f0f0f0:\n input input placeholder=\"Type a message...\" grow=1\n button \"Send\" style=primary -> send()\n```\n\n### E-commerce — 44 lines\n\n```python\npage Shop:\n type Product = {id: int, name: str, price: float, image: str}\n type CartItem = {product: Product, qty: int}\n\n state products: list[Product] = []\n state cart: list[CartItem] = []\n state search: str = \"\"\n state loading: bool = true\n\n derived filteredProducts = products.filter(p => p.name.includes(search))\n derived cartTotal = cart.reduce((sum, item) => sum + item.product.price * item.qty, 0)\n derived cartCount = cart.reduce((sum, item) => sum + item.qty, 0)\n\n api getProducts = GET \"/api/products\"\n\n on mount:\n products = await getProducts()\n loading = false\n\n fn addToCart(product: Product):\n existing = cart.find(item => item.product.id == product.id)\n if existing:\n existing.qty += 1\n else:\n cart.push({product: product, qty: 1})\n\n fn removeFromCart(productId: int):\n cart = cart.filter(item => item.product.id != productId)\n\n layout col gap=24 padding=32:\n layout row between center:\n text \"Shop\" size=3xl bold\n layout row gap=8 center:\n text \"Cart ({cartCount})\" size=lg\n text \"${cartTotal}\" size=lg bold color=#e74c3c\n\n input search placeholder=\"Search products...\"\n\n if loading:\n text \"Loading...\" center\n else:\n layout grid cols=3 gap=16:\n for product in filteredProducts:\n layout col gap=8 padding=16 radius=12 shadow=md bg=white:\n image product.image width=\"100%\" height=200\n text product.name size=lg bold\n text \"${product.price}\" size=md color=#e74c3c\n button \"Add to Cart\" style=primary -> addToCart(product)\n```\n\n### Backend API — Express server\n\n```python\npage API:\n model User:\n field name: str\n field email: str\n field role: str = \"user\"\n\n auth:\n secret: JWT_SECRET\n endpoint: /auth\n\n route GET /api/users:\n users = await db.find(\"users\")\n respond 200 users\n\n route POST /api/users:\n user = await db.create(\"users\", body)\n respond 201 user\n\n env:\n DATABASE_URL: \"postgres://localhost/mydb\"\n JWT_SECRET: secret\n```\n\nCompiles to a full Express.js server with JWT auth, CORS, error handling, and CRUD routes.\n\n### React Native Mobile App\n\n```python\npage MobileCounter:\n state count: int = 0\n\n fn increment():\n count += 1\n\n layout col gap=16 padding=24 center:\n text \"Counter\" size=2xl bold\n text \"{count}\" size=4xl color=cyan\n button \"+1\" style=primary -> increment()\n```\n\nSame 0x syntax compiles to React Native with `View`, `Text`, `TouchableOpacity`, and `StyleSheet`.\n\n### Infrastructure — Terraform\n\n```python\npage Infra:\n deploy myApp:\n provider: aws\n region: us-east-1\n instance: t3.medium\n\n storage assets:\n provider: s3\n bucket: my-app-assets\n versioning: true\n\n domain mysite:\n provider: route53\n name: \"myapp.com\"\n```\n\nCompiles to Terraform HCL with provider blocks, resource definitions, and variable declarations.\n\n### Blog App — 64 lines\n\n```python\npage Blog:\n state posts: list[Post] = []\n state loading: bool = true\n\n data posts from fetch(\"/api/posts\")\n\n layout col gap=24 padding=32:\n nav \"BlogApp\" links=[\"Home\", \"Write\", \"About\"]\n hero \"My Blog\" subtitle=\"Thoughts and tutorials\"\n\n for post in posts:\n component PostCard(post)\n```\n\nFull CRUD blog with data fetching, auth, routing, and reusable components.\n\n### CRM Dashboard — 80 lines\n\n```python\npage CRM:\n data customers from fetch(\"/api/customers\")\n state search: str = \"\"\n derived filtered = customers.filter(c => c.name.includes(search))\n\n layout col gap=24 padding=32:\n text \"CRM Dashboard\" size=3xl bold\n input search placeholder=\"Search customers...\"\n\n layout grid cols=3 gap=16:\n stat \"Total\" value={customers.length}\n stat \"Active\" value={customers.filter(c => c.active).length}\n stat \"Revenue\" value=\"$12,500\"\n\n table filtered columns=[\"name\", \"email\", \"status\", \"revenue\"]\n```\n\nCRM with search, stats, filterable table, and modal forms.\n\n### SaaS Landing — 77 lines, Kanban Board — 77 lines, Admin Panel — 91 lines\n\nSee all 10 examples in [`examples/`](examples/).\n\n---\n\n## IDE / Editor Support\n\n0x includes a built-in **Language Server Protocol (LSP)** server for IDE integration.\n\n### VSCode Extension\n\nInstall the 0x VSCode extension for:\n- **Syntax highlighting** — all 73+ keywords color-coded\n- **Autocomplete** — context-aware keyword and identifier completion\n- **Hover info** — documentation for keywords, types for variables\n- **Go to definition** — jump to state, fn, prop declarations\n- **Document outline** — page, component, state, fn in the sidebar\n- **Real-time diagnostics** — parse and validation errors as you type\n\n### Other Editors\n\nThe LSP server works with any editor that supports LSP:\n\n```bash\n# Start the LSP server\n0x-lsp --stdio\n```\n\nConfigure your editor's LSP client to connect to `0x-lsp --stdio` for `.ai` files.\n\n---\n\n## Language Reference\n\n### Top-level declarations\n\n```python\npage PageName: # Page component (has routing)\ncomponent ComponentName: # Reusable component\napp AppName: # App root\n```\n\n### State\n\n```python\nstate count: int = 0 # Reactive state\nstate items: list[Item] = [] # Typed list\nderived total = price * quantity # Auto-computed\nprop title: str = \"Default\" # External prop\n```\n\n### Types\n\n```python\ntype Item = {id: int, text: str, done: bool}\ntype User = {name: str, email: str, age: optional[int]}\n```\n\nBuilt-in: `int`, `float`, `str`, `bool`, `list[T]`, `optional[T]`, `datetime`, `object`\n\n### Functions\n\n```python\nfn increment():\n count += 1\n\nfn add(text: str):\n items.push({id: Date.now(), text: text, done: false})\n\nasync fn fetchData():\n data = await api.getData()\n```\n\n### Layout\n\n```python\nlayout col gap=16 padding=24: # Vertical (flexbox column)\nlayout row gap=8 center: # Horizontal (flexbox row)\nlayout grid cols=3 gap=16: # CSS Grid\n```\n\nProps: `gap`, `padding`, `margin`, `center`, `between`, `end`, `wrap`, `grow`, `maxWidth`, `bg`, `radius`, `shadow`, `scroll`\n\n### UI Elements\n\n```python\ntext \"Hello\" size=2xl bold color=#333 # Text\ntext \"{variable}\" size=lg # Dynamic text\nbutton \"Click\" style=primary -> action() # Button with handler\nbutton \"Set\" -> count = 0 # Inline mutation\ninput binding placeholder=\"Type...\" # Two-way binding\ntoggle binding # Toggle switch\nselect binding options=[\"a\", \"b\", \"c\"] # Dropdown\nimage src width=100 height=100 # Image\nlink \"Click here\" href=\"/path\" # Link\n```\n\n### Styling\n\n```python\ntext \"Big\" size=2xl bold color=blue # Inline props\nbutton \"Go\" style=primary size=lg rounded=full # Presets\n\nstyle card: # Named style block\n padding: 24\n radius: 12\n shadow: md\n bg: white\n\nlayout col .card: # Apply named style\n text \"Inside a card\"\n```\n\nSizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`\n 0xlang.com · GitHub · npm · Smithery · Smithery Server\n
\n","readmeFilename":"README.md"}