Live Editor with React, Quill, and Socket.IO
Tags: editor
Published: 2023-12-27 18:28:35

---
title: Live Editor with React, Quill, and Socket.IO
published: true
date: 2023-12-07 00:58:00 UTC
tags: Editor
canonical_url: https://reactjsexample.com/live-editor-with-react-quill-and-socket-io/
---

# Live Editor with React, Quill, and Socket.IO
 ![Live Editor with React, Quill, and Socket.IO](https://reactjsexample.com/content/images/2023/12/Code_2023-12_12-53-38.jpg)

This project is a collaborative text editor built using React, Quill, and Socket.IO. It allows multiple users to simultaneously edit a document in real-time, with changes instantly reflected across all connected clients. The frontend is developed using Vite with React, providing a fast and efficient development environment.

## Demo

#### Spinning up containers

![Live Editor with React, Quill, and Socket.IO](https://raw.githubusercontent.com/nimish-kumar/live-editor/master/demo/images/spinning-up-containers.gif)

#### Testing on local

They share the same URL, but modifications occur exclusively on one of them.

![Live Editor with React, Quill, and Socket.IO](https://raw.githubusercontent.com/nimish-kumar/live-editor/master/demo/images/live-editor-run.gif)

#### Cleanup

![Live Editor with React, Quill, and Socket.IO](https://raw.githubusercontent.com/nimish-kumar/live-editor/master/demo/images/destroying-containers.gif)

## Table of Contents

- [Live Editor with React, Quill, and Socket.IO](#live-editor-with-react-quill-and-socketio)
  - [Demo](#demo)
    - [Spinning up containers](#spinning-up-containers)
    - [Testing on local](#testing-on-local)
    - [Cleanup](#cleanup)
  - [Table of Contents](#table-of-contents)
  - [Features](#features)
  - [Getting Started](#getting-started)
    - [Prerequisites](#prerequisites)
    - [Usage Guidelines](#usage-guidelines)
  - [Contributing](#contributing)
    - [Prerequisites](#prerequisites-1)
    - [Environment Variables](#environment-variables)
    - [Running development server](#running-development-server)

## Features

- **Real-time Collaboration** : Multiple users can collaborate and edit the same document in real-time.
- **Rich Text Editing** : The Quill editor allows for easy and intuitive rich text editing.
- **Efficient Development** : The frontend is built with Vite and React, providing a fast and efficient development environment.
- **Socket.IO Integration** : Socket.IO is used for handling real-time communication between clients.

## Getting Started

### Prerequisites

Make sure you have the following installed:

- Node.js (v20.9.0+): [Download and install Node.js](https://nodejs.org/) [ONLY FOR DEVELOPMENT]
- Docker: [Download and install Docker](https://docs.docker.com/get-docker/)
- Docker Compose: [Download and install Docker Compose](https://docs.docker.com/compose/install/)

### Usage Guidelines

1. Clone the repository:

2. To start the containers, ensure you are at the project’s root directory and execute the following command:

3. Once you see serving message, follow the link to get started.

4. To halt the containers, terminate the process in the terminal using `Ctrl+C`. To remove the containers, ensure you are at the project’s root directory and execute the following command:

5. Ensure you clear all Docker images and rebuild them, along with the containers, in case there are code changes. To remove existing images, use the following commands:

## Contributing

We welcome contributions to enhance and improve this project! Follow the steps below to get started:

### Prerequisites

Make sure you have the following installed:

- [Node.js](https://nodejs.org/)
- [pnpm](https://pnpm.io/)

### Environment Variables

Create a .env file in root directory and add the following variables:

```
PROJ\_SERVER\_PORT=8001
PROJ\_CLIENT\_PORT=5173
PROJ\_DEPLOYED\_SERVER\_URL=http://localhost:${PROJ\_SERVER\_PORT}
PROJ\_DB\_CONNECTION\_STRING=mongodb://localhost:27017/editor-db
PROJ\_DEPLOYED\_FRONTEND\_URL=http://localhost:${PROJ\_CLIENT\_PORT}
```

### Running development server

1. Start MongoDB container:

```
docker run -d -p 27017:27017 -v ~/mongodb:/data/db --name live-editor mongo:7.0.3
```

2. Switch to client/server folder. To install packages:

```
pnpm install
```

3. To run server/client:

```
pnpm run dev
```

## GitHub

[View Github](https://github.com/nimish-kumar/live-editor?ref=reactjsexample.com)