> ## Documentation Index
> Fetch the complete documentation index at: https://docs.multisynq.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart
> 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](https://multisynq.io/coder).
## Create Your First Multisynq App
### Step 1: Set Up HTML Structure
Create an HTML file with the Multisynq client library:
```html theme={null}
My First Multisynq App
Count: 0
```
### Step 2: Create Your Model
The Model contains your application logic and handles all state changes:
```javascript theme={null}
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:
```javascript theme={null}
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:
```javascript theme={null}
// 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 theme={null}
My First Multisynq App
Count: 0
```
## 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