### Install React Together Package

Source: https://github.com/multisynq/docs/blob/main/react-together/getting-started.mdx

Instructions for installing the `react-together` package using various JavaScript package managers. Choose the command corresponding to your preferred package manager (npm, yarn, pnpm, or bun) to add the dependency to your project.

```bash
npm install react-together
```

```bash
yarn add react-together
```

```bash
pnpm add react-together
```

```bash
bun add react-together
```

--------------------------------

### Multisynq Local Development Setup

Source: https://github.com/multisynq/docs/blob/main/README.md

Commands to install the Mintlify CLI globally and start the local development server for previewing Multisynq documentation. The server typically runs on http://localhost:3000.

```bash
npm install -g mintlify

mintlify dev
```

--------------------------------

### Run Mintlify Documentation Locally

Source: https://github.com/multisynq/docs/blob/main/migration/ROADMAP.md

This command is used to start the local development server for Mintlify documentation. It allows developers to test changes to MDX files and navigation locally before deployment.

```Shell
npm run docs:dev
```

--------------------------------

### Local Development Commands for Mintlify Docs

Source: https://github.com/multisynq/docs/blob/main/migration/BUILD_PROCESS.md

This snippet provides the essential bash commands for setting up and running the Mintlify documentation site locally. It covers navigating to the docs directory, installing necessary dependencies, starting a development server for live preview, and building static files for production deployment.

```bash
cd docs/

npm install

npm run docs:dev

npm run docs:build
```

--------------------------------

### Basic Multisynq Application Setup

Source: https://github.com/multisynq/docs/blob/main/api-reference/session.mdx

Provides a complete example of setting up a basic Multisynq application. It defines a `GameModel` and `GameView` extending `Multisynq.Model` and `Multisynq.View` respectively, registers the model, and then joins a session with an API key, app ID, session name, and the registered model/view classes.

```javascript
class GameModel extends Multisynq.Model {
    init() {
        this.players = [];
        this.score = 0;
        this.subscribe(this.sessionId, "playerJoined", this.addPlayer);
    }
    
    addPlayer(data) {
        this.players.push(data);
        this.publish(this.sessionId, "playersUpdated", this.players);
    }
}

class GameView extends Multisynq.View {
    constructor(model) {
        super(model);
        this.subscribe(this.sessionId, "playersUpdated", this.updatePlayerList);
    }
    
    updatePlayerList(players) {
        // Update UI with current players
    }
}

GameModel.register("GameModel");

// Start the application
Multisynq.Session.join({
    apiKey: "your_api_key_here",
    appId: "com.example.mygame",
    name: "game-room-1",
    password: "secret123", 
    model: GameModel,
    view: GameView
});
```

--------------------------------

### Configure ReactTogether Provider with All Options in TSX

Source: https://github.com/multisynq/docs/blob/main/react-together/getting-started.mdx

Demonstrates how to integrate the `ReactTogether` provider into a React application, passing all available configuration options including API key, application ID, session parameters, and user information. This setup enables real-time collaboration features for the wrapped `App` component.

```tsx
<ReactTogether
  apiKey="your_api_key_here"
  appId="com.example.myapp"
  sessionParams={{
    name: "room-123",
    password: "secret"
  }}
  userInfo={{
    nickname: "John Doe",
    color: "#ff6b6b"
  }}
>
  <App />
</ReactTogether>
```

--------------------------------

### Multisynq Documentation Local Development and Build Scripts

Source: https://github.com/multisynq/docs/blob/main/migration/ROADMAP.md

Essential Bash commands for managing the Multisynq documentation locally. These scripts allow developers to start a live development server for real-time preview, build static documentation files for deployment, and initiate the deployment process to the frontend.

```bash
# Start Mintlify dev server
npm run docs:dev

# Build static documentation
npm run docs:build

# Deploy to frontend
npm run docs:deploy
```

--------------------------------

### Install Multisynq Client via CDN

Source: https://github.com/multisynq/docs/blob/main/api-reference/introduction.mdx

This snippet demonstrates how to include the Multisynq client library directly in an HTML page using a Content Delivery Network (CDN). It's the simplest way to get started with Multisynq in a web project.

```html
<script src="https://cdn.jsdelivr.net/npm/@multisynq/client@latest/bundled/multisynq-client.min.js"></script>
```

--------------------------------

### Start Multisynq Session

Source: https://github.com/multisynq/docs/blob/main/quickstart.mdx

This JavaScript code initializes and joins a Multisynq collaborative session. It configures the session with essential parameters like an API key, a unique application ID, and the custom `CounterModel` and `CounterView` classes. Upon successful connection, it logs the session ID and displays a QR code widget for easy sharing.

```javascript
// 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);
    
    // Show QR code for easy sharing
    Multisynq.App.makeWidgetDock();
});
```

