Have you seen this fancy new area of CodePen? There is a link to Topics now in the sidebar menu of CodePen:

Topics is the right word for it, we think. A topic could be a specific library or framework, for example. We’re fans of frameworks like React and Vue, which make perfect topics. We’re not picking favorites though, of course, we’re open to anything.

In the case of libraries/frameworks like that, our goal is to:

  1. Be a useful resource for that topic, linking to the best information and examples we can, both on-CodePen and off.
  2. Provide starter templates and reference code
  3. Make all the best topical content easier to find

Personally, I’m extra excited about having a bunch of hand-curated templates for different major technologies just a few clicks away.

screenshot of the templates area of the CodePen React Topic
Templates for React

Something like a preprocessor could be a topic also! We don’t have them for all our preprocessors yet (hopefully soon!) but do for topics like Sass. As I write, the Sass topic doesn’t have starter templates. It could, perhaps, but for now, that topic focuses on hand-picked useful examples and helping you find Sass-related Pens. Each topic is a bit different in what it showcases to you in the tabs on that topic.

Patterns are now Topics

We used to have a special section of CodePen for showcasing design patterns. And we still do! It’s just they are moved into the Topics section now with new life. You’ll find things like Toggles, Pagination, Breadcrumbs, Modals, Tabs… common UI design patterns you might be looking around for on CodePen.

Just a start!

This idea was born out of a larger project we’ve embarked upon at CodePen to make CodePen more social and more personalized. If you specifically tell us things you’re interested in, we can help make CodePen more useful for you. Not in like a WE SEE GOOGLED DOG BEDS ONE TIME, LEMME SHOW YOU STUFF ABOUT DOG BEDS FOREVER kinda way, but in a way that shows you stuff from people and topics you literally want to keep up with. Stay tuned for more on all that.

Got a topic?

We’re hoping that y’all will have some ideas on topics you might want to see. Or perhaps you work on something that you think would make for a good topic. Feel free to suggest things.

If you really wanna make it quick’n’easy on us, this is the kind of thing we can munge into a topic:

  • The main links, like Official Website, Documentation, and Repo.
  • One sentence description.
  • If you have starter Pens (e.g. templates), a list of those (like these). These are the best things!
  • Any Collection(s) of featured Pens
  • Any Posts all about it (on site or off)

Each (existing) Topic has a link in the navigation to suggest content for it as well.