Giter Club home page Giter Club logo

collaborative-editor's Introduction

Collaborative Editing Demo with Ably and FaunaDB

This is a collaborative text editor demo that uses Ably for real-time communication and Quill.js as the text editor. The backend makes use of FaunaDB to persist metadata about the editing. It demonstrates how to create a collaborative experience, with each user's cursor position and changes to the document being synced in realtime.

Getting Started

To get the project running locally:

  1. Clone this repository.
  2. Navigate into the project directory and run npm install to install the dependencies.
  3. Create a .env file at the root of your project and add the following variable:
ABLY_API_KEY=your-ably-api-key

Replace your-ably-api-key with your actual Ably API key.

  1. Run npm run dev to start the development server. Open http://localhost:3000 with your browser to see the result.

How to Use

Once the project is running, you will see a basic text editor on the main page. You can type and edit text in this editor. If you open the same page in another browser or tab, you will see that all changes are synced across all instances of the editor. This allows multiple users to edit the same document at the same time, with each user's changes being reflected in real-time for all other users.

Each user is also assigned a random username and cursor color when they load the page, and the cursor position of each user is synced across all instances of the editor. This allows users to see in real-time where other users are in the document.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.

License

This project is open source and available under the Apache 2.0 License.

collaborative-editor's People

Contributors

tomczoink avatar

Watchers

Matthew O'Riordan avatar Lewis Marshall avatar Paddy Byers avatar Srushtika Neelakantam avatar  avatar Moyosore Sosan avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.