DEV Community: artydev

Csharp

artydev — Sun, 22 Feb 2026 04:07:15 +0000

Great tips Thank you

artydev — Sun, 22 Feb 2026 04:05:12 +0000

I Built a Lightweight Rule Engine for JS, C#, and Dart — Here's How It Works

Berat ARPA ・ Feb 21

#opensource #javascript #csharp #webdev

COI Components

artydev — Wed, 28 Jan 2026 08:04:23 +0000

From official site :

Components

Components are the building blocks of Coi applications. This guide covers component syntax, state management, lifecycle, and communication patterns.

Basic Structure

Component names must start with an uppercase letter:

component Counter {
    mut int count = 0;

    def increment() : void {
        count += 1;
    }

    style {
        button { padding: 8px 16px; }
    }

    view {
        <div>
            <span>{count}</span>
            <button onclick={increment}>+</button>
        </div>
    }
}

State & Mutability

Mutability (`mut`) and Visibility (`pub`)

Coi uses two orthogonal modifiers:

mut: Makes a variable mutable (can be changed from inside the component)
pub: Makes a variable or method visible (can be accessed from outside the component)

Variables:

Syntax	Inside Component	Outside Component	Description
`int x`	Read Only	Hidden	Private constant
`mut int x`	Read/Write	Hidden	Private mutable state
`pub int x`	Read Only	Read Only	Public constant
`pub mut int x`	Read/Write	Read Only	Public state (read-only outside)

Methods:

Syntax	Inside Component	Outside Component	Description
`def method() : void`	Callable	Hidden	Private method
`pub def method() : void`	Callable	Callable	Public method

Important: You can never write to a component's member from outside. If you need to modify a child's state, use a setter method or reference parameters.

component Counter(pub mut int count = 0) {
    mut int internal = 0;      // Private, mutable
    pub int version = 1;       // Public, constant

    def helper() : void { }    // Private method (not accessible from outside)
    pub def reset() : void {   // Public method (accessible from outside)
        count = 0;
    }
}

// Usage
component App {
    mut Counter counter;

    view {
        <div>
            <span>{counter.count}</span>     // ✅ Can read public state
            <span>{counter.version}</span>   // ✅ Can read public constant
            <button onclick={counter.reset}>Reset</button>  // ✅ Can call public method
            // ❌ counter.internal - Error: private member
            // ❌ counter.helper() - Error: private method
        </div>
    }
}

Component Parameters

Components receive data through constructor-style parameters:

component Editor(
    string label,           // Value parameter (copied by default, can be moved with :)
    mut int& value,         // Reference parameter (two-way binding)
    int step = 1,           // Value parameter with default
    def onChange : void     // Function parameter (callback)
) {
    def increment() : void {
        value += step;
        onChange();
    }

    view {
        <button onclick={increment}>{label}</button>
    }
}

// Usage examples:
component App {
    mut string text = "Label";
    mut int count = 0;

    view {
        <div>
            // Default: copies text
            <Editor label={text} &value={count} &onChange={handleChange} />

            // Move: transfers ownership of text
            <Editor :label={text} &value={count} &onChange={handleChange} />
        </div>
    }
}

Parameter Passing Modes

Syntax	Mode	Usage in Call	Description
`Type name`	Value	`comp(value)` or `comp(:value)`	Copied by default, can be moved with `:`
`mut Type& name`	Reference	`comp(&value)`	Component can read/modify parent's state
`def name(args) : ret`	Callback	`comp(&callback)`	Function passed from parent

Reference Parameters (`&`)

Reference parameters allow child components to modify the parent's state directly:

// Declaration
component StepButton(mut int& count) {
    def add() : void {
        count += 1;  // Modifies parent's state
    }

    view {
        <button onclick={add}>+</button>
    }
}

// Usage
component App {
    mut int score = 0;

    view {
        <div>
            <span>{score}</span>
            <StepButton &count={score} />
        </div>
    }
}

Move Semantics (`:`)

Use : to transfer ownership of a value to the child component. The parent's variable becomes invalid after the move:

<Editor :content={document} />

In code, use := for move assignment:

string source = "Hello";
string dest := source;  // Move assignment
// source is now invalid

Function Parameters (`def`)

Pass callbacks to child components:

// Simple callback
component Button(string label, def onclick : void) {
    view {
        <button onclick={onclick}>{label}</button>
    }
}

// Typed callback with parameters
component ListItem(
    pub int id,
    def onRemove(int) : void
) {
    view {
        <button onclick={onRemove(id)}>Delete</button>
    }
}

// Usage
component App {
    def handleClick() : void {
        System.log("Clicked!");
    }

    def handleRemove(int itemId) : void {
        // Remove item with itemId
    }

    view {
        <div>
            <Button label="Click" &onclick={handleClick} />
            <ListItem id={1} &onRemove={handleRemove(id)} />
        </div>
    }
}

Component Lifecycle

┌─────────────────────────────────────────────────────────┐
│  1. init {}     - State initialization (no DOM yet)    │
│  2. view {}     - DOM elements are created             │
│  3. mount {}    - DOM is ready, elements accessible    │
│  4. tick(dt) {} - Called every frame (if defined)      │
└─────────────────────────────────────────────────────────┘

`init {}` — Pre-render Setup

Runs before the view is rendered. Use for state initialization:

component App {
    mut int[] data;
    mut string status;

    init {
        data = [1, 2, 3, 4, 5];
        status = "Ready";
        // ❌ Cannot access DOM elements here
    }
}

`mount {}` — Post-render Initialization

Runs after the view is rendered. Use when you need DOM access:

component CanvasApp {
    mut Canvas canvas;
    mut CanvasContext2D ctx;

    mount {
        // ✅ DOM is ready
        canvas.setSize(800, 600);
        ctx = canvas.getContext2d();
    }

    view {
        <canvas &={canvas}></canvas>
    }
}

`tick(float dt) {}` — Animation Loop

Called every frame. dt is delta time in seconds:

component AnimatedBall {
    mut float x = 0;
    mut float speed = 100;

    tick(float dt) {
        x += speed * dt;  // Move 100 pixels per second
        if (x > 400) x = 0;
    }

    view {
        <div style="left: {x}px;"></div>
    }
}

Lifecycle Summary

Block	When it runs	DOM available?	Use for
`init {}`	Before view	❌ No	State setup, calculations
`view {}`	Creates DOM	Being created	Define HTML structure
`mount {}`	After view	✅ Yes	Canvas setup, DOM measurements
`tick(dt) {}`	Every frame	✅ Yes	Animations, physics, updates

Logic-Only Components

Components don't require a view block:

component Timer {
    pub mut int elapsed = 0;
    pub mut bool running = false;

    tick(float dt) {
        if (running) {
            elapsed++;
        }
    }

    pub def start() : void { running = true; }
    pub def stop() : void { running = false; }
    pub def reset() : void { elapsed = 0; }
}

component App {
    mut Timer timer;

    view {
        <div>
            <span>Elapsed: {timer.elapsed}</span>
            <button onclick={timer.start}>Start</button>
        </div>
    }
}

