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:
But also interesting and unusual demos, like this animated coffee infographic using their mapping and physics engines:
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:
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
The example code and demos on MDN offer links to jump that code over to CodePen:
Metafizzy demonstrates configurations of their components through Pens
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.
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.
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?