Embedded Pens

The Pens you build on CodePen can be displayed on any other site. Nothing beats documentation or tutorials with working code demonstrations.

⬇ Here’s an Embedded Pen ⬇

Features

Embeds are very powerful.

All the power of CodePen in a tiny box.

  • Easy copy & paste code allows you to grab and Pen and bring it anywhere.
  • You customize what you want shown. All preview? Sure. Just the CSS? No problem. Both HTML and Result? You got it.
  • Apply themes so that you can control all the design of all your embeds at once.
  • An optional click-to-play feature makes the embeds extra lightweight.
  • PRO: Make your Embedded Pens editable. A live code editor on your own site!
  • PRO: Unlimited Themes. Have several sites to match the look of? Makes 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 themes and the ability to apply Custom CSS to themes, giving you 100% design control, including the ability to hide the Tab Bar.

A Live Editor

Embeds can be active editors.

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.

Anywhere

WordPress, Medium, DEV, 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.

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.

What are you waiting for? Choose a plan!

Individual Plans
Team Plans

Free

0 forever

Starter

Annual Starter

Switch to monthly billing Switch to annual billing

Developer

Annual Developer

Switch to monthly billing Switch to annual billing

Super

Annual Super

Switch to monthly billing Switch to annual billing
  • Unlimited public Pens and Collections
  • Unlimited templates
  • Debug view (requires log in)
  • 1 project with 10 files
  • Everything in Free
  • Asset hosting
    2 GB total storage
    5 MB per file
  • 10 Projects
    50 files/Project
    1 deployed
  • 2 person Collab Mode
    10 person Professor Mode
    (Pens only)
  • Private Pens, Collections, and Projects.
  • No ads
  • Unlimited embed themes with custom CSS
  • No-Login Pen Debug View
  • Live View
  • Everything in Starter
  • Asset hosting
    10 GB total storage
    10 MB per file
  • 25 Projects
    150 files/Project
    5 deployed
  • 6 person Collab Mode
    35 person Professor Mode
    (Pens only)
  • Use your own domain for Projects
  • Everything in Developer
  • Asset hosting
    20 GB total storage
    15 MB per file
  • 50 Projects
    300 files/Project
    20 deployed
  • 10 person Collab Mode
    100 person Professor Mode
    (Pens only)

Super Team

Annual Super Team

Starting a team gives one team account and boosts your team members’ plans to developer level. You can easily switch between working on pens, projects, posts and collections on team and individual accounts.

2
Switch to monthly billing Switch to annual billing

Team account features

  • All Team Members share access to the Team Account, which has its own profile. That way everyone can work together, sharing access to editing Pens, Projects, Posts, Collections, and Assets.
  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • Debug View (no log in required)
  • Live View
  • PRO
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • See no ads on CodePen
  • 10 person Collab Mode (Pens only)
  • 35 person Professor Mode (Pens only)
  • Asset hosting with 20 GB total storage
  • 20 Projects with 300 files/project
    (20 Projects/member)
  • 10 deployed Projects
    (10 per Team member)
  • Use your own domain for 10 Projects
    (10 per Team member)
Each team member gets all the features of a Developer PRO account when they use CodePen in their personal context.