Welcome

CodePen is a place to write and share front-end code.

Sign Up

We call them Pens.

Write HTML, CSS, and JavaScript and get a real-time preview. You can use CodePen to:

  • Show off the amazing things you build.
  • Learn new things by tinkering.
  • Build reduced test cases to report bugs and get help on tricky problems.
  • Try out new technologies for the first time.
  • Build components to later use elsewhere.

The possibilities are endless. Everything you do is saved on CodePen, so the more you use it the more useful it becomes.

Take the Editor Tour →

Check out Popular Pens →

Screenshot of the Editor on CodePen

The CodePen Editor

The CodePen Editor has a ton of features.

Write code with preprocessors, if you want.

Sass, LESS, Stylus, PostCSS. Markdown, Haml, Slim, Pug. Just some of the preprocessor syntaxes you can use on CodePen. We want you to feel comfortable in whatever languages you already know and like.

And we also want you to be able to explore and learn new ones easily.

Or, don’t use them at all. You do you.



Your Web Portfolio

Your profile on CodePen is like your front end development portfolio. You can showcase all your best work there. Proof positive you're the genius your mother always told you you were.

  • You can have 100% design control over your profile.
  • You follow other developers from their profile, and other developers follow you.
  • Explore and search through everything you've created on CodePen.

Check out some of Team CodePen's profile's like Chris Coyier, Marie Mosley, and Rachel Smith.

Example of User Profile
Examples of Embeds

Put a Pen on it.

Any Pen can be embedded on any other website. It's just some simple copy-and-paste HTML code. Embedded Pens are the most compelling way to display code demos. Not only can you see the real final rendered result (screenshots, pshaw) but you can see all the code used to make it in luscious syntax highlighting.

You have complete control over the look of the Embedded Pens. With our Embed Builder, you can quickly change colors and settings, even making them into a theme you can apply to multiple Embedded Pens. Or you can take complete control by applying your own custom CSS.

All About CodePen Embeds →

Present

CodePen is perfect for sharing code at conferences and meet-ups through an overhead projector. We even have Presentation Mode which is specifically for this purpose.

In Presentation Mode, the screen can be arranged just how you like it to display the code and result you want to show. Adjust settings on the fly to make things easier to see. Then quickly give your viewers a URL to the very code you are presenting.


Teach

CodePen can be used for teaching in all kinds of different ways. Teachers can provide instructional Pens that students need to fork, work on, and then turn back in.

Need to present to the class and get everyone on the same page? Professor Mode updates the students screens in real time. Better than video by a mile.

Get Social.

CodePen is a community. You follow other developers. Other developers follow you. You love, collect, and comment on other peoples Pens. Other people love, collect,and comment on your Pens.

The social aspect is part of what makes CodePen a fun place to be.

Social Activity

More than Pens

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 →

Share ideas with Posts

Our post editor lets you write your post in Markdown, a plain-text format that converts to HTML. We have some built-in tools to make writing, editing, and styling Markdown easier, even if you've never used it before.

Custom CSS, easy Pen embeds, and drafts can help you craft the perfect write-up to share your idea with the world.

Learn More →

Organize with Collections

Collections are groups of Pens. It's a way to organize and share Pens that have some useful or fun connection.

You might create a Collection of user interface components you'd like to implement on a particular project. Or a group of Pens that serve as starts for assignments in a web education class. Or a group of Pens that are a tribute to The Smurfs. Anything you want!

Learn More →

CodePen PRO

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.

2
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
  • PRO badge
  • 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