css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
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.

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

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