PRO Teams are a special type of account on CodePen made for groups of people who work together. A Team can distribute PRO accounts to all 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.

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, your account has two different “contexts”:

  • Your Personal context
  • The Team context

You switch between them from your user menu in the upper right:

When you switch context, the avatar on your user menu will change to let you know which context you’re in. You’ll see your personal avatar while in the personal context, and your team avatar while in your team context.

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 Content

Any Pen, Post, Project, or Collection created in the Team context is owned by the Team. That means any other Team member can see it, edit it, and save changes to it.

Note there are 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 or Project 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 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 Members tab in your settings.

To invite a new teammate, enter their email address in the “Invite by email” field and press “Send Invite”.

Invited users will get an email inviting them to your team, with a link to accept the invitation. If they already have a CodePen account with their invited email address, they can also accept your invitation from the notification bar on 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.

Joining a Team

When you join a PRO team, you’ll have two account contexts, your personal context and your team context.

When you make a Pen, Post, or Collection in your personal context, it’s entirely your own and will only appear in your profile. If you make something private in your personal context, your team members won’t be able to see it (unless you give them a link to it).

If you have a personal PRO account when you start or join a team, we will keep that personal subscription active. This way, you can feel free to temporarily join a team without disrupting your personal subscription, or select a different personal plan from the Developer PRO plan provided through your team. If you want to end your personal subscription, you can cancel your personal subscription in your billing settings.

After you cancel your personal subscription:

  • your personal subscription will not renew and your credit card will not be charged for the personal subscription
  • you’ll have access to all PRO features in both your personal and team context while you’re a member of the team
  • if you leave or are removed from your team, or cancel the team (as the team owner), your personal account goes back to being a free account and you’ll lose access to PRO features. You can upgrade again at any time to resume using PRO features.

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

Our support team can help you transfer your team to a new owner. Visit our support page to open a ticket.