{"id":19560505,"url":"https://github.com/codelytv/p2p-editor","last_synced_at":"2025-11-02T10:30:34.774Z","repository":{"id":46283899,"uuid":"162609254","full_name":"CodelyTV/p2p-editor","owner":"CodelyTV","description":"Online code editor based on P2P and JavaScript. Demo:","archived":false,"fork":false,"pushed_at":"2024-08-17T17:39:05.000Z","size":655,"stargazers_count":58,"open_issues_count":11,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-09T23:11:20.238Z","etag":null,"topics":["ace-editor","codely","codelytv","editor","hypercore","hypercore-protocol","ide","javascript","jest","nodejs","p2p","p2p-editor","pacharan","signalhub","webpack"],"latest_commit_sha":null,"homepage":"http://p2p-editor.codely.tv","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodelyTV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-20T17:11:46.000Z","updated_at":"2025-01-15T22:20:07.000Z","dependencies_parsed_at":"2025-02-09T23:21:25.084Z","dependency_job_id":null,"html_url":"https://github.com/CodelyTV/p2p-editor","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Fp2p-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Fp2p-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Fp2p-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Fp2p-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodelyTV","download_url":"https://codeload.github.com/CodelyTV/p2p-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239394723,"owners_count":19631121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ace-editor","codely","codelytv","editor","hypercore","hypercore-protocol","ide","javascript","jest","nodejs","p2p","p2p-editor","pacharan","signalhub","webpack"],"created_at":"2024-11-11T05:07:48.642Z","updated_at":"2025-11-02T10:30:34.728Z","avatar_url":"https://github.com/CodelyTV.png","language":"JavaScript","readme":"\u003c!-- LOGO --\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://codely.tv\"\u003e\n    \u003cimg src=\"https://codely.tv/wp-content/uploads/2016/05/cropped-logo-codelyTV.png\" width=\"192px\" height=\"192px\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- TITLE --\u003e\n\u003ch1 align=\"center\"\u003e\n  P2P Editor\n\u003c/h1\u003e\n\n\u003c!-- BADGES --\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/CodelyTV\"\u003e\u003cimg src=\"https://img.shields.io/badge/CodelyTV-OS-green.svg?style=flat-square\" alt=\"codely.tv\"/\u003e\u003c/a\u003e\n    \u003ca href=\"http://pro.codely.tv\"\u003e\u003cimg src=\"https://img.shields.io/badge/CodelyTV-PRO-black.svg?style=flat-square\" alt=\"CodelyTV Courses\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://travis-ci.com/CodelyTV/p2p-editor\"\u003e\u003cimg src=\"https://travis-ci.com/CodelyTV/p2p-editor.svg?branch=master\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- SUMMARY --\u003e\n\u003cp align=\"center\"\u003e\n  P2P code editor for live coding sessions that works in the browser.\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  This parallel P2P universe is still very dark. \u003ca href=\"https://github.com/CodelyTV/p2p-editor/stargazers\"\u003e Create a Star\u003c/a\u003e if you want to make it brighter  🌟\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"#table-of-contents\"\u003e\u003cstrong\u003e🚀 Explore the universe »\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"http://p2p-editor.codely.tv\"\u003eOnline demo\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/CodelyTV/p2p-editor/wiki\"\u003eRoadmap\u003c/a\u003e\n  ·\n  \u003ca href=\"#-contributing\"\u003eContribute\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n## 📜 Table of Contents\n\n- [💡 What does P2P Editor do?](#-what-does-p2p-editor-do)\n- [🤔 Why P2P?](#-why-p2p)\n  - [Benefits of P2P](#benefits-of-p2p)\n  - [Added complexities of being fully distributed](#added-complexities-of-being-fully-distributed)\n- [🏗️ Architecture](#-architecture)\n- [🚀 Environment setup](#-environment-setup)\n  - [🐳 Needed tools](#-needed-tools)\n  - [🛠️ Environment configuration](#-environment-configuration)\n  - [🌍 Application execution](#-application-execution)\n  - [✅ Tests execution](#-tests-execution)\n- [💻 Live demo](#-live-demo)\n- [ℹ️ About](#-about)\n- [🤝 Contributing](#-contributing)\n- [⚖️ License](#-license)\n\n## 💡 What does P2P Editor do?\n\nP2P 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:\n\n1. [Open a P2P Editor session in your browser](http://p2p-editor.codely.tv)\n2. Share your session URL with someone else (or even with yourself in another browser window 😬)\n3. Start typing and enjoy the real time experience!\n\nThe functionalities are limited for now, but we have a [roadmap](https://github.com/CodelyTV/p2p-editor/wiki) and some [good first issues](https://github.com/CodelyTV/p2p-editor/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22) to make P2P Editor awesome. Take a look to the [Contributing](#-contributing) section if you want to get involved 🙌. \n\n## 🤔 Why P2P?\n\nWe 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:\n\n### Benefits of P2P\n\n- Direct communication: reduce latency and bandwidth.\n- No servers: no cloud, no scaling, no deploy, no devops...\n- No SaaS:\n  - Availability.\n  - No usage restriction.\n  - No unknown (malicious or not) usage of your data.\n\n### Added complexities of being fully distributed\n\n- Data consistency.\n- Network partition / topology.\n- Peer discovery and connection establishment.\n- Authentication / Authorization.\n- Security and privacy.\n\nWe have a particular interest in P2P application development. You can read more in the [About](#-about) section.\n\n## 🏗️ Architecture\n\n![Architecture Diagram](assets/architecture_diagram.jpg)\n\nP2P Editor building blocks:\n- Code editor: [Ace](https://github.com/ajaxorg/ace)\n- Database: append only log ([hypercore](https://github.com/mafintosh/hypercore))\n- Communication: WebRTC RTCDataChannel ([webrtc-swarm](https://github.com/mafintosh/webrtc-swarm))\n- Peer discovery: WebRTC signaling server ([signalhub](https://github.com/mafintosh/signalhub))\n- Storage: RAM\n\nWorkflow:\n\n1. Peers are discovered via signaling server.\n2. For each change made in the editor, a delta representing that change is appended to hypercore database.\n3. Hypercore database is constantly replicating between all peers via WebRTC RTCDataChannel.\n4. When a peer receives a delta it is applied to its editor instance.\n\n## 🚀 Environment setup\n\n### 🐳 Needed tools\n\n1. [Install Docker](https://www.docker.com/get-started) \n2. Clone this project: `git clone https://github.com/CodelyTV/p2p-editor`\n3. Move to the project folder: `cd p2p-editor`\n\n### 🛠️ Environment configuration\n\n1. Copy the default environment variables: `cp .env.dist .env`\n2. Modify the environment variables if needed: `vim .env`\n\n### 🌍 Application execution\n\n1. Start the application with Docker Compose: `docker-compose up`\n2. Go to [http://localhost:3617](http://localhost:3617)\n\n### ✅ Tests execution\n\n1. Execute Unit tests: `docker-compose run p2p-editor test`\n\n## 💻 Live demo\n\n1. To start a new live code session open [http://p2p-editor.codely.tv](http://p2p-editor.codely.tv).\n2. Share the URL with the users you want to join the session.\n3. Start editing the file.\n \nThat's all! All changes are instantly reflected in the connected peers editor.\n\nHappy P2P coding!\n\n## ℹ️ About\n\nWe 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.\n\nWe're publishing all the learning resources that we found useful in the [Awesome P2P](https://github.com/CodelyTV/awesome-p2p) repository. Feel free to check it out and add your favourite links too!\n\nThe initial implementation of P2P Editor is based on [Mathias Buus](https://github.com/mafintosh) work. In case you read this, thank you very much for sharing so many free (libre) resources and knowledge 😊\n\nP2P Editor is a non profits free software supported by user contributions and CodelyTV.\n\n## 🤝 Contributing\n\nHow you can contribute?\n- [Reporting bugs](https://github.com/CodelyTV/p2p-editor/issues/new).\n- Providing feedback and [suggesting new features](https://github.com/CodelyTV/p2p-editor/issues/new).\n- [Giving the repo a star](https://github.com/CodelyTV/p2p-editor/stargazers).\n- Getting involved in development resolving [issues labeled as `good first issue`](https://github.com/CodelyTV/p2p-editor/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22).\n- Adding learning resources to [Awesome P2P](https://github.com/CodelyTV/awesome-p2p) repository.\n\nYou can get an idea of the roadmap of P2P Editor looking at the [backlog](https://github.com/CodelyTV/p2p-editor/issues) and the [wiki](https://github.com/CodelyTV/p2p-editor/wiki).\n\n## ⚖️ License\n\nThe MIT License (MIT). Please see [License](LICENSE) for more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelytv%2Fp2p-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelytv%2Fp2p-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelytv%2Fp2p-editor/lists"}