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.
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
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 Teams and Fluid “Hello World” app shows you how to integrate a Fluid Framework application into a custom Microsoft 365 Teams tab. See also Using Fluid with Microsoft Teams.