Coi

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

[!NOTE] Coi is in early development. Things change fast and I want your feedback. Not ready for production, but perfect for experimenting, especially if you want to influence where the language goes.

Why Coi?

[!IMPORTANT] Coi isn't another JavaScript framework, it's a new language for the web, built from scratch to feel like a component framework but compile to high-performance WebAssembly. You get static types, strict checking, and native-speed execution without the overhead of a heavy JavaScript runtime.

• 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.

Features

Type System & Safety

• 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.

Developer Experience

• 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.

Example

// 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 {



            <h1>Tasks ({tasks.size()})</h1>
            <for task in tasks key={task.id}>



                    <if task.status == Status::Done>
                        <span class="done">{task.text}</span>
                    <else>
                        <span>{task.text}</span>
                    </else>
                    </if>



            </for>
            <button onclick={add("New task")}>Add Task</button>



    }
}

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

Benchmarks

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

<img src="https://github.com/coi/benchmarks/blob/main/suites/framework/results/benchmark_results.svg" alt="Benchmark Results" width="600">

Quick Start

Install

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

Create a Project

coi init my-app
cd my-app
coi dev

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

[!NOTE] Coi has a built-in package manager for installing community packages from the Coi Registry. See Package Manager.

CLI Commands

Command	Description
coi init [name]	Create a new app project
coi init [name] --pkg	Create a new package
coi build	Build the project
coi dev	Build and start dev server (with hot reload)
coi dev --no-watch	Dev server without hot reload
coi add <package> [version]	Add latest compatible release or a specific version
coi install	Install packages from coi.lock
coi remove <package>	Remove a package
coi upgrade [package]	Upgrade package(s) to latest
coi self-upgrade	Pull latest Coi source and rebuild compiler
coi list	List installed packages
coi version	Show the Coi compiler version
coi llms [--path]	Print the full language context for AI assistants (--path prints the file path)
coi <file.coi> --out <dir>	Compile a single file

Documentation

• 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

AI Assistants

I know a lot of you build with AI these days. Coi is new and a little niche, so an assistant won't know it out of the box, it simply hasn't seen enough Coi yet. So I put together a full language and API reference you can drop straight into your assistant's context. It should be a big help, speed things up, and honestly make building with Coi a lot more fun.

• llms-full.txt: the full context. Language reference, every platform API, complete examples, and a list of common mistakes to avoid.
• llms.txt: a short index that links the docs and points to the full context.
• coi llms: print the full context to your terminal. Use coi llms --path if you just want the file path.

coi llms > coi-context.txt   # hand this to your AI assistant
coi llms --path              # prints the path to llms-full.txt

Using an AI agent with terminal access? It can find this on its own. coi --help lists coi llms, which points to the same context.

Community

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

Join Discord Server 💬

License

MIT © coi - see LICENSE