CodePen 2.0 balances the simplicity people loved about classic Pens

with a more powerful coding experience: a real file system, a new

build pipeline called Blocks, deployment, and collaboration baked into

the editor itself. You can get the overview at

codepen.io/2

.

Files & folders, finally

Pens are no longer stuck with a single HTML, CSS, and JS pane. You can

add, rename, and organize files and folders — open as many tabs as you

need across up to three editors. Legacy Projects became 2.0 Pens;

every Pen now has that file-system power built in.

Blocks instead of one-off settings

Blocks are the technologies in the build process — Sass, TypeScript,

Markdown, Prettier, PostCSS, and friends. Mix and match what you need;

the CodePen Compiler wires them together. Often you just use the right

extension (

.scss

,

.tsx

,

.md

) and the Compiler adds the Block for you. No more picking a single

preprocessor and calling it a day.

Find anything with the Omnibar

The search box at the top is the fast pass to files, Blocks, settings,

and shortcuts. If something moved from the Classic Editor, search for

it there. Prefer a quieter chrome? Turn on Minimal UI to tuck the

sidebar and footer away until you need them.

Privacy & collaboration, rebuilt

Pens can be private (unguessable URL, hidden from browse and search),

password-protected, or limited to people you invite. Collaboration no

longer needs a special Collab URL — invite editors from the Privacy

& Collaboration panel and work in realtime, or leave changes for

someone who comes online later.

It’s a big jump from the Classic Editor, but the goal is the same:

make front-end prototyping and sharing feel immediate — just with room

to grow when a Pen becomes something more.