The most widely requested editor feature is here! Since day one CodePen has been an 2-spaces indentation editor. Consistency and making the best of use space was the idea (not to mention just personal preference). But now those days are over, you can choose if you want to indent code with tabs or spaces, as well as how wide that indentation is!

You control it with a setting on the Pen itself, in the Pen Settings area:

It’s a user setting, too

Under your editor settings, you can set your defaults. This will be the settings you’ll start with when you start a new Pen.

Pen Settings override user preferences

The settings on any particular Pen are what control the indentation behavior. We did this on purpose. If you open someone else’s Pen, as you work with it, it will use the same style as they created it with (ala .editorconfig). That’s nice for consistency. We didn’t want a big mess of mixed-whitespace Pens out there, especially since there is a whole world of Pens created before this was an option. But also because some languages are white-space specific and that would literally cause errors.

It doesn’t change actual code when you change the setting

Maybe in a perfect world, it would. But this is tricky territory we chose not to dig into just yet. If you want to convert a Pen to a different indentation level, you’ll have to do that yourself by un and re-indenting code as needed.

There is a “Cody Tidy” option that works somewhat well though. You have to be on the normal key bindings (editor setting), then select code you want to clean up (fix indenting) on and press Shift + Tab and that should do it.

Or if you have Sublime Text, here’s a way to switch between them.