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.

Howdy! We just released the next generation of how we do settings in the code editor here on CodePen. If you prefer, here's a quick video showing it all off:

Everything Under One Roof

Settings used to be rather spread out. Each language had it's own setting panel. There was another area for overall Pen Settings. And yet another area for naming and describing your Pen. It was feeling a bit messy. So we put all those things together in a single Settings area.

More Help

Settings are now grouped and labeled more clearly. Before this change, some settings were rather randomly floating in the nothing without context. Totally confusing, especially for new users.

Now groups are properly labeled and offer help popouts with even more information and relevant links.

Better Typeahead

We rewrote much of how the typeahead feature works for external resources. Exact matches for library names now rank first, so it's easier to find what you are most likely looking for.

Locked in JavaScript Libraries

There is still a dropdown menu for choosing JavaScript Libraries, but we call it **Quick Add* now. It just injects the URL to an external resource of that library.

So now, say you are using jQuery, the version you author in will be the version that Pen uses forever (until you change it). Just less chance of anything breaking from us upgrading libraries like that.

Remember other Pens can be external resources! And there is no limit to how many you add (other than, you know, practicality).

Rearranging and Removing External Resources

This used to be a pain in the butt before. Now rather than awkwardly deleting and copy and pasting, you can just drag and drop the order in which JavaScript resources load. And one-click to remove.

Preprocessor Add-ons More Like Real Life

Preprocessor add-ons used to be like JavaScript libraries before. Dropdown menus. That made them mutually exclusive, which is kind of a bummer. You don't face that limitation in your own projects.

Now, you include add-ons with @import statements like you normally do. Which means it matches your real-life code and you can use as many as you like!

A Better Future

A lot of these changes are both good for you, and frankly, good for us too. It simplifies some of our code. Like when exporting a Pen, we have less logic to go through to make sure what you export works (e.g. adding the @imports).

It means adding new preprocessors will be much easier. It means adding new add-ons will be much easier. It means adjusting what we offer in the dropdowns will be much easier. It means less worry about Pens breaking when libraries change. Pretty sweet!