--------------------------------

### Quick Start Multisynq Session Join

Source: https://github.com/multisynq/docs/blob/main/api-reference/session.mdx

Demonstrates how to quickly join a Multisynq session using `Multisynq.Session.join()`, providing essential configuration like API key, app ID, and model/view classes. This snippet shows a basic setup for connecting to a shared application.

```javascript
Multisynq.Session.join({
    apiKey: "your_api_key_here",           // Get from multisynq.io/coder
    appId: "com.example.myapp",            // Your app identifier
    name: Multisynq.App.autoSession(),     // Auto-generated session name
    password: Multisynq.App.autoPassword(), // Auto-generated password
    model: MyGameModel,                    // Your Model class
    view: MyGameView                       // Your View class
}).then(session => {
    console.log("Joined session:", session.id);
});
```

--------------------------------

### React Together Quick Start Example

Source: https://github.com/multisynq/docs/blob/main/essentials/vibe-coding.mdx

Demonstrates a basic collaborative counter application using `useStateTogether` from the `react-together` library. This snippet shows how to set up a shared state that automatically synchronizes across multiple users.

```tsx
import { ReactTogether, useStateTogether } from 'react-together';

function App() {
  const [count, setCount] = useStateTogether('counter', 0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}
```

--------------------------------

### Wrap React App with ReactTogether Provider

Source: https://github.com/multisynq/docs/blob/main/react-together/getting-started.mdx

This snippet shows how to wrap your main React application with the `ReactTogether` provider. This provider is essential for initializing the React Together client, configuring your API key and application ID, and optionally setting session parameters for your collaborative environment.

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { ReactTogether } from 'react-together'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <ReactTogether
    apiKey="your_api_key_here"
    appId="com.example.myapp"
    sessionParams={{
      name: "my-session",
      password: "optional-password"
    }}
  >
    <App />
  </ReactTogether>
)
```

--------------------------------

### Install and Import react-together Library

Source: https://github.com/multisynq/docs/blob/main/multisynq-react-llm.md

Instructions for installing the `react-together` library via npm and importing its components in both Node.js/bundler environments and directly from a CDN for browser-based applications.

```bash
npm install react-together@latest
```

```javascript
import { ReactTogether, useStateTogether } from 'react-together';
```

```javascript
import { ReactTogether } from 'https://cdn.jsdelivr.net/npm/react-together@latest/+esm';
```

--------------------------------

### Mintlify MDX Component Usage Examples

Source: https://github.com/multisynq/docs/blob/main/README.md

Examples demonstrating the usage of various built-in Mintlify MDX components for structuring and styling documentation content. This includes components like `Card` for features, `CodeGroup` for multi-language code blocks, `Tabs` for content variations, and `Warning`/`Note` for important messages.

```mdx
<Card title="Feature" icon="rocket">
  Description of the feature
</Card>

<CodeGroup>
```bash npm
npm install react-together
```

```bash yarn
yarn add react-together
```
</CodeGroup>

<Tabs>
  <Tab title="JavaScript">
    Content for JS tab
  </Tab>
  <Tab title="React">
    Content for React tab
  </Tab>
</Tabs>

<Warning>
Important warning message
</Warning>

<Note>
Helpful note or tip
</Note>
```

--------------------------------

### Copy React Together Enhanced Guide Context to Clipboard

Source: https://github.com/multisynq/docs/blob/main/essentials/vibe-coding.mdx

This JavaScript snippet fetches the content of the '/multisynq-react-llm.md' file, which contains the React Together enhanced guide context, and copies it to the user's clipboard. It provides a convenient way to access the full guide for building React-based collaborative applications.

```JavaScript
fetch('/multisynq-react-llm.md').then(r => r.text()).then(content => {
  navigator.clipboard.writeText(content);
  alert('React Enhanced Context copied to clipboard!');
}).catch(() => alert('Could not copy file. Please download manually.'));
```

--------------------------------

### Multisynq Game View Implementation Example

Source: https://github.com/multisynq/docs/blob/main/tutorials/model-view-synchronizer.mdx

A practical example of a Multisynq View, showing how it initializes UI elements, subscribes to local events from the Model, handles user input by publishing events to the Model, and renders the game state by reading from the Model. View operations are local to the client.

```js
class GameView extends Multisynq.View {
    init() {
        this.canvas = document.getElementById('game-canvas');
        this.ctx = this.canvas.getContext('2d');
        
        // Subscribe to model events
        this.subscribe("player-added", this.onPlayerAdded);
        
        // Handle user input
        document.addEventListener('keydown', this.handleKeyDown);
    }
    
    handleKeyDown(event) {
        // Send to model via event
        this.publish("player-move", {
            playerId: this.viewId,
            direction: event.key
        });
    }
    
