---
title: Collaborative Survey Editing
product: Survey Creator
description: This demo shows how multiple users can edit the same survey or form simultaneously in Survey Creator. Everyone works in the same survey-editing session, so changes appear immediately for all participants.
framework: React
source: https://surveyjs.io/survey-creator/examples/collaborative-survey-creator/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Collaborative Survey Editing (React)

SurveyJS supports real-time collaborative survey editing with Survey Creator, which enables multiple users to design and modify the same survey simultaneously. To start a collaborative session, click **Copy invite link** and open the link in another browser tab, window, or on another device. Changes made by one participant—including new questions, modified choices, and updated survey settings—are instantly reflected for everyone else in the session.

## How It Works

- Users join a shared editing session using a unique session ID.
- The server stores a Survey Creator model and session state in memory.
- Every change made in Survey Creator is captured as a serialized update message.
- Updates are sent to the server through WebSocket and broadcast to all other participants in the session.
- Receiving clients apply incoming updates to their local Survey Creator instance, keeping all editors synchronized.
- Temporary suppression of local change listeners prevents update loops.
- Concurrent edits are resolved using a server-driven last-write-wins strategy.

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

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

## See Also

SurveyJS also supports real-time collaborative survey filling. See the following demo:

[Collaborative Survey Filling](/form-library/examples/collaborative-survey/ (linkStyle))

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/SurveyCreatorComponent.jsx`

```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";

import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator();
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `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 SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

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

### `package.json`

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

## Other Frameworks

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