Embedded Pens

Features

Embeds are very powerful.

All the power of CodePen in a tiny box.

• Easy copy & paste code allows you to grab a Pen and bring it anywhere.
• You customize what you want shown. All preview? Just the CSS? Both? You got it.
• Apply themes so you can control all the design of all your embeds at once.

• An optional click-to-play feature makes the embeds extra lightweight.
• PRO: Unlimited Themes. Have several sites? Make as many themes as you want.
• PRO: Apply Custom CSS to themes so you have 100% design control.

For your site

Embedded Pens put code and previews on your site.

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:

• Documentation
• Blog Posts
• Tutorials
• Reduced Test Cases
• Isolated Demos

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.

• Regular, Dark, and Light default themes
• Custom Themes
• Custom CSS
• Hiding the Header
• Fills 100% of vertical and horizontal space
• Resizeable

Design Control

Your site, your design.

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 themesand the ability to apply Custom CSS to themes, giving you 100% design control, including the ability to hide the Tab Bar.