    update() {
        // Read from model (allowed)
        const players = this.model.players;
        
        // Render locally
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        for (const player of players.values()) {
            this.drawPlayer(player);
        }
    }
    
    onPlayerAdded(player) {
        // Local feedback only
        this.showNotification(`${player.name} joined!`);
    }
}
```

--------------------------------

### Create a Synchronized Counter with React Together

Source: https://github.com/multisynq/docs/blob/main/react-together/getting-started.mdx

This example demonstrates how to create a real-time synchronized counter across multiple users using the `useStateTogether` hook from React Together. It shows a basic setup where a button increments a shared `count` state, which automatically synchronizes across all connected clients.

```tsx
import { useStateTogether } from 'react-together'

export function SynchronizedCounter() {
  const [count, setCount] = useStateTogether('counter', 0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}
```

--------------------------------

### Get Connected Users with useConnectedUsers Hook

Source: https://github.com/multisynq/docs/blob/main/react-together/getting-started.mdx

The `useConnectedUsers` hook provides a list of all users currently connected to the session. This example demonstrates how to fetch and display user information, including their IDs and nicknames, allowing you to build features like participant lists or presence indicators.

```tsx
import { useConnectedUsers } from 'react-together'

function UserList() {
  const users = useConnectedUsers()
  
  return (
    <div>
      <h3>Connected Users ({users.length})</h3>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.nickname || `User ${user.id.slice(0, 8)}`}
          </li>
        ))}
      </ul>
    </div>
  )
}
```

--------------------------------

### Initialize Multisynq Session with `Multisynq.Session.join()`

Source: https://github.com/multisynq/docs/blob/main/tutorials/hello-world.mdx

Demonstrates how to join a Multisynq session using `Multisynq.Session.join()`, passing essential configuration parameters like API key, application ID, and references to the Model and View classes. This initiates the connection, model state management, and UI rendering.

```javascript
Multisynq.Session.join({
    apiKey: "your_api_key_here",
    appId: "com.example.hello-world", 
    name: Multisynq.App.autoSession(),
    password: Multisynq.App.autoPassword(),
    model: MyModel,
    view: MyView
});
```

--------------------------------

### Set Up HTML Structure for Multisynq App

Source: https://github.com/multisynq/docs/blob/main/quickstart.mdx

This HTML snippet provides the basic page structure for a Multisynq application, including the necessary client library import from CDN, basic styling, and UI elements (a counter display and buttons) for a simple counter application.

```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="increment">+1</button>
    <button id="reset">Reset</button>
</body>
</html>
```

--------------------------------

### Use React Together Core Hooks in an App Component

Source: https://github.com/multisynq/docs/blob/main/react-together/getting-started.mdx

This example demonstrates the basic usage of `useStateTogether` for synchronizing a message and `useConnectedUsers` for displaying the count of active users within a React component. It illustrates how these hooks can be integrated to build interactive, real-time collaborative features.

```tsx
import { useStateTogether, useConnectedUsers } from 'react-together'

function App() {
  const [message, setMessage] = useStateTogether('message', 'Hello World!')
  const connectedUsers = useConnectedUsers()

  return (
    <div>
      <h1>{message}</h1>
      <input 
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type a message..."
      />
      <p>Connected users: {connectedUsers.length}</p>
    </div>
  )
}
```

--------------------------------

### Multisynq Application HTML Structure

Source: https://github.com/multisynq/docs/blob/main/tutorials/hello-world.mdx

Provides the basic HTML boilerplate for a Multisynq application, including a `div` for displaying the counter, a script tag for the Multisynq client library, and a placeholder for application-specific JavaScript code, demonstrating how to integrate Multisynq into a web page.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Multisynq Hello World</title>
</head>
<body>
    <h1>Multisynq Hello World</h1>
    <div id="countDisplay">0</div>
    <p>Click the counter to reset it!</p>
    
    <script src="https://cdn.jsdelivr.net/npm/@multisynq/client@latest"></script>
    <script>
        // Model and View code goes here
        
        // Start the application
        Multisynq.Session.join({
            apiKey: "your_api_key_here",
            appId: "com.example.hello-world",
            name: Multisynq.App.autoSession(),
            password: Multisynq.App.autoPassword(),
            model: MyModel,
            view: MyView
        });
    </script>
</body>
</html>
```

--------------------------------

### Build a Real-time Collaborative Todo List with useStateTogether in TSX

Source: https://github.com/multisynq/docs/blob/main/react-together/getting-started.mdx

Illustrates how to create a real-time collaborative todo list application using the `useStateTogether` hook from 'react-together'. This example demonstrates state synchronization for adding, toggling, and deleting todo items across multiple users, showcasing the hook's ability to manage shared application state.

