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.
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.
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.
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
Preprocessor Add-ons More Like Real Life
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
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!