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

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.
  • Use the Hire Me feature to find freelance work.
  • 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, Rachel Smith, and Tim Holman.

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.


Uhm, hi. I actually prefer learning about web apps through explanatory cartoon videos.

We got you.


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.

Go Offline.

The CodePen community is awesome on the web, but they like to hang out in real life too! There have been hundreds of meetups all around the world. From Milwaukee, Wisconsin to Hyderabad, India.

See Upcoming Meetups →

Learn About Hosting a Meetup →

Social Activity

CodePen PRO

What are you waiting for? Choose a plan!

Individual Plans
Team Plans

Starter

Sign Up

For the lone peacocks,
the rolling stones.

Developer

Sign Up

For the motivated mavens,
the keyboard wanderer.

Super

Sign Up

For the radical malcontents,
the wild-eyed acumens.

  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
Unlimited Private
Pens, Posts, & Collections
Private Projects only limited by number of allowed Projects
Collab Mode (Pens)
2-Person
Collab Mode (Pens)
6-Person
Collab Mode (Pens)
10-Person
Professor Mode (Pens)
10-Person
Professor Mode (Pens)
35-Person
Professor Mode (Pens)
100-Person
Live View (Pens & Projects)
Live View (Pens & Projects)
Live View (Pens & Projects)
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 (Pens)
Presentation Mode (Pens)
Presentation Mode (Pens)
Debug View
No Log In Required
Debug View
No Log In Required
Debug View
No Log In Required
Ads
You See No Ads
No Ads on Your Stuff
Ads
You See No Ads
No Ads on Your Stuff
Ads
You See No Ads
No Ads on Your Stuff
Higher Standing in
Popularity Algorithm
Higher Standing in
Popularity Algorithm
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
Use Pen in Header of Profile
Use Pen in Header of Profile
PRO Badge
PRO Badge
PRO Badge
Embed Themes
Unlimited Themes
Custom CSS
Hide Tab Bar & Logo
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
Unlimited Pen Templates
PRO Perks PRO Perks PRO Perks

Starter

Developer

Super

Super Team

5
Sign Up

For the roving bands, the nomadic tribes.

Each Member

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