How to Scale Codepen Organization

How to Scale Codepen Organization

In webdevelopment, its important to have a tool for quickly writing some code, and seeing it live. Without worrying about setting local dependencies, IDE, etc. Sometimes these are referred to as coding playgrounds.

Many software solutions have existed in the marketplace for these. Jsfiddle, jsbin, and codepen are among the most popular.

While they all accomplish the same thing, codepen is miles ahead of its competitors. It boasts a community of developers you can follow, many ways of organizing code snippets, quick-adds for common stylesheets /scripts (e.g. bootstrap and jquery), a console, and support for proprocessors (SASS, typescript, etc)

However, one issue that I’ve come across as a new user is how to organize and scale codepen. I currently have about 30 pens I’ve written and I almost always add at least one pen daily (to practice CSS/HTML/JS features I’m not familiar with).

This can get extremely messy when it comes to searching previous codepens I’ve written, or codepens I’ve liked from other users.

Below are things I learned along the way from trial and error.

NOTE: I have codepen’s $9/month starter plan so I can get access to private pens and asset management. You do not need this, however I have outlined the features regardless

Decide what you will use codepen for

While codepen is easy to write and see changes live, it isn’t nearly as robust as building your own local-server / dependencies.

There’s no git integration, so managing changes is difficult unless you make a backup github gist, fork pens often, or comment out old code.

Because of this, I still use my primary IDE, atom in conjunction with codepen. I also use both private and public pens. This is how I currently divide up codepen usage compared to other tools

  • Public pens aren’t written in codepen, rather just copy-pasted from my github repo
  • Private pens are for daily practice / KATAs for JS/CSS features I’m not comfortable with. They are also used when I follow along with youtube tutorials
  • Atom / Github are for medium to large project (things that take longer than a day to write)

The first thing you want to do with codepen is dedicate bookmarks to commonly accessed items. It is my belief that you should be able to find any pen you’ve written in 3 clicks or less.

I have google chrome bookmarks set to the following below:

  • I like these pens -> These are for pens that I found interesting and might reference later
  • My Private Pens -> These are pens I use to practice HTML / CSS, my private playground.
  • My Public Pens -> These are pens I embed into blogs / projects I’ve written on freecodecamp
  • My Private Collection -> These are pens that I’ve liked, and organized for future reference

Additional bookmark links you might want to add are specific collections or saved searches within your codepen. Or specific filters like “Filter by last created” or “Last Edited”

Use a naming convention for your pens

Naming a pen is like naming the subject line in an email. You live and die by the subject line header. Its the most important thing to name correctly, so you or anyone else can easily find codepen’s you written.

I prefer to use an ongoing numbering convention when naming my pens. This is often done when people do “30 websites in 30day” challenges such as #codevember.

I use the following prefix names when naming my codepens

  • “YT” for youtube, essentially codepens I’ve written following a video tutorial
  • “LY” for tutorials I’ve followed.
  • “#1, #2, #3… etc” for code katas I’ve written from scratch. Normally, I try to add one code kata daily.

This is what my private pen pages look like.

Use CodePen Enhancement Suite

Codepen enhancement suite reduces a lot of extraneous overhead. You get to see more of your code that’s relevant to you and toolbars are still readily accessible but use less space.

Example showcasing the difference (left side is with extension)

It also adds in features for customizing your codepen theme too

Use an external tool to embed codepens

I use an external notetaking tool called dynalist. I’ve written a short blog about what I use with it. You can find a list of tools and guides on how I set this up.

One of the tool extensions with dynalist is PowerPack 2. Under one of its options, you can embed external links like google maps, youtube, codepen, etc.

I like to use dynalist as a code snippet manager. But recently I’ve been shifting away to embedding codepen documents, as I can see much more relevant information in the same amount of space (e.g the webpage, CSS/JS/HTML).

To embed codepens, you go to your codepen file → export (bottom right) → embed pen → copy “iframe” code → paste into dynalist

My dynalist file looks like so:

Other external tools you could use is wordpress, but dynalist is


Here is a list of other things for scaling codepen organization. Most are just generic so I listed them here instead

  • Add notes in the description / use comment blocks
  • Use codepen search tools
  • Add 1❤ to pens you like, and organize it further if you reference it again
  • Make collections

Leave a Reply

Your email address will not be published.