Coi

A modern, component-based language for building reactive web apps.
Type-safe. Fast. WASM-powered.

Components with native performance. Fine-grained reactivity, zero internal GC pauses, tiny bundles.

Coi is designed for building reactive, interactive web applications:

• Web Apps: Dashboards, admin panels, SPAs with real-time updates
• Canvas Apps: Drawing tools, image editors, animations, or games
• Computation-Heavy Apps: Simulations, data processing, physics engines, where WASM shines
• Content Sites: Blogs, documentation sites, landing pages with dynamic components

Coi gives you composable components, fine-grained reactivity, type safety, and tiny bundle sizes.

• Bundle Size Matters: In our counter app example, Coi is 40% smaller than Svelte, 72% smaller than Vue, and 88% smaller than React (see benchmarks). Faster downloads, faster startup, better mobile experience.
• Animations & Real-Time Apps: No garbage collection pauses means consistent 60fps animations and responsive interactions. Perfect for dashboards, games, and live data apps.
• Type Safety from Day One: Catch bugs at compile-time, not runtime. Props, state, and platform APIs are fully typed.
• No Virtual DOM: Coi uses a fine-grained reactive system. Instead of "diffing" a virtual tree in JS, the compiler generates direct, surgical DOM updates triggered by WASM logic. This eliminates VDOM overhead and minimizes the work the browser has to do.
• WASM Performance: Computation-heavy features run at native speed. Great for simulations, physics, data processing, and canvas-based apps.
• One Codebase, Multiple Platforms (Roadmap): Web today, native platforms and server-side Coi tomorrow. Full-stack with a single language.

• Strict Typing: Compile-time error checking with strongly typed parameters and state.
• Reference Parameters: Pass state by reference with & for seamless parent-child synchronization.
• Move Semantics: Explicit ownership transfer with : to prevent accidental copying.
• Private by Default: Component members are private; use pub to expose them.

• Component-Based: Composable, reusable components with props, state, and lifecycle blocks.
• Integrated DOM & Styling: Write HTML elements and scoped CSS directly in components.
• View Control Flow: Declarative <if>, <else>, <for> tags for conditional rendering and iteration.
• Component Lifecycle: Built-in init {}, mount {}, and tick {} blocks for setup and animations.
• Type-Safe Platform APIs: Full type safety for Canvas, Storage, Audio, Fetch, and other browser APIs.
• Editor Extensions: Syntax highlighting and completions available for VS Code, Sublime Text, and Zed.

// Type-safe enum
enum Status { Todo, Done }

// Define a data structure
pod Task {
    int id;
    string text;
    Status status;
}

component App {
    mut Task[] tasks;
    mut int nextId = 0;

    init {
        tasks.push(Task{nextId++, "Learn Coi", Status::Done});
        tasks.push(Task{nextId++, "Build something cool", Status::Todo});
    }

    def add(string text) : void {
        tasks.push(Task{nextId++, text, Status::Todo});
    }
    
    def toggle(int id) : void {
        for task in tasks {
            if (task.id == id) {
                task.status = match (task.status) {
                    Status::Todo => Status::Done;
                    Status::Done => Status::Todo;
                };
            }
        }
    }

    style {
        .app { padding: 24px; font-family: system-ui; }
        .done { text-decoration: line-through; color: #999; }
    }

    view {
        <div class="app">
            <h1>Tasks ({tasks.size()})</h1>
            <for task in tasks key={task.id}>
                <div onclick={toggle(task.id)}>
                    <if task.status == Status::Done>
                        <span class="done">{task.text}</span>
                    <else>
                        <span>{task.text}</span>
                    </else>
                    </if>
                </div>
            </for>
            <button onclick={add("New task")}>Add Task</button>
        </div>
    }
}

app {
    root = App;
    title = "Task List";
    description = "A task management app built with Coi";
}

In benchmarks comparing Coi, React, Vue, and Svelte, Coi delivers the smallest bundle size and competitive DOM performance. See the results below:

Prerequisites:

• Clang 16+ (required for full C++20 support)
  • Ubuntu/Debian: sudo apt install clang-16
  • macOS: brew install llvm lld
  • Fedora: sudo dnf install clang

git clone https://github.com/coi/coi.git
cd coi
./build.sh

coi init my-app
cd my-app
coi dev

Open http://localhost:8000 in your browser.

my-app/
├── assets/
│   └── images/
├── src/
│   ├── App.coi          # Entry point (required)
│   ├── layout/
│   │   ├── Footer.coi
│   │   └── NavBar.coi
│   ├── pages/
│   │   ├── About.coi
│   │   └── Home.coi
│   └── ui/
│       └── Button.coi
├── styles/
│   └── reset.css
├── dist/                # Build output
└── README.md

• src/App.coi — The compiler always looks for this as the entry point.
• assets/ — Automatically copied to dist/assets/ on build.
• styles/ — CSS files here are bundled into app.css.

• Getting Started: Installation, first project, imports
• Language Guide: Types, enums, control flow, operators
• Components: State, lifecycle, props, references
• View Syntax: JSX-like templates, <if>, <for>, events
• Styling: Scoped and global CSS
• Platform APIs: Canvas, Storage, Audio, Fetch, and more
• Package Manager: Registry packages, lockfile workflow, add/install/update/remove
• Versioning: Pond & Drop compatibility model and release philosophy
• Editor Support: VS Code, Sublime Text, and Zed extensions

Join the Coi community on Discord to get help, share projects, and discuss the language:

Join Discord Server 💬

Coi has syntax highlighting and language support for VS Code, Sublime Text, and Zed.

See the Editor Support & Tooling documentation for installation instructions and features.

MIT © coi - see LICENSE