Examples

We’ve included several example apps in a GitHub repository to demonstrate both the power and simplicity of Fluid. Use these to learn and kickstart your own projects.

Brainstorming

The sticky notes brainstorming app shows how simple experiences become compelling when you make them collaborative. This example uses distributed maps (SharedMaps) to update the state of sticky notes as well as keep track of who added which ideas and who voted for those ideas.

Collaborative text area

The collaborative text area app shows how to create a text area that can be collaboratively edited by multiple clients. It uses React to create the view. See also Building a collaborative TextArea .

Separating the view from the Fluid business logic

The multiframework dice roller app shows you how to keep your view layer separate from your Fluid layer. By changing a single line of code, you can switch between views based on React, Vue, Web Components, and simple, no framework JavaScript. See also Using Fluid with React , Using Fluid with Vue , and Using Fluid with Web Components

Angular and Fluid

The Angular timestamp app shows how clients can share a timestamp. Use it as a starter template to build your own Fluid Framework application on the Angular framework. See also Using Fluid with Angular .

React and Fluid

The React dice app shows how to make incorporate Fluid state into a React-based app. Use it as a starter template to implement a React-based view for your own Fluid Framework application.

The React timestamp app shows how to integrate Fluid into an app created with the create-react-app tool. See also Using Fluid with React .

Fluid with command line clients

The NodeJS demo app shows how clients that don’t have an HTTP canvas can participate in the Fluid Framework collaboration. See also Using Fluid with NodeJS .

Fluid in a Microsoft 365 Teams tab

The Using Fluid with Microsoft Teams article shows you how to integrate a Fluid Framework application into a custom Microsoft 365 Teams tab.