The Classic CodePen Editor (think of it as 1.0) evolved pretty gradually during its first dozen years of existence, but the 2.0 Editor is a pretty big change! This page is a general FAQ that may help orient you to the differences between old and new concepts.

(Who moved my cheese 🧀?! is the relevant metaphor from a famous book.)

What’s all of this extra UI?

The 2.0 Editor is a complete rewrite with so many new features and improvements that required a fresh UI. In many cases, we’ve cleaned things up and made it even simpler, but it may take a little adjustment. Three main changes that you’ll notice right away:

1. Files! Pens aren’t limited to an HTML, CSS & JS editor. You can add more files of different types (depending on your PRO level), and even rename and organize with folders. You can even open as many file tabs as you want in up to three editors.
2. Sidebar! There you’ll find panels for Files, Blocks, Privacy & Collaboration, and more to find information and controls for the Pen.
3. Omnibar! The search box at the top is your fast pass to everything the 2.0 Editor has to offer. You can use it to find Files, Blocks, Settings, Shortcuts. If you’re ever unsure about where something from the Classic Editor has moved, search for it in the Omnibar!

If you want to get the UI a little closer to the Classic Editor, try enabling Minimal UI which automatically hides the Sidebar & Footer (while keeping them accessible) and simplifies parts of the UI.

How do I use my favorite Processor?

You love processors like Sass, Markdown, and TypeScript and so do we! We love them so much that we made a brand new build system, known as the Compiler, to handle your code using what we call Blocks. The Compiler intelligently scans and compiles everything to render the Preview at lightning speed.

How does that all work? You don’t even need to worry about it. In most cases, using the right file extension (.md, .ts, .jsx, .scss, etc.) will add necessary Blocks and the Compiler will do its thing.

Why is there HTML in my HTML?

Pens now use a complete and valid HTML page in the index.html file. By default, we add the necessary link and script tags to wire up the CSS & JS and other necessary scaffolding.

If you’d rather have just the body contents like CodePen of yore, rename your index.html file to index.pen.html and remove all the extra tags. From there, our Classic Block will automatically add all the scaffolding and link up the primary style & script files.

Looking to have the Classic Block already set up every time you make a new Pen? Set our Blank Classic Template as your Default Template.

Can’t I just have everything exactly like the Classic Editor?

Kinda! We’ve done a lot of work to make the 2.0 Editor feel familiar while also cramming in amazing features that open up all sorts of new capabilities that Pens have never had before.

If you’re still yearning for that Classic Editor feel, then we recommend two changes:

1. Enable Minimal UI
2. Set our Blank Classic Template as your Default Template

You can also fork the Blank Classic Template to make your own Template with whatever kind of Blocks you want!

Where is Format on Save?

The Classic Editor had a setting for “Format on Save”. In 2.0, simply add the Prettier Block (or another Formatting Block) and your Pen’s code will be perfectly formatted whenever you save. If you want that all the time, make sure you add Prettier to your Default Template.

You can still format one file at a time from the context menu of the file itself (without adding a Block) if you wish.

Where is Full Page View?

Full Page View was all about showing off the preview of the Pen you’ve built with minimal other distractions. You saw a nearly full-page preview of the Pen, and just the CodePen header remained.

You can do the same thing in the 2.0 Editor. Close all the panels, then choose “Preview Only” from the View Menu, and you have the same overall view. You can also share the Pen with others in this state by including the show=preview URL parameter. The quick way is to get the Pen looking how you want to share it, then go to the share menu and click “Copy Link with Layout”.

Where is Details View?

Details View was all about showing off the Pen, including preview and code, but having more of the page dedicated to the description, tags, and comments of the Pen.

In the 2.0 Editor, you can share the Pen with the Details Panel open, which includes the same things. You include ?panel=details in the URL as a query parameter. Or if you’ve got the Details Panel open currently, select the menu option (or run the command) Copy Link with Layout and it will be there.

Where is Live View / Debug View?

Live View and Debug View are now just the Preview that you see in the 2.0 Editor. PRO users can copy that URL from the Preview address bar or click the Open Live Preview in the Preview Menu to open it in a new tab. The Preview will automatically refresh across all browsers whenever you make changes in the Editor – no special URL or query parameters needed!

The URL will look something like:

https://es-d-1410985520250708-0197d294-691a-7bee-a429-233e2196af98.codepen.dev/