Persisting Component State

Components inside <if> branches are destroyed when the condition changes. To persist state, declare as a member:

component App {
    mut bool showEditor = false;
    mut Editor editor;  // Persists across toggles

    view {
        <div>
            <button onclick={toggle}>Toggle</button>
            <if showEditor>
                <{editor} />  // Uses existing member
            </if>
        </div>
    }
}

Client-Side Routing

Coi has built-in client-side routing for single-page applications. Define routes with the router {} block and render the current route with <route />.

Basic Routing

import "pages/Home.coi";
import "pages/About.coi";
import "pages/Dashboard.coi";

component App {
    router {
        "/" => Home,
        "/about" => About,
        "/dashboard" => Dashboard
    }

    view {
        <div>
            <nav>
                <a href="/">Home</a>
                <a href="/about">About</a>
            </nav>
            <route />
        </div>
    }
}

Passing Props to Routes

Pass callbacks or values to route components:

component App {
    mut bool isLoggedIn = false;

    def handleLogin() : void {
        isLoggedIn = true;
    }

    def handleLogout() : void {
        isLoggedIn = false;
    }

    router {
        "/" => Landing(&handleLogin),
        "/dashboard" => Dashboard(&handleLogout)
    }

    view {
        <div>
            <NavBar />
            <route />
            <Footer />
        </div>
    }
}

Programmatic Navigation

Use System.navigate(path) to navigate programmatically:

component NavBar {
    def goToDashboard() : void {
        System.navigate("/dashboard");
    }

    def goToHome() : void {
        System.navigate("/");
    }

    view {
        <nav>
            <button onclick={goToHome}>Home</button>
            <button onclick={goToDashboard}>Dashboard</button>
        </nav>
    }
}

How It Works

Routes are defined in the router {} block with "path" => Component syntax
The <route /> element renders the component matching the current URL
System.navigate(path) changes the URL and updates the view
The router reads the initial URL on page load, so direct links work (e.g., /dashboard)
Browser back/forward buttons work automatically via the History API

Route Summary

Feature	Syntax	Description
Define routes	`router { "/" => Home }`	Map paths to components
Render route	`<route />`	Placeholder for current route's component
Navigate	`System.navigate("/path")`	Programmatically change route
With props	`"/" => Page(callback)`	Pass props to route component

Platform APIs

artydev — Wed, 28 Jan 2026 07:58:13 +0000

From official site:

Platform APIs

Coi provides type-safe access to browser APIs through the WebCC toolchain. These APIs are automatically generated from the WebCC schema.

Type System

All platform types use a consistent pattern:

type: Defines a handle type (like Canvas, Image, DOMElement)
shared def: Static/factory methods called on the type itself
def: Instance methods called on an instance

// Static method
Image photo = Image.load("photo.png");

// Instance method
canvas.setSize(800, 600);
ctx = canvas.getContext2d();

No-Copy Types

Platform types (handles to browser resources) cannot be copied - they can only be moved or referenced:

// ERROR: Cannot copy a Canvas
mut Canvas canvas1 = Canvas.createCanvas("c1", 800.0, 600.0);
mut Canvas canvas2 = canvas1;  // Error!

// OK: Move ownership
mut Canvas canvas1 = Canvas.createCanvas("c1", 800.0, 600.0);
mut Canvas canvas2 := canvas1;  // canvas1 is now invalid

// OK: Reference (borrow)
mut Canvas canvas1 = Canvas.createCanvas("c1", 800.0, 600.0);
mut Canvas& canvasRef = canvas1;  // Both valid (& is part of type, not value)

// OK: Fresh value from factory method
mut Canvas canvas = Canvas.createCanvas("c1", 800.0, 600.0);  // Not a copy

This applies to all platform types:

Canvas, CanvasContext2D
DOMElement, Image, Audio
WebSocket, FetchRequest
WebGLContext, WGPUContext, etc.

Arrays of these types also cannot be copied:

// ERROR: Cannot copy Audio[]
mut Audio[] sounds = [Audio.load("a.mp3"), Audio.load("b.mp3")];
mut Audio[] backup = sounds;  // Error!

// OK: Move the array
mut Audio[] backup := sounds;  // sounds is now invalid

Canvas

2D drawing, paths, text, images, and transformations.

Canvas Methods

Method	Description
`canvas.getContext2d()`	Get 2D rendering context
`canvas.setSize(width, height)`	Set canvas dimensions

CanvasContext2D Methods

Shapes

Method	Description
`fillRect(x, y, w, h)`	Fill a rectangle
`strokeRect(x, y, w, h)`	Stroke a rectangle outline
`clearRect(x, y, w, h)`	Clear a rectangular area

Paths

Method	Description
`beginPath()`	Start a new path
`closePath()`	Close the current path
`moveTo(x, y)`	Move to point
`lineTo(x, y)`	Draw line to point
`arc(x, y, radius, startAngle, endAngle)`	Draw an arc
`arcTo(x1, y1, x2, y2, radius)`	Draw arc between points
`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`	Cubic bezier curve
`quadraticCurveTo(cpx, cpy, x, y)`	Quadratic bezier curve
`rect(x, y, w, h)`	Add rectangle to path
`ellipse(x, y, rx, ry, rotation, start, end, ccw)`	Draw ellipse
`fill()`	Fill the current path
`stroke()`	Stroke the current path
`clip()`	Clip to current path

Styles

Method	Description
`setFillStyle(r, g, b)`	Set fill color (RGB 0-255)
`setFillStyleStr(color)`	Set fill color (CSS string)
`setStrokeStyle(r, g, b)`	Set stroke color (RGB 0-255)
`setStrokeStyleStr(color)`	Set stroke color (CSS string)
`setLineWidth(width)`	Set line width
`setLineCap(cap)`	Set line cap ("butt", "round", "square")
`setLineJoin(join)`	Set line join ("miter", "round", "bevel")
`setGlobalAlpha(alpha)`	Set global transparency (0.0-1.0)
`setShadow(blur, offX, offY, color)`	Set shadow effect

Text

Method	Description
`setFont(font)`	Set font (e.g., "16px Arial")
`setTextAlign(align)`	Set alignment ("left", "center", "right")
`setTextBaseline(baseline)`	Set baseline ("top", "middle", "bottom")
`fillText(text, x, y)`	Draw filled text
`strokeText(text, x, y)`	Draw stroked text
`measureTextWidth(text)`	Get text width in pixels

Images

Method	Description
`drawImage(image, x, y)`	Draw image at position
`drawImageScaled(image, x, y, w, h)`	Draw image scaled
`drawImageFull(img, sx, sy, sw, sh, dx, dy, dw, dh)`	Draw image with source rect

Transforms

Method	Description
`save()`	Save current state
`restore()`	Restore saved state
`translate(x, y)`	Move origin
`rotate(angle)`	Rotate (radians)
`scale(x, y)`	Scale
`setTransform(a, b, c, d, e, f)`	Set transform matrix
`resetTransform()`	Reset to identity

Setup Example

