The Editor View on CodePen now is optimized for the small screen! This has been a long time coming. We've always wanted to do it, but we also knew it needed proper lovin'. Shuffling some boxes around wasn't going to cut it for perhaps the most important screen on CodePen. We finally dug in and did it. Here's what it looks like now:

mobile-editor-before-after

The editors are now tabbed, so you can tap your way back and forth between them. No more zooming in and out and getting awkwardly shifted around. And besides the layout, we serve fewer resources in general so it should load and cache better.

I feel like now is perfect time for a pretentious graphic of Apple hardware on a rustic wooden table with espresso and a designer notebook with wireframes in it.

pretentious-ville
Not pictured: expensive canvas shoulder bag

OK then. Moving on.

Keyboard Coverage

The keyboard (assuming you are using a device with an on-screen keyboard) comes up over top of the preview, so you can still see the editor as you type.

keyboard

Preview Resizing

The preview is still shown below and updated in real time as you update the code. By default we shrink the preview down to 50% of its normal size. Obviously screen space is a big issue here, and viewing things in 100% is often too big.

preview-resizing
Tapping the buttons on the bottom changes the preview size.

Editor Settings

You still have access to all the editor settings you did before. When you tap onto a tab (HTML, CSS, or JS) the gear icon will appear on the right. Tap that to open the settings.

editor-settings

Landscape Full Page

Turning the mobile device sideways (landscape) gives you a full page preview.

landscape

Actions

Because of the space available, we weren't able to put every single button from the desktop editor on screen at all times on the mobile editor. Many of those buttons are now tucked away into a new pop-out area you can see by tapping Actions in the header.

actions
Forking, hearting, opening the info panel and such (when relevant) are available in the Actions area.

The Save button, however, is available at all times when you are on a Pen you own.

save-button

Beta

Let's call this Beta. Chances are, you folks will have plenty of thoughts on how it could be better. And we're all ears. So this will certainly evolve over time. We already have a list of our own as well, including improving (hopefully) the ability to scroll the preview in the editor (you can on desktop, just not mobile) and adjust the height of the editors via drag.

You might notice some of the features are missing. If you are PRO, you'll notice there is no way to open your Assets window. That was something that just didn't make the cut this round, and we didn't want to delay just for that. Also if you are PRO, the mobile editor will not live-update Live View as the regular editor does.

Some Tablet Improvements

The determination, at the moment, to get the mobile editor is a device screen width of 600px or less. The iPad, and most other tablets, are above that. So you'll get the regular desktop editor. It looks and works pretty decent though:

tablet-normal-editor

While working on the mobile editor, we made some tweaks here to hopefully make it work better. For instance, zooming is disabled. Normally a bad thing on mobile, but in this case, it prevents tablets from zooming in awkwardly when you tap the editor sometimes. The editor is essentially a full-screen app, so zooming isn't super necessary.

Here, here

Let us know what you think, anyway you would like. Comment below, hit us up on Twitter, or send us an email.