---
title: Collaborative Survey Filling
product: Form Library
description: Enable multiple users to fill out the same SurveyJS form simultaneously and synchronize their responses in real time.
framework: React
source: https://surveyjs.io/form-library/examples/collaborative-survey/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Collaborative Survey Filling (React)

SurveyJS Form Library supports real-time collaborative form filling, which enables multiple participants to complete the same survey or form simultaneously. To start a session, enter your name and provide a survey JSON schema. The demo creates a room and generates a unique room ID. Open the demo in another browser tab, window, or on another device, enter the room ID, and join the session. Changes made by one participant are instantly reflected for everyone else in the session.

## How It Works

- Participants connect to a shared room using a unique room identifier.
- The server maintains the survey schema and current survey data in memory.
- When a participant updates an answer, the [`onValueChanged`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onValueChanged) event in SurveyJS is triggered, and the update is broadcast to other participants via Socket.IO.
- Receiving clients apply the change using [`survey.setValue()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#setValue), keeping all survey instances synchronized.
- A synchronization flag prevents incoming updates from triggering additional broadcasts and creating update loops.
- Conflicts are resolved using a last-write-wins strategy at the individual question level.

For implementation details and source code, refer to the following GitHub repository:

[Collaborative Form Filling by SurveyJS](https://github.com/surveyjs/collaborative-form-filling (linkStyle))

## See Also

SurveyJS also supports real-time collaborative survey editing with Survey Creator. See the following demo:

[Collaborative Survey Editing](/survey-creator/examples/collaborative-survey-creator/ (linkStyle))

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/collaborative-survey/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/collaborative-survey/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/collaborative-survey/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/collaborative-survey/vanillajs.md)