[!IMPORTANT]
Upcoming Change: Canvas.createCanvas() will be removed in a future release. Use <canvas &={canvas}> in your view instead. See CHANGES.md for migration details.

component CanvasApp {
    mut Canvas canvas;
    mut CanvasContext2D ctx;

    mount {
        canvas.setSize(800, 600);
        ctx = canvas.getContext2d();
    }

    view {
        <canvas &={canvas}></canvas>
    }
}

Example: Bouncing Ball

component AnimatedBall {
    mut Canvas canvas;
    mut CanvasContext2D ctx;
    mut float x = 100.0;
    mut float y = 100.0;
    mut float dx = 3.0;
    mut float dy = 2.0;

    mount {
        canvas.setSize(800, 600);
        ctx = canvas.getContext2d();
    }

    tick(float dt) {
        ctx.clearRect(0, 0, 800, 600);
        ctx.setFillStyle(66, 133, 244);
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, 6.28318);
        ctx.fill();

        x += dx;
        y += dy;
        if (x < 20 || x > 780) dx = -dx;
        if (y < 20 || y > 580) dy = -dy;
    }

    view {
        <canvas &={canvas}></canvas>
    }
}

Image

Load images for canvas rendering.

Methods

Method	Description
`Image.load(string src)`	Load image from URL (static)

Example

component Gallery {
    mut Canvas canvas;
    mut CanvasContext2D ctx;
    Image photo;

    mount {
        canvas.setSize(400, 300);
        ctx = canvas.getContext2d();
        photo = Image.load("photo.png");
    }

    def draw() : void {
        ctx.drawImage(photo, 0, 0);
    }

    view {
        <div>
            <canvas &={canvas}></canvas>
            <button onclick={draw}>Draw</button>
        </div>
    }
}

Storage

Local storage for persisting data.

Methods

Method	Description
`Storage.setItem(string key, string value)`	Store a key-value pair
`Storage.removeItem(string key)`	Remove item by key
`Storage.clear()`	Clear all stored items

Example

component Settings {
    mut string theme = "light";

    def saveTheme() : void {
        Storage.setItem("theme", theme);
    }

    def toggleTheme() : void {
        theme = theme == "light" ? "dark" : "light";
        saveTheme();
    }

    view {
        <button onclick={toggleTheme}>Theme: {theme}</button>
    }
}

Audio

Audio playback with volume, looping, and playback position.

Methods

Method	Description
`Audio.load(string src)`	Create audio from URL (static)
`play()`	Start playback
`pause()`	Pause playback
`setVolume(float vol)`	Set volume (0.0 to 1.0)
`setLoop(int loop)`	Enable/disable looping (1/0)
`getCurrentTime()`	Get current playback position (seconds)
`getDuration()`	Get total duration (seconds)

Example

component MusicPlayer {
    mut Audio music;
    mut bool playing = false;
    mut float progress = 0;

    mount {
        music = Audio.load("song.mp3");
        music.setVolume(0.8);
    }

    tick(float dt) {
        if (playing) {
            float duration = music.getDuration();
            if (duration > 0) {
                progress = (music.getCurrentTime() / duration) * 100;
            }
        }
    }

    def toggle() : void {
        if (playing) {
            music.pause();
        } else {
            music.play();
        }
        playing = !playing;
    }

    view {
        <div>
            <button onclick={toggle}>
                {playing ? "Pause" : "Play"}
            </button>
            <div style="width: {progress}%"></div>
        </div>
    }
}

System

Logging, page title, time, random numbers, and URL navigation.

Methods

Method	Description
`System.log(string msg)`	Log message to console
`System.warn(string msg)`	Log warning to console
`System.error(string msg)`	Log error to console
`System.setTitle(string title)`	Set page title
`System.reload()`	Reload the page
`System.openUrl(string url)`	Open URL in new tab
`System.navigate(string path)`	Navigate to route (client-side routing)
`System.getTime()`	Get time in seconds (float64)
`System.getDateNow()`	Get milliseconds since epoch (float64)
`System.random()`	Random float between 0.0 and 1.0
`System.random(int seed)`	Seeded random (for reproducibility)

Example

// Logging
System.log("Debug message");
System.warn("Warning!");
System.error("Error occurred");

// Page title
System.setTitle("My App");

// Time
float now = System.getTime();       // Seconds (high precision)
float epoch = System.getDateNow();  // Milliseconds since epoch

// Random numbers
float r = System.random();          // 0.0 to 1.0

// URL navigation
System.openUrl("https://example.com");  // Opens in new tab
System.navigate("/dashboard");           // Client-side navigation

Input

Keyboard input handling.

Methods

Method	Description
`Input.isKeyDown(int keyCode)`	Check if key is currently pressed
`Input.isKeyUp(int keyCode)`	Check if key is currently released
`Input.exitPointerLock()`	Exit pointer lock mode

Common Key Codes

Key	Code
Left Arrow	37
Up Arrow	38
Right Arrow	39
Down Arrow	40
Space	32
Enter	13
Escape	27
W/A/S/D	87/65/83/68

Example

component Game {
    mut Canvas canvas;
    mut CanvasContext2D ctx;

    mut float x = 400;
    mut float y = 300;
    mut float speed = 300;

    float width = 800;
    float height = 600;
    float radius = 20;

    mount {
        canvas.setSize(width, height);
        ctx = canvas.getContext2d();
    }

    tick(float dt) {
        // Movement
        if (Input.isKeyDown(37)) x -= speed * dt;  // Left
        if (Input.isKeyDown(39)) x += speed * dt;  // Right
        if (Input.isKeyDown(38)) y -= speed * dt;  // Up
        if (Input.isKeyDown(40)) y += speed * dt;  // Down

        ctx.clearRect(0, 0, width, height);

        // Background
        ctx.setFillStyleStr("#1a1a1a");
        ctx.fillRect(0, 0, 800, 600);
        // Player
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 6.28);
        ctx.setFillStyleStr("#4ade80");
        ctx.fill();
    }


    view {
            <canvas &={canvas}></canvas>
    }
}

DOMElement

Direct DOM manipulation for browser APIs and measurements.

[!IMPORTANT]
Upcoming Change: Direct DOM manipulation (.appendChild(), .setInnerHtml(), .addClass()) will be discouraged in favor of declarative view syntax in future releases. DOMElement references should primarily be used for browser APIs like requestFullscreen() or measurements. See CHANGES.md for details.

Methods

Method	Description
`DOMElement.getBody()`	Get document body (static)
`DOMElement.getElementById(string id)`	Get element by ID (static)
`DOMElement.createElement(string tag)`	Create new element (static)
`setAttribute(string name, string value)`	Set attribute
`getAttribute(string name)`	Get attribute value
`appendChild(DOMElement child)`	Append child element
`insertBefore(DOMElement child, DOMElement ref)`	Insert before reference
`removeElement()`	Remove this element
`setInnerHtml(string html)`	Set inner HTML
`setInnerText(string text)`	Set inner text
`addClass(string cls)`	Add CSS class
`removeClass(string cls)`	Remove CSS class
`requestFullscreen()`	Enter fullscreen mode
`requestPointerLock()`	Request pointer lock

