https://github.com/gkjohnson/collaborative-code-editor

Collaborative code editor using Ace Editor, Code-Mirror, and ShareDB
https://github.com/gkjohnson/collaborative-code-editor

ace ace-editor code code-editor code-mirror collaboration sharedb text-collaboration

Last synced: 2 days ago
JSON representation

Collaborative code editor using Ace Editor, Code-Mirror, and ShareDB

• Host: GitHub
• URL: https://github.com/gkjohnson/collaborative-code-editor
• Owner: gkjohnson
• Created: 2017-07-22T04:58:18.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-23T21:12:09.000Z (about 8 years ago)
• Last Synced: 2025-06-15T20:28:59.563Z (5 months ago)
• Topics: ace, ace-editor, code, code-editor, code-mirror, collaboration, sharedb, text-collaboration
• Language: HTML
• Homepage:
• Size: 136 KB
• Stars: 37
• Watchers: 4
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# collaborative-code-editor

Collaborative Text Editor example with selection synchronization, active user display, and real time text collaboration using ShareDB. The purpose of this repo is to give a basic example setup for [ShareDB](https://github.com/share/sharedb) with an [Ace Editor](https://github.com/ajaxorg/ace) [client](/clients/ace-editor.html) and [Code-Mirror](https://codemirror.net/) [client](/clients/code-mirror.html).

![Editor Example](/docs/collaboration-image.gif)

## Details

Uses `ot-text` as an example format, but could easily be updated to use `ot-text-tp2` or other OT formats.

Because ShareDB requires precompiling source to load, a pre-built version of sharedb is copied from [this repo](https://github.com/gkjohnson/sharedb-builds).

## How To Run

Run `npm install`.

Then `npm start`.

A static file server will start on port `80`, and the ShareDB connection on port `8080`. Load up `http://localhost/clients/ace-editor.html` or `http://localhost/clients/code-mirror.html` to get collaborating!