cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Unlock the full power
of CodePen PRO

All this great stuff starts at just $8

Keep Your Work Secret with
Unlimited Privacy

You can make as many Private Pens, Private Posts, and Private Collections as you wish! Private Projects are only limited by how many total Projects your plan has.

Nobody can see your private stuff until you want them to, because they are at secret unguessable, non-searchable, non-indexable URLs. But, you can still share that URL with anyone you choose.

Private Pens and Projects are unlicensed, so you may apply your own before sharing so that you retain full ownership.

Learn More →

Docs on Privacy →

Easily Upload Files with
Asset Hosting

Need to use an image in a Pen? No more awkwardly finding alternate hosting for it, you can drag-and-drop it right onto CodePen and we'll host it for you.

And it doesn't have to be just images. It could be CSS, JavaScript, a PDF you want to link up, a short movie file, some JSON to request, really anything!

Learn More →

Do more with
Projects

Projects is the most powerful feature of CodePen. It's a full blown IDE right in the browser, with automatic preprocessing, drag and drop uploading, live previews, website deployment, and much more.

Free users can have a play with a single Project, but PRO users get more Projects, more files per Project, and more deployments and custom domains for their Projects.

Learn More →

Auto Updating Previews in
Live View

See the results of your code on multiple computers or devices as-you-type. Great for mobile testing or if you prefer having a full-page preview to watch as you work.

If those other devices can receive text messages, you can send over the live URL directly from the editor just by entering the phone number. Works anywhere in the world!

Learn More →

Match Your Site's Style with
Unlimited Embed Themes

Your website has a unique look, so why should the code and demos you provide there look generic? The CodePen Embed Builder allows you to build themes to completely customize the look of Embedded Pens. Change the look of your site? Just change the theme and all your Embedded Pens change too.

As a PRO, you'll be able to build unlimited themes, remove the branding, and even use your own totally custom CSS.

Learn More →

Pair Program Across the World in
Collab Mode

Live collaboration on code. Multiple people can type and edit code in a Pen at the same time, all while still seeing the live preview. There is a chat area too, all for the best in long distance pair programming!

Learn More →

Teach a Classroom of Students in
Professor Mode

Have students watch you work in real time! Every key press and setting change is shown live. Better than video - the students can interact with the code, see it live rendering, and participate in group chat. Students can save a fork at any time, keeping a copy for themselves to play with.

Learn More →

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, Posts, and Collections
  • Unlimited templates
  • Debug view (requires log in)
  • 1 Embed theme
  • 1 project with 10 files
  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • No-Login Pen Debug View
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen
  • 10 Projects with 50 files/project
  • 1 deployed Project
  • 2 person Collab Mode
    (Pens only)
  • 10 person Professor Mode
    (Pens only)
  • Asset hosting with 1 GB total storage
  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • No-Login Pen Debug View
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen & no ads on your stuff
  • Use your own domain for Projects
  • 25 Projects with 150 files/Project
  • 5 deployed Projects
  • 6 person Collab Mode
    (Pens only)
  • 35 person Professor Mode
    (Pens only)
  • Asset hosting with 5 GB total storage
  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • No-Login Pen Debug View
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen & no ads on your stuff
  • Use your own domain for Projects
  • 50 projects with 300 files/project
  • 20 deployed Projects
  • 10 person Collab Mode
    (Pens only)
  • 100 person Professor Mode
    (Pens only)
  • Asset hosting with 10 GB total storage

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.

5
Switch to monthly billing Switch to annual billing

Team account features

Each team gets its own account.

  • 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
  • PRObadge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • See no ads on CodePen & no ads on your stuff
  • 10 person Collab Mode (Pens only)
  • 35 person Professor Mode (Pens only)
  • Asset hosting with 10 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)

Team member features

Each team member gets all the features of a Developer PRO account.

  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • Debug View (no log in required)
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen & no ads on your stuff
  • 6 person Collab Mode (Pens only)
  • 35 person Professor Mode (Pens only)
  • Asset hosting with 5 GB total storage
  • 25 projects with 150 files/Project
  • 5 deployed Projects
  • Use your own domain for Projects