By default, Pens created on CodePen are public. But you can change that default as well as set any Pen to a different privacy setting. You can also invite other users to your Pen, giving them Viewer or Editor access with realtime collaboration.

Pen Privacy Settings

Public

  • Anyone can view the Pen. It will show on the owner’s CodePen profile, CodePen feeds, and search results.
  • Additional users can be invited to collaborate as Editors if the owner is PRO. Those additional Editors will be visible to anyone viewing the Pen.
  • Public Pens are open source licensed.

Private PRO

  • The Pen will be given a long obscure URL that cannot be guessed.
  • Anyone with the private URL can view the Pen. It can not be found through search or browsing. 
  • Additional users can be invited to collaborate as Editors if the owner is PRO.
  • No license is applied to the Pen. The owner may add one as needed.

Password Protected PRO

  • Password Protected Pens have a randomly generated and changeable password. Any user not authorized as an Owner or Editor will have to enter the password view the Pen.
  • Viewers have 3 attempts to enter the correct password, or the Pen will become locked. The lock expires after 30 minutes automatically.
  • The Pen is also private with all the featured listed for that privacy level
  • All views of the Pen are protected, meaning the Editor, preview, and deployed website. Any assets hosted at the Pen/website are also protected.

Collaborators Only PRO

  • Only the owner and users who are explicitly invited can view or edit the Pen, depending on the given role.
  • The Pen is also private with all the featured listed for that privacy level.

Private by Default Setting

PRO users have a global setting they can turn on so that all Pens will save as private upon first save. They can be changed to public or any other privacy setting afterward. This is for users who’s work is generally private and they don’t want to forget to make it that way.

Inviting Collaborators

You can add other people as collaborators to your Pen. This will grant them access to your Pen, adding it to that person’s Pens Shared With You tab and your Pens You’ve Shared tab.

Adding a Collaborator

You can add collaborators through the Privacy & Collaboration panel of a Pen. If the person is already a CodePen user, you can enter their @username to invite them. If they aren’t a user yet, you aren’t sure, or simply prefer to, you can invite a user by email address as well.

The person you invited will always get an email about your invitation to collaborate. From that email they can click a link to approve or disapprove the invite in the Collaboration Invites tab.

If a user doesn’t get the invite email, you can re-send the email through the Collaboration Invites tab, or if you can reach them some other way (e.g. Slack) you can tell them to check their Collaboration Invites tab in their account to accept directly from there.

Collaborator Roles

  • Viewer — This role means a user can view a Pen no matter what Privacy Setting it has. For example, if a Pen is in the Collaborators Only setting, they’ll be able to view it. Or if the Pen is in the Password Protected setting, the user will not need to enter a password to see it.
  • Editor — An Editor on a Pen has almost the same access as the Owner does. They can edit the code, change the settings, add and remove Blocks, deploy/update/undeploy the Pen as a website, and pretty much anything else. They can even update the Collaborators by adding or removing them, even themselves. The only thing they can’t do is delete the Pen. When there are multiple Editors viewing a Pen at the same time, they are automatically in realtime editing mode.

✨ Automatic Realtime Collaboration

You’ll see the other Collaborators (with the role of Editor) avatars in the footer of the Pen Editor, whether they are currently editing or not. If another Editor has the same Pen open at the same time, you’ll see their avatar light up. If you both have the same file open at the same time, you’ll be able to see what line they are currently editing, so you can stay on the same page.

Clicking on their avatar will reveal what file they are currently editing. You can click from there to jump to their current file at the line they are editing. Or, double-click their avatar to jump there immediately.

These features do not need to be activated, nor do you need to go to a special URL, they all work by default in the Pen Editor.

What happens when you remove a user from being a collaborator?

The user will immediately have those permissions revoked. An Editor will not be able to save anymore. A viewer will not be able to view anymore (although if they have the Pen open already, it will stay open and visible until they leave it). These users will be subject to the same restrictions as any other user and the privacy settings of the Pen.

Users will not be notified when their collaborator permissions are removed.

Collaboration & Teams

If a Pen is Team-owned, all the other members of the Team automatically have Editor access to that Pen. Team Members do not need to be invited individually. The automatic realtime editing features all apply normally.

Differences from the Old CodePen Editor

Where is Collab Mode?

The old CodePen Editor had a special view of a Pen called “Collab Mode” that allowed you to work in real time with other users. You can still work in real time with other users. You just don’t need to go to a special URL to do so anymore.

Any other user you invite as a collaborator to a Pen with Editor access can edit the Pen at any time. If you and any other editors are editing the Pen at the same time, you’ll see their avatars in the footer and within any files you happen to have open at the same time.

Where is Professor Mode?

The old CodePen Editor had a special view called Professor Mode that allowed other people to watch you work in real time. The people watching could not update the code or settings of the Pen. This feature does not exist anymore at this time in the CodePen editor.