Use Cases & Examples

• You have an upcoming freelance project you are gathering inspiration for, so create a Collection named “Inspo for 2025 Gala Website” and add to it.
• You’ve created a series of challenges for a class you’re teaching, so you use a Collection named “Intro to HTML — Fall 2025” and add all of those challenge Pens to that so it’s easily shareable all together.
• You’re really into creating and playing mini-games, so create a Collection called “G-G-G-Games!” so you have an easy place to return to and find everything you’ve saved.
• CodePen Challenges have a Collection for every different week. For instance, “#CodePenChallenge: Sierpinski Fractals“

Creating Collections

You can create a new Collection anytime from the logged-in homepage (typically: the Your Work page sidebar), the User Menu, or even right on-the-fly when you choose to add a Pen to a Collection. You’ll see an option to “Create a New Collection”, then you can name it and “Create & Add to Collection”.

There are no limits to how many Collections you can make, nor to how many Pens and Collections can be added to a Collection.

Adding & Removing from Collections

Anywhere you can see a Pen, you can manage what Collections it is a part of. You’ll typically find a menu option like Add to Collection. For instance, you’ll find “Add to Collection” under the Share Menu in the 2.0 Editor.

When you click that, you’ll see a list of Collections (with your most recently interacted with Collections at the top) and either (+) or (✓) buttons. The (+) button allows you to add it to that existing Collection, while the (✓) button indicates the Pen is already in that Collection, and clicking it will remove it.

You can also delete entire Collections anytime, from the Collection page itself with the Delete Collection button under the menu . This action is permanent, and the Collection may not be restored. Note that when you delete a Collection, it is only the Collection that is deleted, not the Pens or other Collections it contains.

Organizing & Viewing Collections

You can view Collections in different ways and even reorder them manually. Learn more about Views & Ordering Collections.

Collections & Privacy

Private Pens and Collections can be in Collections, but they behave a bit differently than Public items. You can also make Collections private in and of themselves, which also affects how private Pens behave inside of them. Learn more about Collections & Privacy here.

Collections vs. Tags

When you create a Pen, you (and your fellow editors) can apply tags to it. Tags have global pages (e.g., cube), making them similar to Collections, except that anyone can tag a Pen with that same tag and become part of that page. That makes tags a system of ad hoc community organization, where you control if you want your Pens to be part of it or not.

With Collections, you control entirely what goes in and what doesn’t. But also other people can put your Pen in their Collection (if it’s Public).

Learn more about tags here.

Teams & Collections

Teams can own Collections as well. They work the same way, except everyone on the Team can add or remove Pens from the Collection and edit the Collection’s title and description. To work on a Collection on behalf of a Team, you need to switch from your User context to your Team context.

TV View

CodePen TV is a full-screen display of randomized animated Pens from our Picks, or public Pens from the Collection of your choice.

You can view Pens from our Picks at codepen.io/tv, or you can open up CodePen TV on any Collection by clicking the TV View button in the Collection’s header.