PRO Teams are a special type of account on CodePen made for groups of people who work together. Here are the advantages of a PRO Team:

• The Team Owner can add/remove Team Members at any time. All Team Members have Developer PRO-level features on CodePen, even on their personal accounts. See more about Team Management.
• Teams can be of any size, from 2 up. The billing is all combined to the one account.
• Teams have their own profile to showcase their work together.
• All Team Members have shared access to everything Team-Owned: Pens, Project, Collections, & Assets.

Team Members have access to everything created or uploaded 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.

Every member of the Team gets access to the full suite of PRO features like Collab Mode, Professor Mode, Live View, shared Asset Hosting, and more.

When you are in the Team context, many actions take place on behalf of the Team. For example if you’re in the Team context and save a Pen, Project, Collection or upload an Asset, it is under the Team account and owned by the team.

But many actions happen via your Personal context even if you’re currently in the Team context. For example, if you leave a comment, you’re leaving it as yourself, not the Team. Or if you heart a Pen, that heart comes from you not the Team.

When you are in the Personal context, all 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.

Any fellow Team member can add to Team-owned Collections, so you can collect Pens together. Any Team member may also delete or edit 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. For example, Team CSS-Tricks tag on mix-blend-mode.

Team Hearting

When you are under the Team context and you heart a Pen, you are hearting that Pen as yourself not as the Team, so the user will see that in their Activity.

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 another 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 Team 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 “Remove” button next to their username on the team roster. Press this button to remove a member. You can re-invite them to join the team later if your team has enough open seats to accommodate them.

Transferring Team Ownership

The team owner can elevate another team member to “Owner” through the Team’s “Accounts & Members” settings. The original owner can then opt to remove themselves from the team.