CodePen Projects
Zero setup, full-featured front end web development environment, right here in your web browser.
A Real File System
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.
- Files and Folder just like local development
- Automatic processing of preprocessor languages
- Deployment & Hosting
Move your local files over
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 accept 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.
Education
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
- Autoprefixer
- Less
- Stylus
- Nunjucks
- Pug
- Slim
- Markdown
- CoffeeScript
- TypeScript
- LiveScript
- Babel
Live Websites
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.