Example

component App {
    mut DOMElement container;

    mount {
        DOMElement div = DOMElement.createElement("div");
        div.setInnerHtml("<p>Dynamic content</p>");
        div.addClass("dynamic");
        container.appendChild(div);
    }

    view {
        <div &={container}></div>
    }
}

Fetch

HTTP requests with callback-based response handling. Returns a FetchRequest handle.

Methods

Method	Description
`FetchRequest.get(url, &onSuccess=..., &onError=...)`	Make a GET request (static)
`FetchRequest.post(url, body, &onSuccess=..., &onError=...)`	Make a POST request (static)

Callback Signatures

Callback	Signature	Description
`onSuccess`	`def handler(string data) : void`	Called with response data
`onError`	`def handler(string error) : void`	Called on request error

Example

component DataLoader {
    mut string result = "Click to load data";
    mut bool loading = false;

    def handleSuccess(string data) : void {
        loading = false;
        result = data;
    }

    def handleError(string error) : void {
        loading = false;
        result = "Error: " + error;
    }

    def loadData() : void {
        loading = true;
        result = "Loading...";
        FetchRequest.get(
            "https://api.example.com/data",
            &onSuccess = handleSuccess,
            &onError = handleError
        );
    }

    view {
        <div>
            <button onclick={loadData}>Load</button>
            <p>{result}</p>
        </div>
    }
}

POST Example

component FormSubmit {
    mut string status = "";

    def handleSuccess(string response) : void {
        status = "Submitted!";
    }

    def handleError(string error) : void {
        status = "Failed: " + error;
    }

    def submit() : void {
        status = "Submitting...";
        FetchRequest.post(
            "https://api.example.com/submit",
            "{\"name\": \"test\"}",
            &onSuccess = handleSuccess,
            &onError = handleError
        );
    }

    view {
        <div>
            <button onclick={submit}>Submit</button>
            <p>{status}</p>
        </div>
    }
}

JSON

Type-safe JSON parsing with compile-time schema validation and presence tracking.

Methods

Method	Description
`Json.parse(Type, json, &onSuccess=..., &onError=...)`	Parse JSON into a data type (static)
`Json.stringify(value)`	Convert data type to JSON string (static)

Defining Data Types

JSON parsing requires a data definition that describes the expected structure:

data Address {
    string street;
    string city;
    int zipcode;
}

data User {
    string name;
    int age;
    string email;
    Address address;      // Nested objects
    string[] tags;        // Arrays
    Friend[] friends;     // Arrays of objects
}

Callback Signatures

Callback	Signature	Description
`onSuccess`	`def handler(Type data, TypeMeta meta) : void`	Called with parsed data and presence info
`onError`	`def handler(string error) : void`	Called when JSON structure is malformed

Note: onError is only called for invalid JSON structure (unbalanced braces, unclosed strings, etc.). Missing fields or type mismatches don't trigger errors - instead, those fields simply won't be marked as present in the meta struct.

Meta Structs (Presence Checking)

The onSuccess callback receives a meta data that tracks which fields were present in the JSON. This handles optional/nullable fields gracefully:

def handleUser(User u, UserMeta meta) : void {
    // Check if fields were present in JSON
    if (meta.has_name()) {
        System.log("Name: " + u.name);
    }

    if (meta.has_age()) {
        System.log("Age: {u.age}");
    }

    // Nested objects have nested meta
    if (meta.has_address()) {
        if (meta.address.has_city()) {
            System.log("City: " + u.address.city);
        }
    }
}

Example: Fetch + Parse

component UserLoader {
    mut string status = "Ready";
    mut User user;

    def handleSuccess(string data) : void {
        Json.parse(
            User,
            data,
            &onSuccess = handleParsedUser,
            &onError = handleParseError
        );
    }

    def handleParsedUser(User u, UserMeta meta) : void {
        user = u;
        status = "Loaded: " + u.name;
    }

    def handleParseError(string error) : void {
        status = "Parse error: " + error;
    }

    def handleFetchError(string error) : void {
        status = "Fetch error: " + error;
    }

    def loadUser() : void {
        status = "Loading...";
        FetchRequest.get(
            "https://api.example.com/user/1",
            &onSuccess = handleSuccess,
            &onError = handleFetchError
        );
    }

    view {
        <div>
            <button onclick={loadUser}>Load User</button>
            <p>{status}</p>
        </div>
    }
}

Supported Types

Type	JSON	Notes
`string`	`"text"`	Handles escape sequences
`int`	`123`	32-bit signed integer
`float`	`3.14`	64-bit double
`bool`	`true`/`false`
`Type`	`{...}`	Nested data types
`string[]`	`[...]`	Array of strings
`int[]`	`[...]`	Array of integers
`Type[]`	`[...]`	Array of nested objects

Null Handling

JSON null values are handled gracefully - the field is simply not marked as present in the meta struct:

// JSON: {"name": "Alice", "age": null}
def handle(User u, UserMeta meta) : void {
    meta.has_name();  // true
    meta.has_age();   // false (was null)
}

WebSocket

Real-time bidirectional communication with WebSocket servers. The handle is automatically invalidated when the connection closes or errors.

Methods

Method	Description
`WebSocket.connect(url, &onMessage=..., &onOpen=..., &onClose=..., &onError=...)`	Create connection with callback handlers
`send(string msg)`	Send message (only when connected)
`close()`	Close connection
`isConnected()`	Check if WebSocket is connected (handle is valid)

Callback Signatures

Callback	Signature	Description
`onMessage`	`def handler(string msg) : void`	Called when message received
`onOpen`	`def handler : void`	Called when connection opens
`onClose`	`def handler : void`	Called when connection closes
`onError`	`def handler : void`	Called on connection error

Example

component Chat {
    mut WebSocket ws;
    mut string[] messages;
    mut bool connected = false;

    def handleMessage(string msg) : void {
        messages.push(msg);
    }

    def handleOpen() : void {
        connected = true;
        System.log("Connected!");
        ws.send("Hello from Coi!");
    }

    def handleClose() : void {
        connected = false;
        System.log("Disconnected");
    }

    mount {
        ws = WebSocket.connect(
            "wss://chat.example.com",
            &onMessage = handleMessage,
            &onOpen = handleOpen,
            &onClose = handleClose
        );
    }

    def sendMessage(string text) : void {
        if (connected) {
            ws.send(text);
        }
    }

    view {
        <div>
            <p>{connected ? "🟢 Connected" : "🔴 Disconnected"}</p>
            <for msg in messages key={msg}>
                <p>{msg}</p>
            </for>
        </div>
    }
}

Available APIs

Module	Description
`Canvas`	2D drawing, paths, text, images, transformations
`Image`	Image loading for canvas rendering
`Audio`	Audio playback, volume, looping, playback position
`Storage`	Local storage (setItem, removeItem, clear)
`System`	Logging, page title, time, random, URL navigation
`Input`	Keyboard input, pointer lock
`DOMElement`	Direct DOM manipulation
`WebGL`	WebGL context and rendering
`WGPU`	WebGPU support
`FetchRequest`	HTTP GET/POST requests
`WebSocket`	WebSocket connections
`Json`	Type-safe JSON parsing and serialization

