{"id":20740145,"url":"https://github.com/bjorntheprogrammer/react-codemirror-collab-sockets","last_synced_at":"2025-09-27T18:31:09.611Z","repository":{"id":147892680,"uuid":"545756453","full_name":"BjornTheProgrammer/react-codemirror-collab-sockets","owner":"BjornTheProgrammer","description":"An example of a react-codemirror implementation of the codemirror collab package, with cursor and multiple document examples.","archived":false,"fork":false,"pushed_at":"2023-06-22T05:16:14.000Z","size":330,"stargazers_count":17,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-17T06:36:41.911Z","etag":null,"topics":["codemirror","react","socket-io","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/BjornTheProgrammer.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":"2022-10-04T23:33:48.000Z","updated_at":"2024-11-01T19:29:28.000Z","dependencies_parsed_at":"2023-05-27T20:30:08.995Z","dependency_job_id":null,"html_url":"https://github.com/BjornTheProgrammer/react-codemirror-collab-sockets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BjornTheProgrammer%2Freact-codemirror-collab-sockets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BjornTheProgrammer%2Freact-codemirror-collab-sockets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BjornTheProgrammer%2Freact-codemirror-collab-sockets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BjornTheProgrammer%2Freact-codemirror-collab-sockets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BjornTheProgrammer","download_url":"https://codeload.github.com/BjornTheProgrammer/react-codemirror-collab-sockets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234452029,"owners_count":18834739,"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":["codemirror","react","socket-io","typescript"],"created_at":"2024-11-17T06:27:33.623Z","updated_at":"2025-09-27T18:31:09.295Z","avatar_url":"https://github.com/BjornTheProgrammer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Collaberative Codemirror 6 Example with React, Sockets, and Typescript\n\nThis project is here to give a reference to anyone looking how to implement the collab package from the [Codemirror documentation](https://codemirror.net/examples/collab/), with sockets instead of a worker.\n\nIt is built with React and Typescript, but those can be easily striped out.\n\nTo start the code, look at the README.md's under backend and frontend.\n\n## Implementing Shared Effects and Cursors\nI have added shared cursors and highlighting which can be viewed in the `cursors` branch, it makes one change in the backend, and and few changes in the frontend to work. It is a great example of how to implement SharedEffects if that is what you want to do.\n\n![cursors-demonstration](https://user-images.githubusercontent.com/75190918/212936222-0ee13f31-d8a3-4894-913a-201a90a82b20.gif)\n\n## Multiple Documents hosted on Server\nI also added the capability for multiple documents in the `multi-docs`, which changes the fronted slightly to create a new key for the Codemirror component (otherwise the state creates an issue when not at a clean state), and changes the backend to allow editing multiple different documents. You can even read files and make documents for users to edit (I've done so already see [Pico-Online](https://github.com/BERDPhone/Pico-Online)).\n\n![ezgif com-gif-maker copy](https://user-images.githubusercontent.com/75190918/213265954-b6b824d7-489a-4fd3-97be-cfb53534d4f8.gif)\n\n## Support\nIf you have any questions, or other frameworks/languages you'd like help with implementing this on, feel free to create an issue. I'll see if I can help out.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjorntheprogrammer%2Freact-codemirror-collab-sockets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbjorntheprogrammer%2Freact-codemirror-collab-sockets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjorntheprogrammer%2Freact-codemirror-collab-sockets/lists"}