Louis Lazaris has made a ton of Pens, often in support of one of his newsletters Web Tools Weekly. And yet, like a lot of folks, has never really dug into the Editor Settings of CodePen. Here’s a recent newsletter where he finds those settings and digs into them.

I haven’t really messed around too much with CodePen’s settings other than laying out the editor to display the code panels on the left.

Maybe you also use CodePen a lot. If you do, it’s good to know there’s a specific page where you can modify editor-specific settings to suit your own needs and maybe be more in line with what’s in your primary IDE.

Check out the page for yourself and toggle the “Sticky Preview” to “On” to view any changes in real-time.

For now, this Editor Settings area is the one place you can change your editor font and syntax highlighting theme (we have lots of both of them), and do things like set up your preferred defaults.

You know what I think the most important one is?

Format on Save

Having Prettier format your code on each save is a very satisfying experience and I have a hard time coding without it now.