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.

We have a bit of a UI update for you! We've added this dropdown to each of the editors, which brings together many of the actions you can perform on an editor and the code it contains. A GIF can do a good job of explaining:

The Tidy and View Compiled functionality used to be buttons right in the header. No big surprises there.

The big one joining the party is Analyze. We've had this feature for a long time, but it was (super awkwardly) buried within Settings. Now it's right there in the editor where it belongs. Even better, HTML Analyze is back! It was gone for, gosh, over a year I'd say, due to a security issue. It's powered by HTML Inspector. CSS Analyze is powered by CSS Lint and JS by JS Hint. All of them are pretty opinionated and we don't offer configuration at this time. Maybe someday. Feel free to ignore their advice! Clearing errors is also just a click away. Also of note: if you use a preprocessor, the analyze will run on the compiled code, not your authored code.

Maximize and Minimize options round out the options. Minimize used to be an ✖️ button, but maximize was another rather hidden feature (you had to double click the header bar, which you still can).