PRO Teams are a special type of account on CodePen made for groups of people who work together. Rather than individual people paying for their own PRO accounts, a Team can distribute PRO accounts to members of that team, with only a single billing subscription. That means every member of the Team gets access to the full suite of PRO feature like Collab Mode, Professor Mode, Live View, (shared) Asset Hosting, and more.

But Teams are more than just combined billing. Teams can collaborate together more easily. Here's a quick video overview:

Team Members have access to all Pens created by the Team. So for instance you can create a Pen and another member can later edit it. Or they can create a Pen and you can later edit it. We'll explain all of that, but first you should understand context switching:

Context Switching

When you are on a team, you can switch between two different "contexts":

  • Your Personal context
  • The Team context

You switch between them from the dropdown menu in the upper right:

When you are in the Team context, most of your actions take place on behalf of the Team.

When you are in the Personal context, your actions are your own.

Shared Pens

Any Pen created in the Team context is owned by the Team. That means any other Team member can see it and edit it. Just as you are able to see and edit any Pens by other Team members.

Note there is no warnings about saving. If multiple Team members have the same Pen open, whoever saved last will be the version that saves. We plan to help out better with this in the future, but that's how it is for now. When you open a Team-owned Pen in the editor, you'll be able to see when it was last edited, so you can tell if there seems to be any recent activity on that Pen.

Team Activity

You can catch up with what your Team has been up to from the Recent Activity area. You'll the Pens they've been creating, Pens they have hearted, new members joining the team, members that have left, and that kind of thing. You'll also see your own activity (things you've done while in the Team context) there.

Team Activity isn't just for seeing what your Team has been up to, it's also for seeing how others are interacting with your Team. You'll see notifications of when others have commented on your Pens, Pens they have hearted, Collections they have added your Pens to, and more.

Team Collections

When you are under the Team context, you can create new Team-owned Collections and add Pens to those collections.

On the left, the user is in the Personal context in the Editor, so they see their own personal Collections. On the right, the user is in the Team context, so they see Team Collections.

Any fellow Team member can add to Team-owned Collections, so you can collect Pens together. Any Team member may also delete a Collection.

Team Tags

When you are under the Team context, any Tag you add to a Pen is a Tag added to the Teams tags, which you can see on the Team profile.

Team Hearting

When you are under the Team context and you heart a Pen, that user will see that your Team hearted that Pen. Hearting (especially with the three-heart system) is sometimes used as a way to lightly bookmark Pens, so they are easier to find later.

Commenting

Commenting is a bit unique in the Team context. This is the one thing that doesn't happen as a Team. If you leave a comment, you always leave it as yourself, not as the Team.

Team Management

The Team Owner has the most control over the team:

  1. They manage the billing
  2. They control the Team profile
  3. They are the only one who can invite and remove members

Adding a New Team Member

Only the Team owner can add new Team members. You do this from the Team tab in settings (only accessible when under the Team context):

There are two ways to add new members. Either you know the person is already a member of CodePen, and you enter their username there (there a dropdown of matches to help you pick the right one), or you invite them by email.

Invited users will get an email letting them know. If by some chance they don't get it, they can accept your invitation from the homepage:

If the email address you invite isn't already a member, the email they get will explain briefly what CodePen is and ask them to sign up. When they do, they will automatically be added to your Team.

Users who you have invited but have not yet accepted will be the "pending" area. The Team owner can cancel those invites anytime. Pending users count toward the Team member total, so you can never invite more members that can fit on your Team.

Removing a Team Member

The Team owner can remove members of the team from the Team tab in settings, while under the Team context. Each member in the roster has a context menu by their user avatar. Select Remove From Team.

Transferring Team Ownership

The Team owner may choose a new owner for the Team at any time. This new owner must already be a member of the team and have an email address associated with their account. The Team owner does this from the Team tab in settings, under the member roster. Each Team member has a context menu and you select the option from there.

After confirming, that member instantly becomes the new Team owner. These things happen:

  1. The chosen member instantly becomes the new Team owner. They get an email letting them know.
  2. The billing information is transferred to them. They can't see the complete billing info, but they can see information like what plan the team is on and the last 4 digits of the credit card. They can update that billing information as needed.
  3. The new Team owner now controls all aspects of the Team, like the profile and adding/removing members.