Coi

A component-based language for high-performance web apps.
Fast. Minimal. Type-safe.

Compiles to WASM, JS, and HTML with tiny binaries and efficient updates for DOM, Canvas, and beyond.

Note

Coi is actively evolving. Some syntax may change in future releases.

Features

• Fine-Grained Reactivity: State changes map directly to DOM elements at compile-time. No Virtual DOM overhead.
• Type-Safe Components: Compile-time error checking with strictly typed parameters and state.
• Reference Parameters: Pass state by reference with & for seamless parent-child synchronization.
• Private by Default: Component members are private; use pub to expose them.
• Minimal Runtime: Tiny WASM binaries with high-performance updates for DOM, Canvas, and more.
• Integrated DOM & Styling: Write HTML elements and scoped CSS directly in components.
• View Control Flow: Declarative <if>, <else>, and <for> tags for conditional rendering and iteration.
• Component Lifecycle: Built-in init {}, mount {}, and tick {} blocks for setup and animations.
• Auto-Generated APIs: Browser APIs (Canvas, Storage, Audio, etc.) generated from WebCC schema.
• VS Code Extension: Syntax highlighting, completions, hover docs, and formatting.

Benchmarks

Coi is designed for high-performance and minimal footprint. In benchmarks comparing Coi, React, and Vue: Coi's fine-grained reactivity and minimal WASM runtime deliver smaller bundles and faster DOM updates with no Virtual DOM overhead.

See the benchmark/ directory for details and instructions on how to run it yourself.

Example

component Counter(string label, mut int& value) {
    def add(int i) : void {
        value += i;
    }

    style {
        .counter {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
        }
    }

    view {
        <div class="counter">
            <span>{label}: {value}</span>
            <button onclick={add(1)}>+</button>
            <button onclick={add(-1)}>-</button>
        </div>
    }
}

component App {
    mut int score = 0;

    style {
        .app {
            padding: 24px;
            font-family: system-ui;
        }
        h1 {
            color: #1a73e8;
        }
        .win {
            color: #34a853;
            font-weight: bold;
        }
    }

    view {
        <div class="app">
            <h1>Score: {score}</h1>
            <Counter label="Player" &value={score} />
            <if score >= 10>
                <p class="win">You win!</p>
            </if>
        </div>
    }
}

app {
    root = App;
    title = "My Counter App";
    description = "A simple counter built with Coi";
    lang = "en";
}

Quick Start

Install

git clone https://github.com/io-eric/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 project
coi build	Build the project
coi dev	Build and start dev server
coi <file.coi> --out <dir>	Compile a single file

Project Structure

my-app/
├── src/
│   ├── App.coi          # Entry point (required)
│   └── components/      # Your components
├── assets/              # Static files (images, fonts, etc.)
└── dist/                # Build output

• src/App.coi — The compiler always looks for this as the entry point.
• assets/ — Automatically copied to dist/assets/ on build.

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

VS Code Extension

The Coi Language extension provides syntax highlighting, auto-completions, hover docs, and signature help.

Install from the VS Code Marketplace or build manually:

cd vscode-extension
npm install && npm run package

License

MIT © io-eric