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

[@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 :)

[@ashickyogithan416]

same url with different browers sync is not working

[@saurabh75prakash]

Thanks, this is an awesome introduction to yjs.

[@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?

[@CoryTheSimmons]

Fastest sub of my life.

[@Guitar_Dev]

Is it possible to have the text writen both ways ?

[@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?

[@the.shivam.bhushan]

use code mirror

[@durasaksham]

only works on same browser. How can make it work so I can deploy on vercel

[@varunrmallya5369]

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

[@technovikingnik]

In order for webrtc to work you need ice and turn servers, so peers can exchange their data and can know about eachother. Im familiar with technology so I know that a lot of things are abstracted form this example.

[@dontignore5567]

how to store this Ydoc in MongoDB ?

[@scylla4651]

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

[@Cafeino]

const type = doc.getText("monaco"); type.insert(0, "Default text")

[@null-j1r]

thank you kind stranger

[@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 🙏🙏🙏

[@AlexRay1]

Using a monaco editor to build a monaco editor ♾

[@sadikhossain511]

Great video

[@CooperCodes]

Thanks for watching Sadik 😁

[@predator5848]

Is there any platform that I can connect with you?

[@CooperCodes]

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

[@TrumanMarsh-z5b]

Andrew Course

[@MatthewRachel-i7s]

Hernandez Donna Miller David Rodriguez Shirley

[@JeffreyLopez-m2k]

Thompson Maria Martinez Robert Martinez David

[@CottonCamille-g9x]

Taylor Linda Robinson Mark Lee Brian

[@geraldmilton9740]

Lewis Laura Taylor Matthew Martinez Sandra

[@YoungMerle-f6v]

Gonzalez Maria Jones Paul Young Jeffrey

[@MelvilleAlbert-h2j]

Taylor Maria Miller Amy Lee Linda

[@PaulJones-g9q]

Gonzalez Larry Lewis Sandra Walker Matthew