```tsx
import { useStateTogether } from 'react-together'
import { useState } from 'react'

interface Todo {
  id: string
  text: string
  completed: boolean
  createdBy: string
}

function TodoApp() {
  const [todos, setTodos] = useStateTogether<Todo[]>('todos', [])
  const [newTodo, setNewTodo] = useState('')

  const addTodo = () => {
    if (newTodo.trim()) {
      const todo: Todo = {
        id: crypto.randomUUID(),
        text: newTodo,
        completed: false,
        createdBy: 'current-user' // In real app, get from user context
      }
      setTodos([...todos, todo])
      setNewTodo('')
    }
  }

  const toggleTodo = (id: string) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ))
  }

  const deleteTodo = (id: string) => {
    setTodos(todos.filter(todo => todo.id !== id))
  }

  return (
    <div>
      <h1>Collaborative Todo List</h1>
      
      <div>
        <input
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="Add a new todo..."
        />
        <button onClick={addTodo}>Add</button>
      </div>

      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ 
            textDecoration: todo.completed ? 'line-through' : 'none' 
          }}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span>{todo.text}</span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  )
}
```

--------------------------------

### Complete Multisynq Hello World Web Application

Source: https://github.com/multisynq/docs/blob/main/tutorials/hello-world.mdx

A full HTML document demonstrating a basic Multisynq real-time synchronized counter. It includes embedded CSS for styling, and JavaScript code defining a Multisynq Model (MyModel) to manage the counter state and a Multisynq View (MyView) to interact with the DOM, showcasing publish/subscribe patterns and session joining.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Multisynq Hello World</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        #countDisplay {
            font-size: 72px;
            color: #007bff;
            cursor: pointer;
            user-select: none;
            padding: 20px;
            border: 2px solid #007bff;
            border-radius: 10px;
            display: inline-block;
            margin: 20px;
        }
        #countDisplay:hover {
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <h1>Multisynq Hello World</h1>
    <p>Counter updates every second. Click to reset!</p>
    <div id="countDisplay">0</div>
    <p><small>Open this page in multiple tabs to see real-time sync!</small></p>
    
    <script src="https://cdn.jsdelivr.net/npm/@multisynq/client@latest"></script>
    <script>
        class MyModel extends Multisynq.Model {
            init() {
                this.count = 0;
                this.subscribe("counter", "reset", this.resetCounter);
                this.future(1000).tick();
            }

            resetCounter() {
                this.count = 0;
                this.publish("counter", "changed");
            }

            tick() {
                this.count++;
                this.publish("counter", "changed");
                this.future(1000).tick();
            }
        }

        MyModel.register("MyModel");

        class MyView extends Multisynq.View {
            constructor(model) {
                super(model);
                this.model = model;
                countDisplay.onclick = event => this.counterReset();
                this.subscribe("counter", "changed", this.counterChanged);
                this.counterChanged();
            }

            counterReset() {
                this.publish("counter", "reset");
            }

            counterChanged() {
                countDisplay.textContent = this.model.count;
            }
        }

        // Start the application
        Multisynq.Session.join({
            apiKey: "your_api_key_here", // Get your free key at multisynq.io/coder
            appId: "com.example.hello-world",
            name: Multisynq.App.autoSession(),
            password: Multisynq.App.autoPassword(),
            model: MyModel,
            view: MyView
        });
    </script>
</body>
</html>
```

--------------------------------

### ReactTogether Full Application Setup Example

Source: https://github.com/multisynq/docs/blob/main/react-together/components/react-together.mdx

Illustrates how to integrate `ReactTogether` at the root of a React application using `ReactDOM.createRoot`, configuring the session with environment variables for the API key and specific application details.

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { ReactTogether } from 'react-together'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <ReactTogether
    sessionParams={{
      apiKey: process.env.REACT_APP_MULTISYNQ_API_KEY!,
      appId: "com.example.collaborative-editor",
      name: "main-session",
      password: "secure-password"
    }}
  >
    <App />
  </ReactTogether>
)
```

--------------------------------

### Implement Real-time Counter with Multisynq HTML/JavaScript

Source: https://github.com/multisynq/docs/blob/main/quickstart.mdx

This snippet provides a complete HTML file for a real-time counter application using the Multisynq client library. It defines a `CounterModel` for state management and a `CounterView` for UI updates, demonstrating how to subscribe to and publish events for synchronization. The application requires the Multisynq client library and an API key to function.