Next Steps

Getting Started — Setup and first project
Language Guide — Types, control flow, operators
Components — Component lifecycle, state management

Coi : WASM made easy

artydev — Wed, 21 Jan 2026 12:27:09 +0000

Look at this simple page integrating a Counter demo and its associated code, could it be simpler for a code destinated to be compiled to wasm ?

Bouncing DOM Elements at Warp Speed with Coi to WASM

artydev — Fri, 16 Jan 2026 22:17:11 +0000

This is a balls collisions demo of 100 DOM elements in WASM :

WASMDomCollision

here is the code (Coi language)

component DomBouncer {
    // --- Parameters ---
    int ballCount = 100;
    float width = 800.0;
    float height = 500.0;
    float diameter = 30.0;

    // --- State: Parallel Arrays ---
    mut float[] px = [];
    mut float[] py = [];
    mut float[] vx = [];
    mut float[] vy = [];
    mut string[] ballColors = [];

    // --- State: DOM Handles ---
    mut DOMElement[] ballHandles = [];
    mut DOMElement container;

    init {
        string[] palette = ["#ff4757", "#2ed573", "#1e90ff", "#ffa502", "#a29bfe"];

        for i in 0:100 {
            px.push(100.0 + (System.random() * 600.0));
            py.push(100.0 + (System.random() * 300.0));
            vx.push((System.random() * 400.0) - 200.0);
            vy.push((System.random() * 400.0) - 200.0);
            ballColors.push(palette[i % 5]);
        }
    }

    mount {
        container = Dom.getElementById("ball-container");

        for i in 0:100 {
            DOMElement el = Dom.createElement("div");

            // FIX: Initialize the string in ONE line so it doesn't need reassignment
            string ballCss = "position:absolute;width:30px;height:30px;border-radius:50%;top:0;left:0;background:" + ballColors[i];

            Dom.setAttribute(el, "style", ballCss);
            Dom.appendChild(container, el);

            ballHandles.push(el);
        }
    }

    tick(float dt) {
        float subDt = dt / 2.0;

        for s in 0:2 {
            for i in 0:100 {
                px[i] = px[i] + (vx[i] * subDt);
                py[i] = py[i] + (vy[i] * subDt);

                if (px[i] < 0.0) { px[i] = 0.0; vx[i] = vx[i] * -1.0; }
                if (px[i] > (width - 30.0)) { px[i] = width - 30.0; vx[i] = vx[i] * -1.0; }
                if (py[i] < 0.0) { py[i] = 0.0; vy[i] = vy[i] * -1.0; }
                if (py[i] > (height - 30.0)) { py[i] = height - 30.0; vy[i] = vy[i] * -1.0; }
            }

            for i in 0:100 {
                for j in 0:100 {
                    if (j > i) {
                        float dx = px[j] - px[i];
                        float dy = py[j] - py[i];
                        float d2 = (dx * dx) + (dy * dy);
                        if (d2 < 900.0) {
                            float tx = vx[i]; float ty = vy[i];
                            vx[i] = vx[j]; vy[i] = vy[j];
                            vx[j] = tx; vy[j] = ty;
                            px[i] = px[i] - (dx * 0.1);
                            py[i] = py[i] - (dy * 0.1);
                        }
                    }
                }
            }
        }

        // Render Step
        for i in 0:100 {
            DOMElement h = ballHandles[i];

            // FIX: Single-line assignments for strings
            string transformStr = "translate3d(" + px[i] + "px," + py[i] + "px,0)";
            string finalStyle = "position:absolute;width:30px;height:30px;border-radius:50%;background:" + ballColors[i] + ";transform:" + transformStr;

            Dom.setAttribute(h, "style", finalStyle);
        }
    }

    style {
        #ball-container {
            position: relative;
            width: 800px;
            height: 500px;
            background: #050505;
            overflow: hidden;
            border: 2px solid #333;
            border-radius: 12px;
            margin: 20px auto;
        }
    }

    view {
        <div id="ball-container">
        </div>
    }
}

app { root = DomBouncer; }

From C++ to WASM via WebCC/Coi

artydev — Sun, 11 Jan 2026 13:07:22 +0000

If, like me, you are intrigued by WASM and you don't how to step in, then give an eye to Coi

Coil let's you code you web app in a declarative way like React and compile it through C++ to WASM with the help of WebCC

I have installed the toolchain in WSL and the compilation is very fast.

There is also a VSCode extention :

import "../components/Button.coi";

component AudioPlayer {
  mut Audio audio;
  mut bool playing = false;
  mut float currentTime = 0;
  mut float duration = 0;
  mut float progress = 0;
  mut int volume = 80;

  mount {
    // Replace with your own audio file URL
    audio = Audio.createAudio(
      "https://cdn.pixabay.com/audio/2025/06/23/audio_e6a00ad257.mp3"
    );
    audio.setVolume(0.8);
    System.log("test" + duration);
  }

  tick(float dt) {
    if (playing) {
      currentTime = audio.getCurrentTime();
      duration = audio.getDuration();

      if (duration > 0) {
        progress = (currentTime / duration) * 100;
      }
    }
  }

  def togglePlay(): void {
    if (playing) {
      audio.pause();
      playing = false;
    } else {
      audio.play();
      playing = true;
      duration = audio.getDuration();
    }
  }

  def volumeUp(): void {
    if (volume < 100) {
      volume = volume + 10;

      if (volume > 100) {
        volume = 100;
      }

      float vol = volume / 100.0;
      audio.setVolume(vol);
    }
  }

  def volumeDown(): void {
    if (volume > 0) {
      volume = volume - 10;

      if (volume < 0) {
        volume = 0;
      }

      float vol = volume / 100.0;
      audio.setVolume(vol);
    }
  }

  style {
    .audio-player {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 40px;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 12px;
      width: 280px;
    }

    .label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #999;
      text-align: center;
    }

    .track-info {
      text-align: center;
    }

    .track-title {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 4px;
    }

    .track-artist {
      font-size: 13px;
      color: #666;
    }

    .album-art {
      width: 160px;
      height: 160px;
      background: linear-gradient(135deg, #9477ff 0%, #6b5ce7 100%);
      border-radius: 12px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 60px;
      box-shadow: 0 4px 15px rgba(148, 119, 255, 0.3);
    }

    .progress-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .progress-bar {
      width: 100%;
      height: 6px;
      background: #eee;
      border-radius: 3px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #9477ff, #b19fff);
      border-radius: 3px;
      transition: width 0.1s linear;
    }

    .time-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
    }

    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }

    .play-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #9477ff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;
      transition: all 0.2s ease;
      box-shadow: 0 4px 15px rgba(148, 119, 255, 0.4);
    }

    .play-btn:hover {
      transform: scale(1.05);
      background: #a388ff;
    }

    .volume-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .volume-icon {
      font-size: 16px;
      color: #666;
    }

    .volume-bar {
      flex: 1;
      height: 6px;
      background: #eee;
      border-radius: 3px;
      overflow: hidden;
    }

    .volume-fill {
      height: 100%;
      background: #9477ff;
      border-radius: 3px;
      transition: width 0.1s ease;
    }

    .volume-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #f5f5f5;
      border: 1px solid #eee;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #666;
      transition: all 0.2s ease;
    }

    .volume-btn:hover {
      background: #9477ff;
      color: #fff;
      border-color: #9477ff;
    }

    .volume-text {
      font-size: 12px;
      color: #666;
      width: 35px;
      text-align: right;
    }
  }

  view {
    <div class="audio-player">
      <div class="label">Audio Player</div>

      <div class="album-art">🎵</div>

      <div class="track-info">
        <div class="track-title">Coify</div>
        <div class="track-artist">Demo Track</div>
      </div>

      <div class="progress-container">
        <div class="progress-bar">
          <div
            class="progress-fill"
            style="width: {progress}%;"
          ></div>
        </div>

        <div class="time-info">
          <span>{currentTime}s</span>
          <span>{duration}s</span>
        </div>
      </div>

      <div class="controls">
        <button class="play-btn" onclick={togglePlay}>
          <if playing>
            <span>⏸</span>
          <else>
            <span>▶</span>
          </else>
          </if>
        </button>
      </div>

      <div class="volume-container">
        <span class="volume-icon">🔊</span>

        <button class="volume-btn" onclick={volumeDown}>−</button>

        <div class="volume-bar">
          <div
            class="volume-fill"
            style="width: {volume}%;"
          ></div>
        </div>

        <button class="volume-btn" onclick={volumeUp}>+</button>

        <span class="volume-text">{volume}%</span>
      </div>
    </div>
  }
}


