Skip to content

quickstart.mdx

Latest commit

 

History

History
240 lines (202 loc) · 6.92 KB

quickstart.mdx

File metadata and controls

240 lines (202 loc) · 6.92 KB
title Quickstart
description Start building real-time collaborative applications with Multisynq in under 5 minutes

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

Here's the complete working example: 
```html
<!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:

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

Testing Your App

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

Next Steps

Deep dive into Models, events, and state management Understand Views, user interaction, and UI updates Advanced session configuration and management Explore comprehensive tutorials and examples