Collab Mode is a PRO feature of CodePen that 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 a lot like that! This is real-time pair programming at its best, since the two (or more) people can be anywhere in the world and it’s not nearly as bandwidth-intensive as video.
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.
Here’s a video of a Collab Mode session!
How do I start a Collab Mode session?
- You have to be a PRO member
- You have to be on a saved Pen that you own. The Pen can be public or private.
- Choose Collab Mode from the Change View dropdown.
Only you need to be PRO. Nobody else needs to be, or even have CodePen accounts, to work with you.
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 someone with owner access sees 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.
- Work with co-workers or student colleagues to figure out bugs, think out problems, or co-design on projects.
- Offer private tutoring. Perhaps you’re a great teacher of React. You could sell your time privately and connect with students to teach on CodePen.
- Use it for the real-time chat room.