```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="increment">+1</button>
    <button id="reset">Reset</button>
    
    <script>
        class CounterModel extends Multisynq.Model {
            init() {
                this.count = 0;
                this.subscribe(this.sessionId, "increment", this.handleIncrement);
                this.subscribe(this.sessionId, "reset", this.handleReset);
            }
            
            handleIncrement() {
                this.count += 1;
                this.publish(this.sessionId, "countChanged", this.count);
            }
            
            handleReset() {
                this.count = 0;
                this.publish(this.sessionId, "countChanged", this.count);
            }
        }
        
        class CounterView extends Multisynq.View {
            constructor(model) {
                super(model);
                this.subscribe(this.sessionId, "countChanged", this.updateDisplay);
                this.setupUI();
                this.updateDisplay(model.count);
            }
            
            setupUI() {
                document.getElementById("increment").addEventListener("click", () => {
                    this.publish(this.sessionId, "increment");
                });
                
                document.getElementById("reset").addEventListener("click", () => {
                    this.publish(this.sessionId, "reset");
                });
            }
            
            updateDisplay(count) {
                document.getElementById("counter").textContent = `Count: ${count}`;
            }
        }
        
        // Start your Multisynq session
        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);
            Multisynq.App.makeWidgetDock();
        });
    </script>
</body>
</html>
```

--------------------------------

### Start Educational Study Group Session with React

Source: https://github.com/multisynq/docs/blob/main/react-together/hooks/use-create-random-session.mdx

Shows how to initiate a study group session. The example saves the specific topic to local storage before calling `createRandomSession` to create the shared environment.

```tsx
const startStudySession = (topic: string) => {
  localStorage.setItem('studyTopic', topic)
  createRandomSession()
}
```

--------------------------------

### Basic Usage of SessionManager Component

Source: https://github.com/multisynq/docs/blob/main/react-together/components/session-manager.mdx

Demonstrates the minimal setup for integrating the `SessionManager` component into a React application. This example shows how to import and place the component within a typical app structure, typically in a fixed position for easy access.

```tsx
import { SessionManager } from 'react-together'

function MyApp() {
  return (
    <div className="app">
      {/* Your main app content */}
      <main>
        <h1>My Collaborative App</h1>
        <div className="content">
          {/* App content goes here */}
        </div>
      </main>
      
      {/* Session manager button - typically in a corner */}
      <div className="fixed bottom-4 right-4">
        <SessionManager />
      </div>
    </div>
  )
}
```

--------------------------------

### Example of a Simple Game Not Requiring Session Persistence

Source: https://github.com/multisynq/docs/blob/main/tutorials/persistence.mdx

Shows a `PongModel` where game state (ball position, player scores) is designed to reset with each new session. This illustrates a scenario where `persistSession()` is not necessary because there is no long-term data to preserve, and the application benefits from starting fresh.

```js
class PongModel extends Multisynq.Model {
    init() {
        // Game state that resets each session
        this.ball = { x: 50, y: 50, vx: 1, vy: 1 };
        this.players = new Map();
        this.score = { left: 0, right: 0 };
        
        // No persistence needed - games start fresh
    }
}
```

--------------------------------

### Multisynq View Constructor Initialization

Source: https://github.com/multisynq/docs/blob/main/tutorials/hello-world.mdx

Initializes the `MyView` class, setting up the model reference, attaching an event listener to `countDisplay` for user interaction, subscribing to 'counter' changes from the model, and immediately updating the display to reflect the initial state.

```javascript
constructor(model) {
    super(model);
    this.model = model;
    countDisplay.onclick = event => this.counterReset();
    this.subscribe("counter", "changed", this.counterChanged);
    this.counterChanged();
}
```

--------------------------------

### Multisynq.Session.join() Parameters

Source: https://github.com/multisynq/docs/blob/main/tutorials/hello-world.mdx

Documents the parameters required for the `Multisynq.Session.join()` method, detailing their types, whether they are required, and their purpose in configuring the Multisynq session. This includes API keys, application identifiers, and references to application-specific Model and View classes.

```APIDOC
Multisynq.Session.join(options: object)
  - options: An object containing session configuration parameters.
    - apiKey: string (required)
      Your API key obtained from multisynq.io/coder.
    - appId: string (required)
      A unique identifier for your application (e.g., "com.example.hello-world").
    - name: string (optional)
      The name for the session. Use `Multisynq.App.autoSession()` for an auto-generated name.
    - password: string (optional)
      The password for the session. Use `Multisynq.App.autoPassword()` for an auto-generated secure password.
    - model: class (required)
      Your application's Model class, which manages the application state.
    - view: class (required)
      Your application's View class, which handles the user interface and interactions.
```

--------------------------------

### Multisynq Automatic Session and Password Helpers

Source: https://github.com/multisynq/docs/blob/main/tutorials/hello-world.mdx

Illustrates the use of `Multisynq.App.autoSession()` and `Multisynq.App.autoPassword()` for generating random session names and secure passwords. These utilities simplify session setup by providing unique identifiers and credentials automatically.

