Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
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:
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.
OK then. Moving on.
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.
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.
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.
Landscape Full Page
Turning the mobile device sideways (landscape) gives you a full page preview.
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.
The Save button, however, is available at all times when you are on a Pen you own.
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:
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.