Fluid Framework Documentation

Build powerful collaborative applications with Microsoft Fluid Framework. Create real-time experiences where multiple users can work together seamlessly.

Fluid Framework enables real-time collaboration by providing distributed data structures that automatically synchronize changes across multiple clients, handle conflicts intelligently, and work offline with seamless reconnection.

Quick Start

Get up and running with Fluid Framework in under 10 minutes. Install the packages, start the local service, and create your first collaborative application.

Installation

Install the core Fluid Framework packages for your project:

# Core packages for building Fluid apps
npm install @fluidframework/azure-client @fluidframework/map

# For local development
npm install -g @fluidframework/tinylicious

Start the local Fluid service for development:

npx tinylicious

Your First Collaborative App

Create a simple collaborative counter that syncs across multiple browser windows:

import { TinyliciousClient } from "@fluidframework/tinylicious-client";
import { SharedMap } from "@fluidframework/map";

// Define your app's data structure
const containerSchema = {
    initialObjects: {
        counterMap: SharedMap,
    },
};

// Create a Fluid client
const client = new TinyliciousClient();

async function start() {
    // Create or get existing container
    const { container } = await client.createContainer(containerSchema);
    const counterMap = container.initialObjects.counterMap;

    // Initialize counter if it doesn't exist
    if (!counterMap.has("count")) {
        counterMap.set("count", 0);
    }

    // Listen for changes from other clients
    counterMap.on("valueChanged", () => {
        document.getElementById("counter").textContent = counterMap.get("count");
    });

    // Update the display
    document.getElementById("counter").textContent = counterMap.get("count");

    // Add click handler
    document.getElementById("increment").onclick = () => {
        const current = counterMap.get("count") || 0;
        counterMap.set("count", current + 1);
    };
}

start();

Core Concepts

Fluid Framework is built around a few key concepts that make real-time collaboration simple and reliable.

Distributed Data Structures (DDS)

Fluid's distributed data structures automatically synchronize state across all connected clients. Think of them as "shared variables" that multiple users can modify simultaneously.

// SharedMap - like a JavaScript Map but collaborative
const myMap = container.initialObjects.myMap;
myMap.set("userName", "Alice");
myMap.set("status", "online");

// SharedString - collaborative text editing
const textEditor = container.initialObjects.textEditor;
textEditor.insertText(0, "Hello, ");
textEditor.insertText(7, "world!");

// SharedSequence - collaborative arrays
const taskList = container.initialObjects.taskList;
taskList.insert(0, [{ id: 1, text: "Buy groceries", done: false }]);

Containers

Containers encapsulate your collaborative data and provide a boundary for sharing. Each container has a unique ID that clients use to connect to the same shared state.

// Create a new container
const { container } = await client.createContainer(schema);

// Or join an existing container
const { container } = await client.getContainer(containerId, schema);

Event-Driven Updates

Listen for changes made by other users and update your UI accordingly:

sharedMap.on("valueChanged", (changed, local) => {
    if (!local) {
        console.log(`${changed.key} was changed by another user`);
        updateUI();
    }
});

What's Next?

Ready to build your own collaborative application? Here are the best next steps:

Learn by Example

Start with working code examples that demonstrate key concepts:

• Collaborative Counter - Your first Fluid app
• Text Editor - Real-time text collaboration
• Task Manager - Shared todo lists
• Drawing Canvas - Collaborative drawing

Dive Deeper

Explore advanced topics and patterns:

• Data Structures Guide - Master all DDS types
• Collaboration Patterns - Best practices for multi-user apps
• Performance Optimization - Scale to thousands of users
• Testing - Test collaborative features

Get Help

Join the Fluid Framework community:

• GitHub: microsoft/FluidFramework - Source code, issues, and discussions
• Documentation: fluidframework.com - Official documentation site
• Stack Overflow: Tag questions with fluid-framework
• Discord: Join our community chat for real-time help

Deploy to Production

When you're ready to go live:

• Azure Fluid Relay - Microsoft's hosted Fluid service
• Self-hosting Guide - Run your own Fluid service
• Security Best Practices - Secure your collaborative apps