This URL contains a limited-time session identifier, so it will not work for extended periods of time. Users without a PRO plan will be redirected from the Preview URL back to the CodePen Editor.

Where is Collab Mode?

Collaboration is now built right into the 2.0 Editor – you don’t need a special URL anymore! To get started, invite other users as Editors in the Privacy & Collaboration Panel.

If they are online at the same time as you, you’ll both be realtime editing the same way classic Collab Mode did. Realtime collaboration is better in the 2.0 Editor as it is easier to see what your fellow collaborators are up to by seeing exactly what file and line they are editing at any time along with the ability to jump to where they are.

Even better: With the new Collaboration setup, Editors can make and save changes to Pens while other Editors are offline. They’ll see the updated code when they come back.

Where is Professor Mode?

Professor mode is discontinued for now.

It shares a lot of the same characteristics as inviting live collaborators, so that’s always an option. Professor Mode was unique, though, in that the “watchers” did not have editing access to the Pen. If you really need this feature still, feel free to contact support to let us know your use case, and we’ll see about bringing it back.

Where is Presentation Mode?

You can trigger Presentation Mode in the 2.0 Editor from the Omnibar or by using the ?presentation=true query parameter in the URL!

Presentation mode minimizes the CodePen Editor interface, making it better suited for streaming and projecting on small screens. The Presentation mode is even more focused than the global Minimal UI setting.

Classic Presentation Mode offered additional controls for Fonts and Theme, but those settings aren’t available in the 2.0 Editor yet.

Where are Projects?

Projects are just Pens now. The point of Projects was that they gave you a file system to work with instead of just the three code editors (HTML, CSS, and JavaScript). Now, all Pens have a file system to use. Projects would also assume what processors to run based on the file extensions files were, like a style.scss file would be automatically processed by Sass. This is still true in Pens — a style.scss file will automatically add the Sass Block and be processed by it. There is nothing Projects could do that Pens cannot.

All Projects will be (or have been) converted to Pens.

The Autoprefixer Setting is now the PostCSS Block

Autoprefixer has always been a plugin of PostCSS, not an independent processor. So instead of adding Autoprefixer as a Block, if you want to use it, you use the PostCSS. The default config that we scaffold for PostCSS includes Autoprefixer, so you’ll automatically get it (and can remove it if you wish).

The Bundle with Babel & JSX Setting is now the Babel Block

Projects supported React with a setting called “Bundle with Babel & JSX”. If your Project had this setting, when it was converted to a Pen, the Babel Block was automatically added to it, which processes JSX by default.

You don’t need an entry point file anymore

In the new CodePen Editor, you don’t need to specify and entry point file anymore. Any file that needs to be an entry point will automatically be an entry point.

Where are CSS preprocessors?

You used to visit the Pen Settings area which had a whole CSS section where you could choose which CSS preprocessor to us. In the new CodePen Editor, this is entirely handled by Blocks, and much more flexibly. If you’d like to use Sass, for example, rename your style.css to style.scss or style.sass and the Sass Block will automatically get added! This doesn’t prevent you from adding other Blocks that also process CSS, which is an improvement from the old editor where you could only pick one.

Where are CSS preprocess add-ons?

Some of the CSS preprocessors has add-ons you could use optionally. For instance, in Stylus you could use an add-on called Nib by using the line @import 'nib';. These add-ons should still be supported (just use the same line of code) with the relevant Blocks. Although they may be limited to certain versions of the Blocks going forward.

Where do I choose my CSS base?

Pens used to be able to choose from Normalize, Reset, or None as a CSS base. If your Pen used one of these settings, when it was converted to the New Editor a <link rel="stylesheet" href="..."> was added to your index.html file linking to a hosted version of those CSS base files.

If you’d like to use them in new Pens, search for them in the Assets area. For instance, searching for “meyer” there (as in, the famous Eric Meyer’s CSS Reset) and you’ll see various copies of that on npm you can grab a link to to use in your HTML or CSS.

How do I do Vendor Prefixing in CSS?

The old editor had options in CSS settings to turn on Autoprefixer or use Prefixfree.

• A Pen that used the Autoprefixer setting that has been converted to the new CodePen Editor will have the PostCSS Block enabled with config that uses Autoprefixer.
• A Pen that used the Prefixfree (a client-side JavaScript library for vendor prefixing CSS) will have a <script src="..."></script> added to the index.html of the Pen linking to a hosted file of that library.

