🧵 Loom

The Framework-Agnostic UI Language

Compile one component to React, Vue, and Svelte with zero boilerplate.

Loom is a unified component authoring language that eliminates framework-specific noise. By moving logic into declarative zones and using a clean, indentation-based template, Loom allows you to focus on your UI while generating native, high-performance code for any target.

✨ Why Loom?

• 🚀 Write Once, Run Everywhere: Author your UI once and ship it to React, Vue, or Svelte.
• 🦀 Rust-Powered Core: Blazing fast compilation and strict semantic validation.
• 🧩 Unified Reactivity: Use - state and - computed zones to manage data without framework hooks or boilerplate.
• 🏗️ Dimension-Driven UI: Explicit blocks for Data (:), Style (::), and Behavior (@).
• 🤖 AI-Native Tooling: Built-in "projection-and-patch" workflows optimized for LLM-assisted development.
• ⚡ Zero-Runtime Overhead: Compiles to standard framework code with no heavy runtime library.

---

🎨 The "Loom Way"

Write components that describe what they do, not how the framework handles it.

- props
  title: string
  initialCount: number = 0

- state
  count: number = initialCount

- computed
  isBig = count > 10

- view
  div.counter-card
    ::
      padding: 1.5rem;
      border: 1px solid {isBig ? 'red' : '#ddd'};
      border-radius: 8px;

    h2 {title}
    
    button
      @click
        count++
      + Increment
    
    span Current count: {count}
    
    if isBig
      p.warning THAT IS A BIG NUMBER!

---

🛠️ Ecosystem Overview

Loom is more than just a compiler; it's a complete toolkit for modern UI development.

Package	Purpose	Status
packages/compiler	Core TS/Rust compiler & Codegen	Stable
packages/loom_core	High-performance Rust parser & indexer	Stable
packages/vite-plugin-loom	Seamless Vite integration	Stable
packages/loom-llm	AI-safe projection & patch tooling	Stable
packages/loom-testing	Framework-agnostic test helpers	Stable
packages/codemod	Automated React-to-Loom migration	Stable
packages/loom-tailwind	Static Tailwind CSS extraction	Stable
packages/loomkit	Meta-framework primitives (Routing/SSR)	Alpha
packages/ui	Headless UI primitives	Alpha

---

🚀 Quick Start

Ensure you have pnpm installed.

# Clone and install
git clone https://github.com/xFrighes/loom.git
cd loom
pnpm install

# Run the full health check (tests, typecheck, build)
pnpm run verify

Development Workflow

# Run tests for the compiler
pnpm --filter @loom-ui/compiler test

# Build all packages
pnpm -r build

# Try the demos
cd examples/react-demo && pnpm dev

📚 Documentation

• Syntax guide
• Incremental adoption overview
• Migration guide hub
• React migration
• Vue migration
• Svelte migration
• Architecture specs

🚧 Status

Loom is currently in Beta (0.1.0). The core language and major bundler integrations are stable and ready for experimentation. We are actively working on LoomKit (SSR/Routing) and Headless UI components.

Check TODO.md for the detailed roadmap.

---

Built with ❤️ by the Loom Team.