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

CodePen Projects

Zero setup, full-featured front end web development environment, right here in your web browser.

Your sidebar. Whatever files you need.

Web Design 101. You have a homepage and a contact page. Your `index.html` links to `contact.html` with a <a href="contact.html">anchor link</a>. That works exactly as you think it would in the CodePen Project Editor.

Everything works exactly as you would expect in developing a website with a local file system and simple web server. Relative file paths to your images? No problem. @import in your CSS? Do it. Ajax requests? Sure thing. Nested folders? Got 'em.


Drag & Drop Uploading

Have an existing project elsewhere? Maybe a git repo you cloned locally and want to play with? You can drag the files into the Project Editor and get working right away.

Projects accepts all kinds of front-end related file types, like HTML, CSS, SVG/other image types, and JavaScript. If you upload a currently unsupported file type (like PHP), we'll let you know.

This is where you teach front-end web dev.

Don't buy expensive software that you have to install on every computer and keep upgraded by hand. You can get to teaching instantly with the CodePen Project Editor, in a ready-to-go environment that is just like a real world web development environment.

Beyond that, starter templates help jumpstart a session past even more setup and right into the important parts.

Zero-Setup Preprocessing

Like to write your CSS with Sass? We got you. Just name the file, for example, with the file extension `.scss` and we'll understand and process that file for you. Included partials and all. We've got all the major ones covered:

  • Sass/SCSS
  • Less
  • Stylus
  • Autoprefixer
  • Nunjucks
  • Pug
  • Slim
  • Markdown
  • CoffeeScript
  • TypeScript
  • LiveScript
  • Babel
Example of Project with Many Preprocessor in Use

Example of Project with Deployment URL and Domain Mapped URL

Deploy When Ready

You'll be able to deploy a CodePen Project to a static website. It's a one click process for PRO users!

The Project Editor then becomes your development version. You'll be able to make changes and save your project without affecting the deployed version.

+ Custom Domains!

Wish you could use my-own-website.com for something you built on CodePen? You can now!

Developer PRO users will also be able to map their deployed project to a domain they own. That way you can manage real production websites on CodePen.

The Most Comfortable Place To Code

Syntax Highlighting

Choose your favorite light or dark theme.

Font Choice

Choose your favorite coding font.

Indentation

Choose tabs or spaces, and how much indentation you want on a per-project basis.

Emmet

Tab-key expanding shortcuts for HTML & CSS.

Keyboard Shortcuts

All the favorites like line-duplication, tag-closing, line-commenting.

Auto-Complete

Ctrl-space will help you complete HTML tags, CSS properties and values, and JavaScript variables, functions, and properties.

File Search

Fuzzy matching of file names means you can search for and jump to files super quickly.

Context Menus

Perform common actions easily through a right-click context menu, like renaming and duplicating files.

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