Introducing

CodePen 2.0

Private Beta

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.

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.

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.