```javascript
// Generate random session names
name: Multisynq.App.autoSession(), // Returns something like "abc12"

// Generate random passwords  
password: Multisynq.App.autoPassword(), // Returns a secure password
```

--------------------------------

### Multisynq Application Session Setup (JavaScript)

Source: https://github.com/multisynq/docs/blob/main/multisynq-js.txt

This code snippet demonstrates how to initialize a Multisynq application session. It first calls `Multisynq.App.makeWidgetDock()` to display a QR code for session joining, then uses `Multisynq.Session.join()` to connect the application, providing an API key, application ID, and linking the game's model and view components.

```javascript
Multisynq.App.makeWidgetDock(); // show QR code
Multisynq.Session.join({
		apiKey: '234567_Paste_Your_Own_API_Key_Here_7654321', // get your own from multisynq.io/coder
		appId: 'io.multisynq.multiblaster-tutorial',
		model: Game,
		view: Display,
	});
```

--------------------------------

### ReactTogether Provider Component Props API

Source: https://github.com/multisynq/docs/blob/main/react-together/getting-started.mdx

Defines the configuration properties for the `ReactTogether` provider component, which initializes the real-time collaboration environment. These props include authentication details, application identifiers, session-specific settings, and user metadata for collaborative features.

```APIDOC
ReactTogether Provider Props:
  apiKey: string (required)
    - Your Multisynq API key from multisynq.io/coder.
  appId: string (required)
    - Unique identifier for your app (e.g., "com.example.myapp").
  sessionParams: object (optional)
    - Session configuration options.
    sessionParams.name: string (optional)
      - Session name to join. If not provided, will auto-generate from URL parameters.
    sessionParams.password: string (optional)
      - Optional session password for private rooms.
  userInfo: object (optional)
    - Information about the current user.
    userInfo.nickname: string (optional)
      - Display name for the current user.
    userInfo.color: string (optional)
      - Color to represent this user (for cursors, etc.).
```

--------------------------------

### Implementing a Basic Team Chat with React-Together

Source: https://github.com/multisynq/docs/blob/main/react-together/components/chat.mdx

Illustrates a simple team chat setup using the `Chat` component within a dashboard layout. This example also demonstrates how to use the `useConnectedUsers` hook to display the number of online users, enhancing the chat's interactivity.

```tsx
import { Chat, useConnectedUsers } from 'react-together'

function TeamChat() {
  const connectedUsers = useConnectedUsers()
  
  return (
    <div className="team-dashboard">
      <div className="header">
        <h1>Team Dashboard</h1>
        <div className="user-count">
          {connectedUsers.length} user(s) online
        </div>
      </div>
      
      <div className="main-content">
        {/* Your main app content */}
        <div className="workspace">
          <p>Main workspace content here...</p>
        </div>
        
        {/* Sidebar chat */}
        <div className="chat-sidebar">
          <Chat 
            rtKey="team-chat"
            chatName="💬 Team Chat"
          />
        </div>
      </div>
    </div>
  )
}
```

--------------------------------

### Include Multisynq Client Library in HTML

Source: https://github.com/multisynq/docs/blob/main/tutorials/hello-world.mdx

This HTML snippet demonstrates how to include the Multisynq client library from a CDN. Adding this script tag makes the Multisynq API available in your web application, enabling real-time synchronization features.

```html
<script src="https://cdn.jsdelivr.net/npm/@multisynq/client@latest"></script>
```

--------------------------------

### Display Game Lobby Players and Manage State with React-Together

Source: https://github.com/multisynq/docs/blob/main/react-together/components/connected-users.mdx

This example illustrates building a dynamic game lobby UI that displays connected players using `ConnectedUsers` and manages shared game state (like max players and game started status) with `useStateTogether`. It dynamically renders player slots, shows player information, and enables a 'Start Game' button based on the current number of connected players, demonstrating real-time state synchronization for interactive applications.

