CodePen Enables Multiple Users to Collaborate in Realtime Using PubNub

realtime collaborationCodePen is a browser based HTML, CSS, and JavaScript code editor with instant previews of written code in a live code playground. Described as a “playground for the front end side of the web”, CodePen enables realtime collaboration for developers to test bugs, display live interactive demos, and share code samples.

CodePen’s Professor Mode allows developers to write code live in a realtime classroom. Anytime the developer types a character, makes any edits, or highlights a line, that change is immediately reflected in realtime across their student’s screen. CodePen’s basic PRO plan caps at 10 students, while their PRO plan supports 100 students. CodePen Professor Mode mimics a real life classroom setting, allowing teachers and students to collaborate in realtime with one another.

The Need for a Robust Realtime Network for Realtime Collaboration

CodePen uses PubNub to power the aspects of their editor that require realtime data streaming, such as their Collab Mode and Professor Mode. With their Professor Mode, to emulate a real life classroom setting, CodePen needed a way to connect every student browser together, where teacher changes would be updated across all browsers in realtime. With thousands of students connected simultaneously, CodePen required a robust realtime data stream network to transfer data.

With Collab Mode, multiple developers can edit a pen at the same time. Changes are reflected across the other browsers as they happen. It’s realtime pair programming for up to six developers.

“The developers amongst you might be aware of WebSockets. That’s exactly what we’re using, just through PubNub, meaning we’re using their fast/reliable/robust/international network. It also helps us do it all through HTTPS and get through firewalls which can be tricky. We’ve been super happy with them,” said Chris Coyier, Co-founder of CodePen.

View All Case Studies

Try PubNub Today

Share this on facebookShare this on TwitterShare this on Linkedin