Underneath the hood, CodePen uses the CodeMirror editor. CodeMirror has just released v4, and we spent some time upgrading to it. Some of the upgrades help us as developers, but there are some pretty sweet upgrades for you! We’ve also made some upgrades of our own.
Multiple Cursors and Multiple Selections
Use the Command key and click (or click and drag to select stuff) and you’ll be able to use multiple cursors. Best to just see this:
Sublime Text Key Bindings
CodeMirror has it’s own set of key commands for doing Stuff™ in the editor (e.g. moving the cursor around, selecting things, etc). By popular demand, we added the ability for you to use Vim key bindings instead. And now CodeMirror 4 has introduced Sublime Text key bindings for those of you more comfortable with those.
You can change that up in your settings:
We’ll have to make some docs for what the keys actually do, but if you’re interested to start playing right now, check out the bindings object here to see what’s up.
Other CodeMirror 4 Stuff
They have a full list here. Little bits like being able to Undo when you make a selection is nice (Command-U).
Rethought Expanding and Collapsing Editors
The very first time we added the ability to expand an editor, all you could do was expand it to the full width of the screen. So there was only really one icon needed for that.
Then later we upgraded it so that you could have open just 2 editors if you wanted to. At the time we went with a “checkbox” icon, which was checked if the editor was “on” (either expanded or just open) or unchecked if the editor was collapsed. This worked, but we heard from plenty of confused people. That first click on the checkbox would collapse the editor, and that felt weird. We added double-clicking to the checkbox to expand, but that was nearly undiscoverable.
So two icons it is!
Hopefully, those are very clear as to what they do.
You’ll also notice that the URL changes when you use them, saving the state of how you last had them set up. That way if you share the Pen, or refresh the browser window, it will stay in that state for you.
That means “HTML On, CSS Off, JS On”.
There are various other small UI tweaks as well. Enjoy!