cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv headernumbered-list123split-screen

This is an Embedded Pen.

I'm responsive!


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

Read the Docs →

Embed example

Editable embeds

Embedded Pens can be editable.

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.

Learn More →


You have total style control over Embedded Pens. Make them match your look.

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.

Themes example

You control what people see in embeds.

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.

There is even an postMessage API for changing tabs, if you need to get even more interactive.


You can embed any Pen on CodePen.

Just click the Embed button in the footer of the editor and it will pop up a screen that gives you the code you need and allows you to customize things like what tabs are visible and the height.

Private Pens are embeddable too.

Embed menu full

Types example

WordPress, Medium, Ello, Discourse...

You can put Embedded Pens just about anywhere. Our default embeds are just a bit of HTML and JavaScript. If you can't run the script, we offer an iframe version. We have a WordPress plugin. We also support oEmbed... so anything supporting Embedly will work too!


Read more about Embedded Pens in the documentation.

What are you waiting for? Choose a plan!

Individual Plans
Team Plans

Starter

$12.00/month
Go Annual, Save 25%!
$9.00/month
Billed Annually
Switch to Monthly
Sign Up

For the lone peacocks,
the rolling stones.

Developer

$19.00/month
Go Annual, Save 25%!
$14.25/month
Billed Annually
Switch to Monthly
Sign Up

For the motivated mavens,
the keyboard wanderer.

Super

$39.00/month
Go Annual, Save 25%!
$29.25/month
Billed Annually
Switch to Monthly
Sign Up

For the radical malcontents,
the wild-eyed acumens.

 
Unlimited Private
Pens, Posts, & Collections
Private Projects only limited by number of allowed Projects
 
 
Collab Mode
2-Person
Collab Mode
6-Person
 
Collab Mode
10-Person
 
Professor Mode
10-Person
Professor Mode
35-Person
 
Professor Mode
100-Person
Live View
 
Projects
10 Projects
50 Files / Project
1 Deployed Project
Projects
25 Projects
150 Files / Project
5 Deployed Projects
Use Your Own Domain for 5 Projects
 
Projects
50 Projects
300 Files / Project
20 Deployed Projects
Use Your Own Domain for 20 Projects
 
Asset Hosting
1 GB Total Storage
2 MB Max File Size
Unlimited Bandwidth
Asset Hosting
5 GB Total Storage
2 MB Max File Size
Unlimited Bandwidth
 
Asset Hosting
10 GB Asset Storage
2 MB Max File Size
Unlimited Bandwidth
Presentation Mode
 
Debug View
No Log In Required
 
 
No Ads
You See No Ads
No Ads
You See No Ads
No Ads on Your Stuff
 
No Ads
You See No Ads
No Ads on Your Stuff
 
Higher Standing in
Popularity Algorithm
 
 
Send to Phone SMS
100
Send to Phone SMS
1,000
 
Send to Phone SMS
2,000
Use Pen in Header of Profile
PRO Badge
 
Embed Themes
Unlimited Themes
Custom CSS
Hide Tab Bar & Logo
 
Unlimited Pen Templates
Yup PRO Perks Yup

Starter

Developer

Super

Super Team

Teams are billed per individual Member, with a minimum of 5 Members.
$19.00/month per Member
Go Annual, Save 25%!
$14.25/month per Member
Billed Annually
Switch to Monthly
Sign Up

For the roving bands, the nomadic tribes.

Each Member

$19.00 /month Value

Each member of your Team will receive the Developer Plan features listed below for their own personal account.

Below is the feature set for for the Team account itself. In addition, each Team Member gets PRO features equivalent to the individual Developer Plan when they are using CodePen as themselves.
Collab Mode
10-Person
Collab Mode
6-Person
Professor Mode
35-Person
Professor Mode
35-Person
Live View
Live View
Presentation Mode
Presentation Mode
Debug View
No Log In Required
Debug View
No Log In Required
Asset Hosting
10 GB Total Storage
2 MB Max File Size
Unlimited Bandwidth
Asset Hosting
5 GB Total Storage
2 MB Max File Size
Unlimited Bandwidth
Projects
20 Projects per Member
300 Files / Project
10 Deployed Projects per Member
Use Your Own Domain for 10 Projects per Member
Projects
25 Projects
150 Files / Project
5 Deploys
Use Their Own Domain for 5 Projects
Unlimited Private
Pens, Posts, & Collections
Private Projects only limited by number of allowed Projects
Unlimited Private
Pens, Posts, & Collections
Private Projects only limited by number of allowed Projects
No Ads
You See No Ads
No Ads on Your Stuff
No Ads
They See No Ads
No Ads on Their Stuff
Higher Standing in
Popularity Algorithm
Higher Standing in
Popularity Algorithm
Send to Phone SMS
2,000
Send to Phone SMS
1,000
Use Pen in Header of Profile
Use Pen in Header of Profile
PRO Badge
PRO Badge
Embed Themes
Unlimited Themes
Custom CSS
Hide Tab Bar & Logo
Embed Themes
Unlimited Themes
Custom CSS
Hide Tab Bar & Logo
Unlimited Pen Templates
Unlimited Pen Templates
PRO Perks PRO Perks