```tsx
import { ConnectedUsers, useConnectedUsers, useStateTogether } from 'react-together'

function GameLobby() {
  const connectedUsers = useConnectedUsers()
  const [gameState, setGameState] = useStateTogether('game', {
    maxPlayers: 4,
    gameStarted: false
  })
  
  const canStartGame = connectedUsers.length >= 2 && connectedUsers.length <= gameState.maxPlayers
  
  return (
    <div className="game-lobby">
      <div className="lobby-header">
        <h1>🎮 Game Lobby</h1>
        <div className="lobby-status">
          <div className="player-count">
            {connectedUsers.length} / {gameState.maxPlayers} players
          </div>
          <div className="lobby-state">
            {gameState.gameStarted ? '🎯 In Game' : '⏳ Waiting'}
          </div>
        </div>
      </div>
      
      <div className="lobby-content">
        <div className="players-section">
          <h2>Players</h2>
          <div className="players-display">
            <ConnectedUsers maxAvatars={gameState.maxPlayers} />
          </div>
          
          <div className="player-slots">
            {Array.from({ length: gameState.maxPlayers }).map((_, index) => {
              const user = connectedUsers[index]
              return (
                <div 
                  key={index}
                  className={`player-slot ${user ? 'occupied' : 'empty'}`}
                >
                  {user ? (
                    <div className="player-info">
                      <div className="player-avatar">
                        {user.nickname ? user.nickname[0].toUpperCase() : '?'}
                      </div>
                      <span className="player-name">
                        {user.nickname || `Player ${user.userId.slice(0, 6)}`}
                      </span>
                      <span className="player-status">🟢 Ready</span>
                    </div>
                  ) : (
                    <div className="empty-slot">
                      <div className="empty-avatar">?</div>
                      <span className="empty-text">Waiting for player...</span>
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        </div>
        
        <div className="lobby-controls">
          <button
            onClick={() => setGameState(prev => ({ ...prev, gameStarted: true }))}
            disabled={!canStartGame}
            className="start-game-btn"
          >
            {canStartGame ? 'Start Game' : 'Need 2-4 players'}
          </button>
        </div>
      </div>
    </div>
  )
}
```

--------------------------------

### MultiSynq Client Initialization Requirements

Source: https://github.com/multisynq/docs/blob/main/multisynq-js.txt

Essential setup notes for initializing the MultiSynq client, detailing required parameters like `apiKey` and `appId`, and domain allowlisting for proper connection. These configurations are critical for the client to establish and maintain a connection with the MultiSynq service.

```APIDOC
MultiSynq Client Connection Parameters:
  apiKey: string
    - Description: Your unique API key obtained from multisynq.io/coder.
    - Constraint: MUST be provided for connection.

  appId: string
    - Description: A unique identifier for your application.
    - Constraint: MUST be a string of dot.separated.words (e.g., "com.example.myapp").
    - Constraint: MUST be provided for connection.

Domain Allowlisting:
  - Requirement: Users MUST allowlist their hosting domain or enable "Allow localhost & local network" via https://multisynq.io/account/.
  - Purpose: Ensures secure and authorized connections from your application's hosting environment to the MultiSynq service.
```

--------------------------------

### Setting Up Dynamic UI and Styles for Audio Recorder

Source: https://github.com/multisynq/docs/blob/main/tutorials/data-api.mdx

The `setupUI` method dynamically injects the main HTML structure for the voice message application into the document body. It also creates and appends a `<style>` element to the document head, defining the CSS rules for the application's layout and appearance, including buttons, recording indicators, and list items.

