Build A Collaborative Code Editor with React, WebRTC, and Yjs

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video we build collaborative text editor using Monaco editor, WebRTC, and Yjs. With this surprisingly small stack we are able to create collaborative environments in an easy to understand and efficient way. Users are connected in a peer to peer fashion, which means that you can have any number of people editing code at a certain time. This video is great for beginners, intermediates, or even professional React developers looking for an introduction to WebRTC. This video is also a great introduction to Yjs, a shared editing framework that powers a majority of this application.
Project Code: github.com/coopercodes/Collab...
0:00 Intro
0:50 Initialize React
2:09 Setup Monaco editor
3:49 Create YJS / WebRTC functionality
8:47 System explanation and discussion
10:30 Thanks for watching!

[@paulthomas1052]

Thanks - great mixture of libraries used here. Very useful app too. I'm really enjoying these Monaco developments.

[@CooperCodes]

Yeah I found the lack of Monaco content online surprising! Hoping these tutorials help people get started with it. Hoping to do one more monaco tutorial showing how to sync HTML / CSS to a live output (like Codepen) so that should give people a good basis on getting started :)

[@saurabh75prakash]

Thanks, this is an awesome introduction to yjs.

[@Strange_r53626]

thank you kind stranger

[@CoryTheSimmons]

Fastest sub of my life.

[@sadikhossain511]

Great video

[@CooperCodes]

Thanks for watching Sadik 😁

[@scylla4651]

how can i update the content of the object monaco so, if I want to show the editor with some initial code

[@mrbanana6969]

This only seems to work from within the same browser context. So between chrome and firefox or between incognito tabs this doesn't seem to work. Anyone else having the same problem?

[@kiocode]

yes, different ips also

[@user13443fg]

Yes ! Exactly, it only works on same browser with 2 or more tabs. No 2 guys are gonna COLLABORATE using the same device. It's useless.

[@kiocode]

@@user13443fg at the end I did my own collaborative editor

[@0xhhhhff]

@@kiocode how? github please?

[@ashickyogithan416]

same url with different browers sync is not working

[@Guitar_Dev]

Is it possible to have the text writen both ways ?

[@varunrmallya5369]

dosent seem to work on different devices on the network and is confined only to the browser ????? how does that work ??
\

[@jmahbubani]

Can you show how to add awareness of different users' cursors? I can't get that to work with monaco react

[@gustavo-dev]

Did you manage to make this work? I am about to try it on my project, if you did, can you share some code example?

[@shivambhushan9028]

use code mirror

[@AlexRay1]

Using a monaco editor to build a monaco editor ♾

[@dontignore5567]

how to store this Ydoc in MongoDB ?

[@maskman4821]

Please make an advanced app, I am very interested in Y.js, can we broadcast webcam stream and let all connected users watch the stream at the same time ??? 🤔🤔

[@CooperCodes]

So streaming with webcams is more of a WebRTC thing but I can definitely make a video on it!
Y.js exists so it can handle operations across many different clients in a shared state. Imagine like a toggle button and 3 different people all put in a bunch ON OFF ON OFF ON OFF events right? Y.js helps us keep showing the correct value to all users even after the end of many operations. Hopefully this is a helpful example!

[@maskman4821]

@@CooperCodes That would be awesome, thank you in advance 🙏🙏🙏

[@predator5848]

Is there any platform that I can connect with you?

[@CooperCodes]

Twitter @thecoopercodes or email me direct [e-mail]