app { root = AudioPlayer; }

Then compile the code (very fast:

python:~/coi/example/src/demos$ coi AudioPlayer.coi  --out ./dist
Processing /home/python/coi/example/src/demos/AudioPlayer.coi...
Processing /home/python/coi/example/src/components/Button.coi...
All files processed. Total components: 2
Generated ./dist/app.css
Running: webcc /tmp/coi_build/app.cc --out /home/python/coi/example/src/demos/./dist --cache-dir /tmp/coi_build/webcc_cache --template /tmp/coi_build/index.template.html
[WebCC] Loading definitions from compiled-in schema...
[WebCC] Loaded 130 commands and 17 events.
[WebCC] Scanning source files for features...
  -> Found get_body (dom), embedding JS support.
  -> Found create_element (dom), embedding JS support.
  -> Found set_attribute (dom), embedding JS support.
  -> Found append_child (dom), embedding JS support.
  -> Found remove_element (dom), embedding JS support.
  -> Found set_inner_text (dom), embedding JS support.
  -> Found add_click_listener (dom), embedding JS support.
  -> Found log (system), embedding JS support.
  -> Found set_main_loop (system), embedding JS support.
  -> Found open_url (system), embedding JS support.
  -> Found create_audio (audio), embedding JS support.
  -> Found play (audio), embedding JS support.
  -> Found pause (audio), embedding JS support.
  -> Found set_volume (audio), embedding JS support.
  -> Found get_current_time (audio), embedding JS support.
  -> Found get_duration (audio), embedding JS support.
[WebCC] Generated /home/python/coi/example/src/demos/./dist/app.js
[WebCC] Using template: /tmp/coi_build/index.template.html
[WebCC] Generated /home/python/coi/example/src/demos/./dist/index.html
[WebCC] Compiling...
  [CC] /tmp/coi_build/app.cc
  [CC] /home/python/webcc/src/core/command_buffer.cc
  [CC] /home/python/webcc/src/core/event_buffer.cc
  [CC] /home/python/webcc/src/core/scratch_buffer.cc
  [CC] /home/python/webcc/src/core/libc.cc
[WebCC] Linking...
[WebCC] Success! Run 'python3 -m http.server' in /home/python/coi/example/src/demos/./dist to view.

Here is the output, magic!!! :

python@:~/coi/example/src/demos/dist$ ls -rtl
total 64
-rw-r--r-- 1 python python  4460 Jan 11 14:05 app.css
-rw-r--r-- 1 python python   298 Jan 11 14:05 index.html
-rw-r--r-- 1 python python 13789 Jan 11 14:05 app.js
-rwxr-xr-x 1 python python 34063 Jan 11 14:05 app.wasm

Note the size of the wasm file.

Click below to experiment the demo:

Fetching a large JSON, streaming it to a worker for filtering, and rendering chunks incrementally.

artydev — Thu, 08 Jan 2026 13:23:46 +0000

I am inauguring a new serie called "DevGuides" with the help of AI

Link to chat : Streaming-Workers

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Streaming API Workflow Demo with Progress</title>
  <style>
    body { font-family: sans-serif; padding: 20px; max-width: 900px; margin: auto; }
    h1 { color: #333; }
    h2 { color: #4CAF50; margin-top: 30px; }
    .step { margin: 20px 0; padding: 15px; border-left: 4px solid #4CAF50; background: #f9f9f9; }
    .diagram { font-family: monospace; white-space: pre; background: #eee; padding: 10px; margin-top: 10px; }
    #progress-container { width: 100%; background: #eee; border: 1px solid #ccc; border-radius: 5px; height: 20px; margin: 10px 0; }
    #download-progress, #filter-progress { width: 0%; height: 100%; border-radius: 5px; transition: width 0.2s; }
    #download-progress { background: #2196F3; }
    #filter-progress { background: #4CAF50; margin-top: 5px; }
    #product-list { max-height: 400px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; background: #fafafa; }
    .product { margin: 2px 0; }
  </style>
</head>
<body>
  <h1>Streaming API Workflow Demo with Progress</h1>

  <div class="step">
    <h2>Step 1: Fetch Large JSON Data</h2>
    <p>The main thread fetches JSON from a public API as a stream, updating the download progress as chunks arrive.</p>
  </div>

  <div class="step">
    <h2>Step 2: Send Data to Worker</h2>
    <p>Once chunks are received, they are combined into an array and sent to a Web Worker for filtering to avoid blocking the UI.</p>
  </div>

  <div class="step">
    <h2>Step 3: Worker Filters Data</h2>
    <p>The worker filters items according to criteria and sends filtered chunks back to the main thread.</p>
  </div>

  <div class="step">
    <h2>Step 4: Incremental Rendering</h2>
    <p>The main thread renders filtered chunks immediately while updating the filter progress bar.</p>
  </div>

  <div class="step">
    <h2>Workflow Diagram</h2>
    <div class="diagram">
Main Thread                 Worker
------------                ------------
1. fetch()  --------------&gt;
                              2. receive products array
                              3. filter in chunks
                              4. postMessage(filtered chunk)
5. receive filtered chunk &lt;-------------
6. render chunk in UI
(repeat for each chunk)
    </div>
  </div>

  <h2>Live Demo</h2>
  <p>Blue bar: download progress | Green bar: filtering progress</p>
  <div id="progress-container">
    <div id="download-progress"></div>
  </div>
  <div id="progress-container">
    <div id="filter-progress"></div>
  </div>
  <div id="product-list"></div>

  <script>
    // --- Worker code ---
    const workerBlob = new Blob([`
      self.onmessage = function(e) {
        const { type, products, minPrice, minRating, chunkSize } = e.data;
        if (type === 'PROCESS_PRODUCTS') {
          try {
            let filteredChunk = [];
            for (let i = 0; i < products.length; i++) {
              const p = products[i];
              if (p.price > minPrice && p.rating > minRating) {
                filteredChunk.push(p);
              }
              if (filteredChunk.length === chunkSize) {
                self.postMessage({ type: 'CHUNK', data: filteredChunk, progress: i + 1, total: products.length });
                filteredChunk = [];
              }
            }
            if (filteredChunk.length) {
              self.postMessage({ type: 'CHUNK', data: filteredChunk, progress: products.length, total: products.length });
            }
          } catch (err) {
            self.postMessage({ type: 'ERROR', message: err.message });
          }
        }
      };
    `], { type: 'application/javascript' });

    const worker = new Worker(URL.createObjectURL(workerBlob));

    const container = document.getElementById('product-list');
    const downloadBar = document.getElementById('download-progress');
    const filterBar = document.getElementById('filter-progress');

    worker.onmessage = e => {
      const msg = e.data;
      if (msg.type === 'CHUNK') {
        appendToUI(msg.data);
        const percent = Math.round((msg.progress / msg.total) * 100);
        filterBar.style.width = percent + '%';
      }
      if (msg.type === 'ERROR') console.error('Worker error:', msg.message);
    };

    function appendToUI(products) {
      for (const p of products) {
        const div = document.createElement('div');
        div.className = 'product';
        div.textContent = p.title + ' - $' + p.price + ' - rating ' + p.rating;
        container.appendChild(div);
      }
    }

    async function fetchAndProcess(url, minPrice = 500, minRating = 4.5, chunkSize = 20) {
      const res = await fetch(url);
      const reader = res.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';
      let totalBytes = res.headers.get('Content-Length') ? parseInt(res.headers.get('Content-Length')) : 0;
      let loadedBytes = 0;
      let products = [];

      // Read stream incrementally
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        loadedBytes += value.length;
        downloadBar.style.width = totalBytes ? Math.round((loadedBytes / totalBytes) * 100) + '%' : '50%';

        buffer += decoder.decode(value, { stream: true });
      }

      // Parse JSON once fully loaded
      try {
        const data = JSON.parse(buffer);
        products = data.products || [];
      } catch (err) {
        console.error('JSON parse error:', err);
        return;
      }

      downloadBar.style.width = '100%';

      // Send to worker for filtering
      worker.postMessage({ type: 'PROCESS_PRODUCTS', products, minPrice, minRating, chunkSize }); 
    }

    // --- Start demo ---
    fetchAndProcess('https://dummyjson.com/products?limit=1000');   
  </script>
</body>
</html>

Demo

Mitosis pattern - State Management in Mithril

artydev — Tue, 06 Jan 2026 13:26:59 +0000

I have already posts on this subject.
Here is a reminder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mithril.js E-commerce - State/Action Pattern</title>
    <!-- Mithril Library -->
    <script src="https://unpkg.com/mithril/mithril.js"></script>
    <style>
        body { font-family: system-ui, sans-serif; margin: 0; background: #f4f4f4; }
        header { 
            background: #2c3e50; color: white; padding: 1rem 2rem; 
            display: flex; justify-content: space-between; align-items: center;
            position: sticky; top: 0; z-index: 10;
        }
        .container { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
        .products-grid { 
            display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
            gap: 1.5rem; 
        }
        .card { 
            background: white; border-radius: 8px; overflow: hidden; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column;
        }
        .card img { width: 100%; height: 200px; object-fit: cover; }
        .card-body { padding: 1rem; flex-grow: 1; }
        .card-footer { padding: 1rem; border-top: 1px solid #eee; }
        button { 
            background: #3498db; color: white; border: none; padding: 0.6rem 1rem; 
            border-radius: 4px; cursor: pointer; width: 100%; font-weight: bold;
        }
        button:hover { background: #2980b9; }
        button.secondary { background: #e74c3c; margin-top: 5px; }

        /* Cart Sidebar */
        .cart-overlay {
            position: fixed; top: 0; right: 0; width: 350px; height: 100%;
            background: white; box-shadow: -5px 0 15px rgba(0,0,0,0.1);
            transform: translateX(100%); transition: 0.3s ease-in-out;
            z-index: 20; padding: 1.5rem; display: flex; flex-direction: column;
        }
        .cart-overlay.open { transform: translateX(0); }
        .cart-item { display: flex; justify-content: space-between; margin-bottom: 1rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
        .close-cart { background: #95a5a6; margin-bottom: 1rem; }
    </style>
</head>
<body>

<script>
/**
 * 1. STATE FACTORIES
 */
const ProductState = () => ({
    list: [],
    loading: false
});

const CartState = () => ({
    items: [],
    isOpen: false
});

/**
 * 2. ACTION FACTORIES (The Logic)
 */
const ProductActions = (state) => ({
    load: async () => {
        state.loading = true;
        try {
            const res = await m.request("https://dummyjson.com/products?limit=12");
            state.list = res.products;
        } finally {
            state.loading = false;
        }
    }
});

const CartActions = (state) => ({
    toggle: () => state.isOpen = !state.isOpen,
    add: (product) => {
        const existing = state.items.find(item => item.id === product.id);
        if (existing) {
            existing.qty++;
        } else {
            state.items.push({ ...product, qty: 1 });
        }
    },
    remove: (id) => {
        state.items = state.items.filter(item => item.id !== id);
    }
});

/**
 * 3. COMPONENTS (The View)
 */

// Helper to calculate total price
const calcTotal = (items) => items.reduce((sum, item) => sum + (item.price * item.qty), 0);

const ProductCard = (product, actions) => 
    m(".card", [
        m("img", { src: product.thumbnail }),
        m(".card-body", [
            m("h3", product.title),
            m("p", { style: "color: #7f8c8d; font-size: 0.9rem" }, product.description.substring(0, 60) + "..."),
            m("strong", `$${product.price}`)
        ]),
        m(".card-footer", [
            m("button", { onclick: () => actions.cart.add(product) }, "Add to Cart")
        ])
    ]);

const CartDrawer = (state, actions) =>
    m(".cart-overlay", { class: state.cart.isOpen ? "open" : "" }, [
        m("button.close-cart", { onclick: actions.cart.toggle }, "Close Cart"),
        m("h2", "Your Shopping Cart"),
        state.cart.items.length === 0 ? m("p", "Cart is empty...") : 
        state.cart.items.map(item => 
            m(".cart-item", [
                m("div", [
                    m("div", { style: "font-weight: bold" }, item.title),
                    m("small", `$${item.price} x ${item.qty}`)
                ]),
                m("button.secondary", { 
                    style: "width: auto; padding: 2px 8px", 
                    onclick: () => actions.cart.remove(item.id) 
                }, "Remove")
            ])
        ),
        m("hr"),
        m("h3", `Total: $${calcTotal(state.cart.items)}`),
        m("button", { onclick: () => alert("Proceeding to Checkout!") }, "Checkout")
    ]);

/**
 * 4. APP INITIALIZATION (Mitosis / Factory Setup)
 */
const App = () => {
    // Instantiate our states
    const pState = ProductState();
    const cState = CartState();

    // Instantiate our actions, binding them to the states
    const pActions = ProductActions(pState);
    const cActions = CartActions(cState);

    // Initial API call
    pActions.load();

    return {
        view: () => m("div", [
            // Header
            m("header", [
                m("h1", "JS Store"),
                m("button", { 
                    style: "width: auto", 
                    onclick: cActions.toggle 
                }, `Cart (${cState.items.length})`)
            ]),

            // Main Content
            m(".container", [
                pState.loading 
                    ? m("h2", "Loading Products...") 
                    : m(".products-grid", pState.list.map(p => ProductCard(p, { cart: cActions })))
            ]),

            // Sidebar
            CartDrawer({ cart: cState }, { cart: cActions })
        ])
    };
};

// Mount the app to the body
m.mount(document.body, App);
</script>

</body>
</html>

You can test it here MitosisPattern

Implementing fetchSignal, async data as signals for Mithtril

artydev — Mon, 05 Jan 2026 22:07:49 +0000

Here is an elegant way of fetching data.

export function useFetch(url, options = {}) {
    const data = signal(null)
    const loading = signal(true)
    const error = signal(null)

    const { select, ...fetchOptions } = options

    let controller
    let active = true

    const run = () => {
        controller?.abort()
        controller = new AbortController()

        batch(() => {
            loading(true)
            error(null)
        })

        fetch(url, { ...fetchOptions, signal: controller.signal })
            .then(r => {
                if (!r.ok) {
                    throw new Error(`${r.status} ${r.statusText}`)
                }
                return r.json()
            })
            .then(json => {
                if (!active) return
                batch(() => {
                    data(select ? select(json) : json)
                    loading(false)
                })
            })
            .catch(err => {
                if (!active || err.name === "AbortError") return
                batch(() => {
                    error(err.message)
                    loading(false)
                })
            })
    }

    run()

    return {
        data,
        loading,
        error,
        refetch: run,
        cancel: () => {
            active = false
            controller?.abort()
        }
    }
}

Ans its usage:

const Products = {
    oninit(vnode) {
        vnode.state.fetch = useFetch(
            "https://dummyjson.com/products",
            {
                select: r => r.products
            }
        )
    },

    onremove(vnode) {
        vnode.state.fetch.cancel()
    },

    view(vnode) {
        const { data, loading, error } = vnode.state.fetch

        if (loading()) return m("p", "Loading...")
        if (error()) return m("p.error", error())

        return m(".products",
            data().map(p =>
                m(".product", [
                    m("h3", p.title),
                    m("p", `$${p.price}`)
                ])
            )
        )
    }
}

m.mount(document.body, Products)

You can test it here: fetchSignal

Notice what’s missing:

no lifecycle juggling

no redraw logic

no state synchronization

The UI simply reads signals.

SVG animations with Mithril - Signals

artydev — Fri, 02 Jan 2026 23:00:09 +0000

Just for the pleasure :

Try it with React :-)

You can test it here: Ocean

Adding Signals to Mithril

artydev — Fri, 02 Jan 2026 13:48:22 +0000

In MithrilJS, reactivity is handled through streams, which are observable values, whereas signals—a similar concept in some frameworks—are not part of Mithril’s API

Here is an implementation called 'mithril-signals' based on the awesome work of Andrea Gianmarchi usignal

Available as npm package : mithril-signals

import { signal, computed, effect, batch } from "https://esm.sh/mithril-signals";

import m from "https://esm.sh/mithril";
import { signal, computed, effect, batch } from "https://esm.sh/mithril-signals";



const product = signal(null);
const isLoading = signal(false);
const error = signal(null);

// 2. Define the fetcher function
const fetchProduct = (id) => {
  isLoading(true);
  error(null);

  m.request({
    method: "GET",
    url: `https://dummyjson.com/products/${id}`,
  })
  .then((result) => {
    // Use batch to update multiple signals at once
    batch(() => {
      product(result);
      isLoading(false);
    });
  })
  .catch((err) => {
    batch(() => {
      error(err.message);
      isLoading(false);
    });
  });
};

// 3. The Component
const ProductView = {
  oninit: () => fetchProduct(1), // Fetch product #1 on load
  view: () => {
    if (isLoading()) return m("p", "Loading...");
    if (error()) return m("p", { style: "color: red" }, `Error: ${error()}`);

    const p = product();
    if (!p) return null;

    return m("div", [
      m("h1", p.title),
      m("img", { src: p.thumbnail, width: "200" }),
      m("p", p.description),
      m("p", m("strong", `Price: $${p.price}`)),

      m("button", { 
        onclick: () => fetchProduct(Math.floor(Math.random() * 100) + 1) 
      }, "Fetch Random Product")
    ]);
  }
};

m.mount(document.getElementById("app"), ProductView);

here is the demo : mithril-signals

DEV Community: artydev

Csharp

Great tips Thank you

I Built a Lightweight Rule Engine for JS, C#, and Dart — Here's How It Works

Berat ARPA ・ Feb 21

COI Components

Components

Basic Structure

State & Mutability

Mutability (mut) and Visibility (pub)

Component Parameters

Parameter Passing Modes

Reference Parameters (&)

Move Semantics (:)

Function Parameters (def)

Component Lifecycle

init {} — Pre-render Setup

mount {} — Post-render Initialization

tick(float dt) {} — Animation Loop

Lifecycle Summary

Logic-Only Components

Persisting Component State

Client-Side Routing

Basic Routing

Passing Props to Routes

Programmatic Navigation

How It Works

Route Summary

Platform APIs

Platform APIs

Type System

No-Copy Types

Canvas

Canvas Methods

CanvasContext2D Methods

Shapes

Paths

Styles

Text

Images

Transforms

Setup Example

Example: Bouncing Ball

Image

Methods

Example

Storage

Methods

Example

Audio

Methods

Example

System

Methods

Example

Input

Methods

Common Key Codes

Example

DOMElement

Methods

Example

Fetch

Methods

Callback Signatures

Example

POST Example

JSON

Methods

Defining Data Types

Callback Signatures

Meta Structs (Presence Checking)

Example: Fetch + Parse

Supported Types

Null Handling

WebSocket

Methods

Callback Signatures

Example

Available APIs

Mutability (`mut`) and Visibility (`pub`)

Reference Parameters (`&`)

Move Semantics (`:`)

Function Parameters (`def`)

`init {}` — Pre-render Setup

`mount {}` — Post-render Initialization

`tick(float dt) {}` — Animation Loop