```JavaScript
setupUI() {
        document.body.innerHTML = `
            <div id="app">
                <header>
                    <h1>Voice Messages</h1>
                    <div class="recording-controls">
                        <button id="record-btn" class="btn btn-record">🎤 Start Recording</button>
                        <span id="recording-time" class="recording-time"></span>
                    </div>
                </header>
                <main>
                    <div id="recordings-list" class="recordings"></div>
                </main>
            </div>
        `;
        
        const style = document.createElement('style');
        style.textContent = `
            body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f5f5f5; }
            #app { max-width: 800px; margin: 0 auto; }
            header { background: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; }
            .recording-controls { margin-top: 15px; }
            .btn { padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; }
            .btn-record { background: #28a745; color: white; }
            .btn-record.recording { background: #dc3545; }
            .recording-time { margin-left: 15px; font-weight: bold; color: #dc3545; }
            .recordings { display: flex; flex-direction: column; gap: 15px; }
            .recording-card { background: white; padding: 20px; border-radius: 10px; }
            .recording-header { display: flex; justify-content: between; align-items: center; }
            .recording-meta { color: #666; margin: 10px 0; }
            .recording-controls { display: flex; gap: 10px; align-items: center; }
            .btn-play { background: #007bff; color: white; }
            .btn-delete { background: #dc3545; color: white; }
        `;
        document.head.appendChild(style);
    }
```

--------------------------------

### GitHub Actions Workflow for Documentation Tests

Source: https://github.com/multisynq/docs/blob/main/tests/README.md

This YAML configuration defines a GitHub Actions workflow for running documentation tests on push and pull request events. It sets up Node.js, installs dependencies, starts the documentation site, and executes Playwright tests in a CI environment.

```yaml
name: Documentation Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: |
          cd docs/tests
          npm install
          npm run install:browsers
      
      - name: Start documentation site
        run: |
          cd docs
          npm run docs:dev &
          sleep 30  # Wait for site to start
      
      - name: Run tests
        run: |
          cd docs/tests
          npm run test:ci
        env:
          CI: true
          DOCS_BASE_URL: http://localhost:3000
```

--------------------------------

### Proper Multisynq Model Initialization using init()

Source: https://github.com/multisynq/docs/blob/main/tutorials/writing-multisynq-model.mdx

Demonstrates the recommended structure for the `init()` method in a `Multisynq.Model` subclass. It covers setting default properties, applying configuration options, setting up recurring behaviors (physics, AI), and event subscriptions, ensuring a clean and predictable model state.

```js
class GameObject extends Multisynq.Model {
    init(options = {}) {
        // Set default values first
        this.position = { x: 0, y: 0 };
        this.velocity = { x: 0, y: 0 };
        this.health = 100;
        this.maxHealth = 100;
        this.alive = true;
        
        // Apply options
        if (options.position) {
            this.position = { ...options.position };
        }
        if (options.health !== undefined) {
            this.health = options.health;
            this.maxHealth = options.health;
        }
        
        // Setup behaviors
        this.setupPhysics();
        this.startAI();
        
        // Subscribe to events
        this.subscribe(this.id, "damage", this.takeDamage);
        this.subscribe(this.id, "heal", this.heal);
    }
    
    setupPhysics() {
        // Start physics update loop
        this.future(1000/60).updatePhysics();
    }
    
    startAI() {
        // Start AI decision loop
        this.future(500).makeDecision();
    }
    
    takeDamage(damage) {
        this.health = Math.max(0, this.health - damage);
        if (this.health <= 0 && this.alive) {
            this.die();
        }
    }
    
    heal(amount) {
        this.health = Math.min(this.maxHealth, this.health + amount);
    }
    
    die() {
        this.alive = false;
        this.publish("game", "entity-died", this.id);
        
        // Remove after death animation
        this.future(2000).destroy();
    }
    
    updatePhysics() {
        if (!this.alive) return;
        
        this.position.x += this.velocity.x / 60;
        this.position.y += this.velocity.y / 60;
        
        // Continue physics loop
        this.future(1000/60).updatePhysics();
    }
    
    makeDecision() {
        if (!this.alive) return;
        
        // AI decision logic here
        this.chooseAction();
        
        // Continue AI loop
        this.future(500).makeDecision();
    }
}

GameObject.register("GameObject");
```

--------------------------------

### JavaScript Model State Management Guidelines

Source: https://github.com/multisynq/docs/blob/main/tutorials/hello-world.mdx

Provides best practices for defining model state in Multisynq applications, advocating for simple, serializable data types (like numbers, strings, arrays) and advising against complex DOM elements or function references to ensure proper synchronization and serialization.

```javascript
// Good: Simple data types
this.count = 0;
this.players = [];
this.gameState = "waiting";

// Avoid: Complex objects or functions
this.domElement = document.getElementById("something"); // No!
this.callback = () => {}; // No!
```

--------------------------------

### Multisynq View Class Definition

Source: https://github.com/multisynq/docs/blob/main/tutorials/hello-world.mdx

Defines a JavaScript class `MyView` extending `Multisynq.View`, demonstrating constructor setup, event subscription, and methods for handling user interactions and model changes. This class manages the UI and reacts to model updates.

```javascript
class MyView extends Multisynq.View {
    constructor(model) {
        super(model);
        this.model = model;
        countDisplay.onclick = event => this.counterReset();
        this.subscribe("counter", "changed", this.counterChanged);
        this.counterChanged();
    }

    counterReset() {
        this.publish("counter", "reset");
    }

    counterChanged() {
        countDisplay.textContent = this.model.count;
    }
}
```

--------------------------------

### Preserving Game State with Multisynq Snapshots

Source: https://github.com/multisynq/docs/blob/main/tutorials/snapshots.mdx

This JavaScript example shows how to structure `Multisynq.Model` and `Multisynq.View` classes to automatically preserve and restore game state using snapshots. The model initializes core game variables, which are then automatically saved, while the view handles displaying the state for both fresh starts and resumed sessions.

```js
class GameModel extends Multisynq.Model {
    init() {
        // Fresh game start
        this.level = 1;
        this.score = 0;
        this.players = new Map();
        this.gameState = "waiting";
        this.startTime = Date.now();
    }
    
    // All this state is automatically preserved
    // When users rejoin, they continue exactly where they left off
}

class GameView extends Multisynq.View {
    init() {
        // Handle both fresh starts and snapshot resumes
        this.initializeUI();
        this.displayCurrentState();
    }
    
    displayCurrentState() {
        // Show current level, score, etc.
        this.updateScore(this.model.score);
        this.updateLevel(this.model.level);
        
        // Display existing players
        for (const player of this.model.players.values()) {
            this.createPlayerDisplay(player);
        }
    }
}
```