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.

One of the main reasons we ever started building CodePen is because it’s such a compelling way to demonstrate front end code. Not just a snippet of code shown on the page, but a snippet and that code actually running and rendered.

The proof is in the pudding, as they say.

When you create a Pen in CodePen, it is inherently true. What you author is what is rendered. So if it works in the browser you are using, it works in the browser you are using.

That’s what makes CodePen a great place for “reduced test cases”. That is, an example of code with everything stripped away except for the specific thing you are trying to showcase. Most commonly, a bug, or what you think is a bug.

Long have I suggested to people they make a reduced test case on the CSS-Tricks forums.


It’s for everyone’s benefit. You might suss out the bug as you create it, and if not, you have this true evidence that the problem exists. And your chances of someone being able to understand and help quickly are much higher. We don’t have rendering engines in our brains (sadly).

I write this now because I just saw that GreenSock, who do cool stuff around here on CodePen, strongly encourage people to create reduced test cases on CodePen when asking for help in their forums:

We’re eager to get your questions answered, but in order to get you the fastest, most accurate response, it is very important that you provide code that we can test.

They even made a swell video:

Good idea team! I couldn’t agree more.