View Preferences

You have a lot of control over how the editor looks, meaning which parts of the UI you are seeing, where they go, and what they look like. Several of the ways to control the view are in the Editor Layout menu:

Panels

The icons along the far left here represent Panels. You can open any one Panel at a time, or have them all closed. They can be convenient to leave open, but free up extra space when closed.

The Panels are:

Files
Blocks
Privacy & Collaboration
Details & Comments

There are a few more icons on the bottom of that leftmost bar for opening the Assets and Settings modals.

Editor Layout

Any file can be opened as an Editor Tab in the Editors area. The Editors area can be placed on the left, top, or right side, depending on what you prefer.

The Editors area can have up to three tab groups. On a default Pen, all three areas are open. One contains index.html, one contains style.css, and one contains script.js. But you could combine them all into a single editor area with tabs by dragging them there:

One editor tab group can have as many tabs as you like (it will scroll horizontally). The tabs can also be dragged to be rearranged within one tab group.

Editors & Preview

By default, both the editors and the preview are open. That’s the typical use case where you can write code and see the preview update. But you don’t have to have them both open. You can set the editor layout to Editors Only or Preview Only.

Editors only. One use case for this is when you “break off” the preview using Live View onto another window or device.

Preview Only. Note that sharing a Pen like this is what we used to call “Full Page View” and if you shared it with the Details & Comments Panel open that is essentially the same as what we used to call “Details View”.

The Console is within the Preview area. When open, it splits the area with the console with a resizer between them. You can even entirely maximize the console itself if what you are coding is more relevant to the console than the preview.

Color Modes

The entire site can now be changed from the default Dark Mode into Light Mode (or to follow your system setting). You change this in Settings > Editor Settings > Theme & Font.

Note that the syntax highlighting theme is not tied to the site theme. So you can mismatch them if you’d like.

Another important note is that your preview <iframe> will by default respect your system setting, so even if you’ve specifically set, for example, a light site theme and a light syntax highlighting theme, if your operating system is set to dark mode, you might see it appearing dark anyway if you haven’t set any CSS to change that.

Fonts & Syntax Highlighting

You can change the coding typeface to any of about 20 hand picked, artisanal, bespoke, foundry to table coding fonts. You do this from Settings > Editor Settings > Theme & Font. You’ll also see the Syntax Highlighting Themes right there.

The SynthWave theme with the Comic Code font, if you are powerful enough to handle it.

Minimal UI

Toggle on Minimal UI mode in the Editor Layout menu to remove many of the default UI elements, like hiding the header and footer (until intentionally revealed), minimizing the header, and removing some backgrounds and borders.

This view, of which you can share your Pens specifically if you want, harkens back the original CodePen editor and what used to be “Presentation Mode”.

URL Params

param	value examples
console	true false
file	/index.html /styles/variables/colors.scss
minimal	true false
orientation	left top right
panel	assets blocks details files permissions settings
show	editors preview split
tour	welcome

Example:

https://codepen.io/editor/you/pen/slug?console=true&file=%2Findex.html&minimal=true&orientation=left&panel=files&show=split

You don’t have to manually create these URLs, you can get the Pen in the exact state you want to share it in and then use the Copy Link with Layout option in the Share Menu.

Omnibar

Every one of these view options is available from the Omnibar, either by directly updating the view or jumping you to the setting where you can see the options and make the change.