IntroducingCodePen 2.0
Build effortlessly in the cloud with an all-new online code editor that seamlessly combines your favorite tools. An IDE for your IDEAs.
Go To EditorDocumentationCodePen is a completely new coding experience. We've balanced the simplicity of the classic CodePen you've known and loved with advanced editing features, like Files, Block processing, Deployment and more.
See what's new in 2.0:
Files & Folders, oh my!
Pens now have their own file system! Want more than basic HTML, CSS and JS? Add, rename and organize files and folders to sculpt your Pen exactly how you want it.
You don't need to care, as the default is still HTML, CSS, and JS, but you can do more if you want to. You can also make your own default.
Build With Blocks
Blocks are what we call the technologies that get added to the build process in a 2.0 Pen. Anything that processes code will be a Block.
Mix-and-match as many Blocks as you like! Our super-smart CodePen Compiler makes sure everything works together. Blocks can be added manually or the Compiler will automatically add Blocks based on files to get everything ready for lightning-fast preview.
For launch, we're supporting the familiar languages and features that we've had on CodePen for years, but we'll be adding more Blocks over time to support new and helpful technologies. The main driver for 2.0 is our own desire to build a tool that makes it actually easy to add technology without worrying about config hell. Static-site generators, optimizers, linters, languages, and more will all be possible with Blocks.
Request a Block(Just send a message to support, we'll all see that.)
Pain-free Config
The CodePen Compiler seamlessly handles combining all the Blocks together while still giving you control. Each Block has their own config, so your own special TypeScript tsconfig.json or Prettier preferences can all be used. We even built a visual config editor, making it easy to see and search available options.
Realtime Collaboration
You can invite anyone to collaborate on your Pen through their email address or CodePen username.
You don't have to be on the same Team or go to a special URL. If they accept, they will have editor access to your Pen at any time. You can work together in realtime, or make changes asynchronously.
Omnibar: Your Shortcut to Everything
A simple keyboard shortcut () opens the Omnibar letting you quickly search through the Pen's files, settings, and any commands for controlling the Pen and UI. Most commands have direct keyboard shortcuts of their own, but there is no need to memorize those when the Omnibar will help you get there.
Real Privacy Controls
Your Pen can be Private, meaning it will have an unguessable URL and we’ll hide it from browsing and search.
On top of that, you can optionally add a password so only people with the correct password can see it.
You can also lock down a Pen such that only people that you specifically invite can see the Pen. These all-new privacy controls are designed for more uses than ever before.
- Nothing to install.
- No command line to wrestle with.
- No config to get tangled in.
- No complicated publishing.
- Unlimited possibilities.
