Why Coi?

• 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 {
        <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";
}

Benchmarks

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

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.

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

Community

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

Join Discord Server 💬

License

MIT © coi - see LICENSE