The original CodePen Editor (we’ll call it 1.0) evolved pretty gradually during it’s first dozen years of existence, but the 2.0 Editor is a pretty big change! Lots of stuff is different. This page is a general FAQ that may help orient you between old concepts and new.

(The “Cheese” metaphor is from a famous book.)

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 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 Debug View?

Debug View is now just the Preview that you see in the 2.0 Editor. PRO users can copy that URL from there to open in another browser window/tab. Users without a PRO plan will be redirected from the Preview URL back to the CodePen Editor.

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.

Where is Live View?

Live View still exists, it’s built into the Preview now. There is a link to open it from the Preview area in the 2.0 editor. The menu inside there has an Open Live Preview link you can click to open it in a new tab if that’s easier than copy/pasting the URL.

If you’re a PRO member, which is a requirement for Live View to work and automatically refresh the preview when being viewed outside of the editor, it will automatically work when viewing the preview — no special URL or query parameters needed.

Where is Collab Mode?

Collab Mode still exists, you just don’t need to go to a special URL anymore to use it, nor can anonymous users participate in a Collab Mode session. Instead, you invite other users as Editors. If they are online on that Pen the same time as you, you’ll automatically be a realtime editing mode that works the same was 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.

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?

Presentation mode was a special URL that would minimize the CodePen Editor interface which made it more suited for streaming and projecting on limited size screens.

The 2.0 Editor offers Minimal UI, which works simply by activating rather than needing to go to a different URL. You can activate and deactivate Minimal UI needed from the Pen Menu or by the command Toggle Minimal UI.

Minimal UI can automatically activate on small enough screens, and you can share a Pen with it turned on with the query param minimal=true.

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, add the Sass Block. 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.

How do I format files?

The old editor had a setting for “Format Files on Save” as well as a per-file context menu that offered to format files. This was done behind the scenes by different formatters. In the 2.0 Editor, the technology is much more clear as you add a Formatting Block yourself. For example, you can add the Prettier Block, and then all the file types that Prettier matches will be formatted automatically on save for you, and you can adjust the Prettier config to your preferences. You can still format one file at a time from the context menu of the file itself (without adding a Block) if you wish, and it tries to use Prettier on it.

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.

I had a unique workflow and you screwed it up!

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