Quickstart

Get Your API Key

Before you begin, get your free API key from multisynq.io/coder.

Create Your First Multisynq App

Step 1: Set Up HTML Structure

Create an HTML file with the Multisynq client library:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/@multisynq/client@latest/bundled/multisynq-client.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        #counter { font-size: 24px; margin: 20px 0; }
        button { padding: 10px 20px; margin: 5px; font-size: 16px; }
    </style>
</head>
<body>
    <h1>My First Multisynq App</h1>
    <div id="counter">Count: 0</div>
    <button id="reset">Reset</button>
</body>
</html>

Step 2: Create Your Model

The Model contains your application logic and handles all state changes:

class CounterModel extends Multisynq.Model {
    init() {
        this.count = 0;
        this.subscribe("counter", "reset", this.handleReset);
        this.future(1000).increment();
    }

    increment() {
        this.count += 1;
        this.future(1000).increment();
    }

    handleReset() {
        this.count = 0;
    }
}
CounterModel.register("CounterModel");

Step 3: Create Your View

The View handles user interaction and displays the current state:

class CounterView extends Multisynq.View {
    constructor(model) {
        super(model);
        this.model = model;
        this.onClickHandler = () => this.publish("counter", "reset");
        document.getElementById("reset").addEventListener("click", this.onClickHandler);
    }

    detach() {
        super.detach();
        document.getElementById("reset").removeEventListener("click", this.onClickHandler);
    }

    update() {
        super.update();
        document.getElementById("counter").textContent = `Count: ${this.model.count}`;
    }
}

Step 4: Start Your Session

Connect everything together and start your collaborative session:

// Show QR code for easy sharing
Multisynq.App.makeWidgetDock();
// Start the Multisynq session
Multisynq.Session.join({
    apiKey: "your-api-key-here",           // Get from multisynq.io/coder
    appId: "com.example.counter",          // Your unique app ID
    model: CounterModel,                   // Your model class
    view: CounterView,                     // Your view class
    name: Multisynq.App.autoSession(),     // Auto session name from URL
    password: Multisynq.App.autoPassword() // Auto password from URL
}).then(session => {
    console.log("Joined session:", session.id);
});

Complete Example

Complete HTML File

Here’s the complete working example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/@multisynq/client@latest/bundled/multisynq-client.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        #counter { font-size: 24px; margin: 20px 0; }
        button { padding: 10px 20px; margin: 5px; font-size: 16px; }
    </style>
</head>
<body>
    <h1>My First Multisynq App</h1>
    <div id="counter">Count: 0</div>
    <button id="reset">Reset</button>

    <script>
        class CounterModel extends Multisynq.Model {
            init() {
                this.count = 0;
                this.subscribe("counter", "reset", this.handleReset);
                this.future(1000).increment();
            }

            increment() {
                this.count += 1;
                this.future(1000).increment();
            }

            handleReset() {
                this.count = 0;
            }
        }
        CounterModel.register("CounterModel");

        class CounterView extends Multisynq.View {
            constructor(model) {
                super(model);
                this.model = model;
                this.onClickHandler = () => this.publish("counter", "reset");
                document.getElementById("reset").addEventListener("click", this.onClickHandler);
            }

            detach() {
                super.detach();
                document.getElementById("reset").removeEventListener("click", this.onClickHandler);
            }

            update() {
                super.update();
                document.getElementById("counter").textContent = `Count: ${this.model.count}`;
            }
        }

        // Start your Multisynq session
        Multisynq.App.makeWidgetDock();
        Multisynq.Session.join({
            apiKey: "your-api-key-here",
            appId: "com.example.counter",
            model: CounterModel,
            view: CounterView,
            name: Multisynq.App.autoSession(),
            password: Multisynq.App.autoPassword()
        }).then(session => {
            console.log("Joined session:", session.id);
        });
    </script>
</body>
</html>

How It Works

Model-View Architecture

Multisynq uses a strict Model-View separation:

Model: Contains all application logic and state. Runs in a deterministic virtual machine to ensure synchronization.
View: Handles user interface and user input. Can read from the model but never writes to it directly.
Events: All communication between Model and View happens through events.

Automatic Synchronization

When you run this app:

All users join the same session using the session name and password
The Model runs identically on every user’s device
User actions trigger events that are synchronized across all clients
Every user sees the same counter value in real-time

Testing Your App

Replace "your-api-key-here" with your actual API key
Open the HTML file in your browser
Use the QR code to join from other devices (or open the generated session URL in another browser)
Click the buttons - all connected users will see the updates instantly!

Next Steps

Learn the Model API

Deep dive into Models, events, and state management

Learn the View API

Understand Views, user interaction, and UI updates

Session Management

Advanced session configuration and management

Real Examples

Explore comprehensive tutorials and examples

Get Started

Tutorials

Conceptual

Essentials

AI Development

Get Your API Key

Create Your First Multisynq App

Step 1: Set Up HTML Structure

Step 2: Create Your Model

Step 3: Create Your View

Step 4: Start Your Session

Complete Example

How It Works

Model-View Architecture

Automatic Synchronization

Testing Your App

Next Steps

Learn the Model API

Learn the View API

Session Management

Real Examples

​Get Your API Key

​Create Your First Multisynq App

​Step 1: Set Up HTML Structure

​Step 2: Create Your Model

​Step 3: Create Your View

​Step 4: Start Your Session

​Complete Example

​How It Works

​Model-View Architecture

​Automatic Synchronization

​Testing Your App

​Next Steps

Learn the Model API

Learn the View API

Session Management

Real Examples

Get Your API Key

Create Your First Multisynq App

Step 1: Set Up HTML Structure

Step 2: Create Your Model

Step 3: Create Your View

Step 4: Start Your Session

Complete Example

How It Works

Model-View Architecture

Automatic Synchronization

Testing Your App

Next Steps