What is Collab Mode?

Collab Mode allows more than one person to edit a Pen at the same time. If you’ve ever used collaborative editing in Google Docs, it’s like that! Real-time pair programming at its best, since the two (or more) people, can be anywhere in the world!

Every character you type, every line you select, and every setting you change happens immediately on all of your collaborator’s screens. And likewise for everything they do.

This short video should make it clear:

How do I start a Collab Mode session?

Switch to Collab Mode from the “Change View” menu in the header of the Editor View of your Pen. When you open Collab Mode, the URL for your Pen will change in your browser’s address bar. Copy the URL and share it with the people you want to collaborate with and they’ll be able to join your session.

How many people can collaborate at a time?

Starter PRO Developer PRO Super PRO
2 people 6 people 10 people

If more people try to join the room than the maximum on your PRO plan, they’ll see a page that explains that the room is full and to contact you or wait and try again.

Does everyone need to be PRO?

Nope, only the owner of the Pen needs a PRO subscription. Everybody else can have free accounts, or even be anonymous (have no account at all). Although anonymous users won’t be able to chat or fork their own copies.

What happens if the owner leaves the room?

Every Collab Mode room has an owner. It is the person who owns the Pen that the room was created from. Collab Mode only works if the owner is in the room. If the owner leaves, the room is closed after a few minutes (giving the owner time to come back in case it was an accident). The collaborators in the room will see a message informing them that the owner has left.

How does chat work?

In each Collab Mode room, there is a live chat area (like Professor Mode). You and your collaborators can chat from the “Open Chat” tab at the bottom of the editor.

These chat sessions are saved to that particular Pen, so you can always open the Pen up in Collab Mode again and see the chat history.

Note that comments on your Pen are separated by the type of view you are in. Any given single Pen might have comments on it (from the Details view) Collab comments on it (from Collab Mode) and student comments on it (from Professor Mode).

Are the changes that are made in Collab Mode saved?

Only if the owner of the Pen chooses to save them (only they see a Save button). If you are collaborating on a public Pen and want to save the progress, you can click the Fork button and save a fork of the exact state of the Pen at that time.

What else is Collab Mode good for?

You could use Collab Mode to conduct interviews with front-end devs. Rather than quiz them about CSS selectors, have them prove they know them by writing code for you live. This is likely a more true measurement of their skill since most of us can code better than we can talk about it.

A common use-case is co-workers or student colleagues working together to figure out bugs, think out problems, or co-design on projects.

Collab Mode also gives you a venue for private tutoring. Perhaps you’re a great teacher of React. You could sell your time privately and connect with students to teach on CodePen.

Collab Mode is also a real-time private chat room, so anytime the need for that comes up you’d be covered!