Pixel Canvas

This demo uses the Forerunner Protocol for decentralized real-time synchronization. Every pixel you paint is shared instantly with all connected users — no server required.

Architecture:

• PixelModel — shared deterministic state (32x32 grid of colors)
• PixelView — local canvas renderer + mouse/touch input
• Forerunner routes sessions to decentralized synchronizer nodes
• All clients run the same Model — Forerunner keeps them in sync

Key code:

// Model: shared state, runs on ALL clients
class PixelModel extends Multisynq.Model {
    init() {
        this.grid = new Array(32 * 32).fill(0);
        this.subscribe("canvas", "paint", this.onPaint);
    }
    onPaint({ x, y, color }) {
        this.grid[y * 32 + x] = color;
    }
}

// View: local UI, publishes events
class PixelView extends Multisynq.View {
    handleClick(x, y) {
        this.publish("canvas", "paint",
            { x, y, color: this.selectedColor });
    }
}

Get started building your own: startsynqing.com