/p2p-editor

Online code editor based on P2P and JavaScript. Demo:

Primary LanguageJavaScriptMIT LicenseMIT

P2P Editor

codely.tv CodelyTV Courses

P2P code editor for live coding sessions that works in the browser.

This parallel P2P universe is still very dark. Create a Star if you want to make it brighter ๐ŸŒŸ

๐Ÿš€ Explore the universe ยป

Online demo ยท Roadmap ยท Contribute

๐Ÿ“œ Table of Contents

๐Ÿ’ก What does P2P Editor do?

P2P Editor is a code editor that works in the browser which lets you share live coding sessions. See it by yourself sharing a new session:

  1. Open a P2P Editor session in your browser
  2. Share your session URL with someone else (or even with yourself in another browser window ๐Ÿ˜ฌ)
  3. Start typing and enjoy the real time experience!

The functionalities are limited for now, but we have a roadmap and some good first issues to make P2P Editor awesome. Take a look to the Contributing section if you want to get involved ๐Ÿ™Œ.

๐Ÿค” Why P2P?

We have removed the need of having a centralized server where all the changes get saved. The communication is done from one peer (a connected user) to the other one. By doing this we have some benefits, but we also have to take into account the added complexity:

Benefits of P2P

  • Direct communication: reduce latency and bandwidth.
  • No servers: no cloud, no scaling, no deploy, no devops...
  • No SaaS:
    • Availability.
    • No usage restriction.
    • No unknown (malicious or not) usage of your data.

Added complexities of being fully distributed

  • Data consistency.
  • Network partition / topology.
  • Peer discovery and connection establishment.
  • Authentication / Authorization.
  • Security and privacy.

We have a particular interest in P2P application development. You can read more in the About section.

๐Ÿ—๏ธ Architecture

Architecture Diagram

P2P Editor building blocks:

  • Code editor: Ace
  • Database: append only log (hypercore)
  • Communication: WebRTC RTCDataChannel (webrtc-swarm)
  • Peer discovery: WebRTC signaling server (signalhub)
  • Storage: RAM

Workflow:

  1. Peers are discovered via signaling server.
  2. For each change made in the editor, a delta representing that change is appended to hypercore database.
  3. Hypercore database is constantly replicating between all peers via WebRTC RTCDataChannel.
  4. When a peer receives a delta it is applied to its editor instance.

๐Ÿš€ Environment setup

๐Ÿณ Needed tools

  1. Install Docker
  2. Clone this project: git clone https://github.com/CodelyTV/p2p-editor
  3. Move to the project folder: cd p2p-editor

๐Ÿ› ๏ธ Environment configuration

  1. Copy the default environment variables: cp .env.dist .env
  2. Modify the environment variables if needed: vim .env

๐ŸŒ Application execution

  1. Start the application with Docker Compose: docker-compose up
  2. Go to http://localhost:3617

โœ… Tests execution

  1. Execute Unit tests: docker-compose run p2p-editor test

๐Ÿ’ป Live demo

  1. To start a new live code session open http://p2p-editor.codely.tv.
  2. Share the URL with the users you want to join the session.
  3. Start editing the file.

That's all! All changes are instantly reflected in the connected peers editor.

Happy P2P coding!

โ„น๏ธ About

We started this project in the context of a learning process about P2P communications in a Web environment. The purpose of P2P editor is to apply a learn by doing approach where we can share our learnings with the community while building something useful.

We're publishing all the learning resources that we found useful in the Awesome P2P repository. Feel free to check it out and add your favourite links too!

The initial implementation of P2P Editor is based on Mathias Buus work. In case you read this, thank you very much for sharing so many free (libre) resources and knowledge ๐Ÿ˜Š

P2P Editor is a non profits free software supported by user contributions and CodelyTV.

๐Ÿค Contributing

How you can contribute?

You can get an idea of the roadmap of P2P Editor looking at the backlog and the wiki.

โš–๏ธ License

The MIT License (MIT). Please see License for more information.