Everybody loves pretty code, and in fact CodePen has had the “tidy” functionality since the beginning. In the Pen editor, it’s in the dropdown within your HTML/CSS/JS panels. And in the Project Editor, it’s in the main bar, at the top of your file editor.

So, why are we here?

Well, we’ve just changed the “beautifier” for JavaScript to “prettier” which has a fresh and new feel with a lot of improvements.

Prettier is a little opinionated (in a good way we think!), meaning that it will style your JavaScript consistently, no matter what inconsistencies the code has. It also correctly formats JSX, which is something we’ve been missing for a while!

You know what, this video explains it better than I ever will!

This library was brought to our attention by a few people on Twitter, so as ever, let us know if there’s something you feel missing from CodePen, and we will at the least, give it a little look.