Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Companies of all sizes use CodePen. How they use us varies quite a bit. There are all sorts of reasons to use CodePen, and we thought highlighting some of those ways through the actual companies doing it might be illuminating.

amCharts shows off interesting uses of their charting library by making demos themselves

For example, classic uses of their library like this advanced chart utilizing CSS animations:

See the Pen CSS Animations by amCharts (@amcharts) on CodePen.

But also interesting and unusual demos, like this animated coffee infographic using their mapping and physics engines:

See the Pen Map+Physics+Coffee by amCharts (@amcharts) on CodePen.

Greensock supports their users through suggesting CodePen reduced test cases

See how including a CodePen URL is a first class citizen in the GSAP forums:

Not only that, they use CodePen in the videos the shoot to explain aspects of their library, and use Embedded Pens within their documentation:

As well as create compelling demos on CodePen to show off the interesting things Greensock can do:

See the Pen Draggable “Toss” Demo by GreenSock (@GreenSock) on CodePen.

Remember there is quick access to Greensock in our Quick-Add area under JavaScript settings:

Google lets you play with Material Design through CodePen

They made Material Design into a freely available framework called Material Design Lite. You can snag code for components straight from their site and jump them right over to CodePen:

Similarly with Angular Material, check out the CodePen icons which jump that design pattern right over to CodePen for your playing pleasure:

Mozilla Developer Network allows you to move their example code and demos to CodePen

MDN is likely the most-referenced documentation for web technology there is. We all land there when we’re looking for explanations of things like HTML elements and their attributes, CSS selectors and properties, and JavaScript APIs. Many (most?) of these pages not only explain the technical details but offer example code and demos.

The example code and demos on MDN offer links to jump that code over to CodePen:

Metafizzy demonstrates configurations of their components through Pens

Take Flickity, David DeSandro’s very excellent JavaScript library for creating carousels.

Flickity can be configured lots of different ways. For example, you can have the panels repeat themselves rather than stop at either end. You can group panels together. You can have the panels stop when centered, or scroll by more free-floating. As a dev using this library, you’ll have to feel out options like this to see if they are what you want/need. How about ah over to CodePen to play?

Free Code Camp has their students complete challenges on CodePen

I don’t know if y’all know this, but Free Code Camp is big. It’s a massive community of budding programmers working their way through the different courses they offer. You make your way through by completing challenges. Some of those challenges involve using CodePen to build little web sites.

See the Pen FreeCodeCamp : Build a Tribute Page by Free Code Camp (@FreeCodeCamp) on CodePen.

And they aren’t alone. Many other coding camps use CodePen as well. Full Stack Academy, to name one.

ZingChart uses their profile to showcase their library

ZingChart is another one of those libraries available in the Quick Add dropdown (although this is a good time to mention: many thousands of libraries are available in auto-complete in the External Resources area, also). They have a lovely profile that shows off some of the things that ZingChart is great at:

TinyMCE does that too!

Adult Swim is very weird

That’s kinda their thing, right? Branding, folks. Branding. Anywhere that where there are nerds to love it.

See the Pen Toe Licker by adult swim (@adultswim) on CodePen.

Paravel does prototyping in Pens

I know that Dave Rupert, a developer at Paravel, places a lot of value on prototyping in code. Projects big and small and benefit from hashing out an idea right in the browser.

The Uprising Creative explores ideas for clients

I remember being at a CodePen Meetup at The Uprising Creative where they showed us a bunch of amazing work they were doing for a client that began life as experiments in CodePen. The Uprising Creative has big fancy clients, though. It’s quite common in agency work that you’re creating work for the clients not for the agency’s portfolio. So much of their work will remain tantalizingly behind the curtain.

Many teams have cool secret private lives

Much like The Uprising Creative, there are lots of teams who do almost all of their creating on CodePen as private. Teams like Microsoft, Crate & Barrel, and MINDBODY have active work, but it’s all private. That’s great! Everyone is free to use CodePen in whatever way works best for them and their team.

Sitepoint uses Embedded Pens in code tutorials

Nothing drives home a coding concept more clearly than seeing code and it’s output right next to each other, especially in the context of a written article. In fact, that’s the origin of story of CodePen existing in the first place!

And they aren’t alone. Thousands of sites use embedded Pens to bring code to life.

Sparkbox gave girl scouts their first web design experience with CodePen

It’s a pretty great thing! They reached for tools to help make everything as absolutely easy as possible.

The have a published curriculum for it, which I hear is being updated!

Facebook uses prebuilt demos to help people understand React

You know, that little framework everyone is talking about. Here’s the first sentence of the docs:

The easiest way to get started with React is to use this Hello World example code on CodePen.

CSS-Tricks uses CodePen in educational videos

Hey that’s me! I use CodePen all the time to talk about coding concepts in videos that I put on YouTube.

Not to mention that I use Embedded Pens all the time, as well as encourage the use of reduced test cases for everyone when posting to the forums there.

Mobify uses CodePen to interview potential hires

I’m not sure if they use this exact demo anymore, because there have been a ton of takes on it posted publicly to CodePen after we mentioned it in a post. But you can see how well something like this could work:

What about your company?

How do you use CodePen?