1 min readFreemium

CodePen

CodePen is an online code editor and community where you write HTML, CSS and JavaScript in the browser and see the result live.

// at a glance

Is CodePen free?
Freemium. Partly. CodePen has a free plan, with paid plans for more features or usage.
Category
#Web Development
Website
codepen.io ↗
CodePen logo

What is CodePen?

CodePen is a social playground for front-end developers. You open a Pen, write HTML, CSS and JavaScript in three panels, and the preview updates as you type. It is a quick way to test an idea, reproduce a bug, build a demo or prototype a component without setting up anything on your computer.

The community side is just as important. Millions of public Pens can be searched, forked and learned from, and weekly challenges give you prompts to practise with. Pens can be embedded in blog posts and documentation, and Projects let you build larger multi-file sites. A Pro subscription adds private work, asset hosting, collaboration and removes ads.

Main Features

  • Live HTML, CSS and JavaScript editor in the browser
  • Support for preprocessors and external libraries
  • Fork and remix public Pens from the community
  • Embed Pens in blogs and docs
  • Weekly coding challenges
  • Projects for multi-file work

How to Get Started with CodePen

  1. Go to codepen.io and sign up for a free account
  2. Click Create to start a new Pen
  3. Write HTML, CSS and JavaScript and watch the preview update
  4. Save the Pen and share its link or embed code

CodePen Pricing

CodePen is free to use with public Pens. CodePen Pro starts at $8 a month for Starter, with Developer at $12 and Super at $26 a month when billed yearly, adding privacy controls, asset hosting, collaborators and no ads.

Who Should Use It?

  • Front-end developers testing ideas
  • Designers prototyping UI and animations
  • Students learning HTML, CSS and JavaScript
  • Teachers sharing live code examples
  • Writers embedding demos in tutorials

CodePen Alternatives

  • freeCodeCamp: Free coding lessons and certifications
  • Regex101: Build and test regular expressions online
  • Can I Use: Check browser support for web features

Frequently Asked Questions

Is CodePen free?

Yes. You can create and share public Pens for free. CodePen Pro, from $8 a month billed yearly, adds private Pens, asset hosting and collaboration.

Do I need an account to use CodePen?

You can try the editor without one, but a free account lets you save, organise and share your Pens.

Can I embed a CodePen in my website?

Yes. Every Pen has embed code you can paste into a blog post or documentation page.

Try CodePen