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.

Warning

This project is a work in progress. I don't recommend using it in production yet, as the language features and syntax are still evolving and may change.

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.

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

Quick Start

Install

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

Compile

coi App.coi --out ./dist
cd dist && python3 -m http.server

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

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