By default, the Pen editor is split up into three panels: HTML, CSS, and JS. Each panel takes up a third of the width or height of the screen, depending on the layout. You can resize, maximize, or collapse each panel to give yourself more space to write your code.

Resize a Panel

Drag the dividers between panels to resize.

Maximize a Panel

When you maximize an editor panel, the panel will expand to fill the width or height of your screen (depending on the layout). The other two panels will collapse.

There are two ways to maximize an editor panel. You can click the the dropdown menu in the upper right corner of your editor panel and select the “Maximize” option.

Or you can maximize the panel by double-clicking its drag handle. When the editor is above the preview panel, you can maximize an editor panel by double-clicking the handle on the left edge of the panel.

When the editor is at the left or right of the preview panel, you can maximize an editor panel by double-clicking the handle at the top of the panel.

Minimize a Panel

There are two ways to minimize an editor panel. You can drag it closed, or select the “Minimize” option from the dropdown menu in the upper right corner of your editor panel. The panel will collapse down to a thin, draggable handle.

Opening a Collapsed Panel

There are two ways to open a collapsed panel. You can click and drag it open, or double click the editor’s handle. The first time you double-click it, it will maximize the panel. Double-click it again to restore it to its original 1/3 size.

The Console Panel

Our interactive JavaScript console is closed by default. You can open the console from the “Console” button at the bottom of the editor, and close it by clicking the “X” button at the top of the console window.

URL Parameters

If you want to share or bookmark a Pen (or the blank Editor itself) in a particular state, you can use this system:

Without the Console

HTML On / CSS On / JS Off = http://codepen.io/pen/?editors=110
HTML On / CSS Off / JS Off = http://codepen.io/pen/?editors=100
HTML On / CSS Off / JS On = http://codepen.io/pen/?editors=101
HTML Off / CSS On / JS Off = http://codepen.io/pen/?editors=010
HTML Off / CSS Off / JS On = http://codepen.io/pen/?editors=001
HTML Off / CSS On / JS On = http://codepen.io/pen/?editors=011

With the Console

HTML On / CSS Off / JS On / Console On = http://codepen.io/pen/?editors=1011
HTML Off / CSS Off / JS On / Console On = http://codepen.io/pen/?editors=0011
HTML Off / CSS On / JS On / Console On = http://codepen.io/pen/?editors=0111
HTML On / CSS Off / JS On / Console Replacing Preview = http://codepen.io/pen/?editors=1012
HTML Off / CSS Off / JS On / Console Replacing Preview = http://codepen.io/pen/?editors=0012
HTML Off / CSS On / JS On/ Console Replacing Preview = http://codepen.io/pen/?editors=0112

Was this article helpful?
YesNo