The Pens you build on CodePen can be displayed on any other site. Nothing beats documentation or tutorials with working code demonstrations.
All the power of CodePen in a tiny box.
When you’re demonstrating something about the web, there is nothing better than showing people the real code and the real output of that code. The proof is in the pudding, they say.
Embedded Pens are perfect for:
Private Pens are embeddable too (just bear in mind they aren’t exactly very private when you do!)
Wanna show just the preview? No problem. How about just the code? Sure. Split between both? That’s a great way to show off the power of code.
It really depends on a Pen-by-Pen basis what makes the most sense to show. Our embeds allow you to customize that easily. Just click which tabs you want active by default.
Embedded Pens use themes. Themes control all the styles and colors in use. That way Embedded Pens don’t have to look like CodePen, they can look like you. They can match your brand and your preferences.
Even better: when the look of your site changes, it’s no problem. Just update the theme and all your Embedded Pens using that theme update immediately.
All users have one theme. PRO users get unlimited themes and the ability to apply Custom CSS to themes, giving you 100% design control, including the ability to hide the Tab Bar.
Just like the Editor on CodePen itself! The preview is updated as you type. This is great for encouraging your visitors to play with your code. They don’t have to leave your site to start learning and experimenting.
Among other things, this is feature is great for documentation or for demos where people are expected to customize the code for their needs.
Editable Embeds are a PRO feature.
You can put Embedded Pens just about anywhere. Our default embeds are
Many platforms, like Medium, will automatically turn URLs to Pens into Embedded Pens. That’s because CodePen supports oEmbed and is on Embedly. We also have WordPress plugins to provide more options there.