Where are my Global Editor Settings?

Global editor settings (like font, syntax hightlighting theme, etc) are still available in your Settings. In the new CodePen editor, many of these options are available to change without leaving the editor in the Pen Settings dialog, including some new global editor settings like line-height.

How do I add External Resources?

In the old editor, you could add external resources to both CSS and JS from the Pen Settings dialog. You’d just put a URL there, and CodePen would insert it into the preview as a <link> or <script> respectively. This is no longer necessary in the new editor, because we’re exposing the complete index.html file where you can place those elements exactly where you’d like them yourself.

The old Pen Settings dialog also offered the ability to search for external resources. That has moved to Packages search in the Assets dialog and offers copy and pasteable examples in the search results.

How do I add Bootstrap?

Searching for “bootstrap” in the Packages search should bring up the npm-hosted version of the latest Bootstrap. Bootstrap is one of those libraries that has both a CSS and JavaScript dependency. In the search results, you should the code block for Bootstrap has four options to toggle between. Two options for the JavaScript esm and script, and two options for the CSS, link and import. They all should work and what you use depends on what you prefer in your Pen. With one of each added appropriately to your Pen, you should have a fully working Bootstrap.

How do I choose what languages to write in?

You might be thinking along the lines of “How do I write in Markdown?”. If that’s the case, you’d make a filed that ends in a Markdown extension like file.md (which will automatically add the Markdown block), and then you write in the Markdown language in that file. Or “How do I write in JSX?” — in which you’d create a file ending in .jsx (which will add Babel by default) and then you can write in that language.

Are URL Extensions still supported?

The Old Editor had a feature where appending a file extension to the end of the URL would serve that Pens content of the relevant language. Like adding .html to the end of the URL would serve the Pens saved HTML. It would also match preprocessor languages, like a Pen that used SCSS, if you added .scss to the URL, would serve the saved SCSS content, where .css would serve the processed SCSS code as CSS.

Redirects are in place for basic usage.

{pen_url} below refers to Old Editor URLs, like:

https://codepen.io/chriscoyier/pen/gbaadoq

{raw_files_url} below refers to special URLs exclusively for serving raw files, like:

https://01987b8b-1f29-7438-b3b6-8cc067e97bed.codepenusercontent.com/

Original URL	Redirect in Place
{pen_url}.html	{raw_files_url}/index.html
{pen_url}.md	{raw_files_url}/index.md
{pen_url}.css	{raw_files_url}/style.css
{pen_url}.scss	{raw_files_url}/style.scss
{pen_url}.sass	{raw_files_url}/style.sass
{pen_url}.less	{raw_files_url}/style.less
{pen_url}.postcss	{raw_files_url}/style.css (*)
{pen_url}.stylus	{raw_files_url}/style.styl
{pen_url}.js	{raw_files_url}/script.js
{pen_url}.babel	{raw_files_url}/script.js (*)

What are the changes to converted Projects?

Projects are a closer match to the 2.0 editor, so the change may be less noticeable for Projects users. Here’s a list of things that change after a Project is converted:

1. Autoprefixer in Projects had zero config. After conversion it will use the PostCSS block with minimal config.
2. Projects could optionally turn on a “Bundle JavaScript” setting which would process JavaScript with Babel (with JSX processing) with a specified entry point file using Rollup. After conversion, entry points are not necessary as the CodePen Compiler automatically determines them. Babel will be enabled as a block when necessary and the Babel config will be compatible with how it worked as a Project (slightly different than the default Babel config).
3. Projects had a minification option. This is no longer available in the 2.0 Editor. We may add a Block that does this in the future.
4. Projects used Less version 3 but the 2.0 editor only supports Less version 4+.
5. The Markdown in Projects was processed with marked, but the Markdown Block is processed with markdown-it.

What Happened to {X} Language?

Due to very low usage, Haml, Slim, CoffeeScript, Flutter, and LiveScript are all deprecated in the 2.0 editor. Pens that are converted from the Classic Editor to the 2.0 editor should still work in that we process the code during conversion so the Pen will still render as it was left. The original source code will also be preserved in a file.

Our goal is to offer more, newer languages faster.

I had a unique workflow, and you screwed it up!

Please let us know about it in support. We appreciate it!