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.

During the recent all-team meetup we got to into a discussion how we can improve the CodePen Post editing experience. You write in Markdown in the Post Editor, but at the moment, we weren’t providing much help for that other than some placeholder text as a light reminder of how Markdown works.

As we saw it, there were three major problems:

  1. No spellcheck =(
  2. No toolbar to help with Markdown formatting
  3. Preview was weird and complicated and heavy handed

So we solved for all three! Let’s do them in reverse order.

Markdown Preview

Often when I’m writing in Markdown I (quickly) want to see what the compiled output looks like, especially when dealing with lists and code blocks. You now have the option of writing in split-pane mode or switching between editing and preview mode.

Markdown Toolbar

All these buttons do is insert the correct Markdown formatting for the thing they represent: Bold, Italic, Headers, etc. They are fairly smart though. If you select text and press the button, it will attempt to format what you’ve selected into that style (e.g. multi-line lists and such).


Believe me, it is pretty embarrassing to write a post on physics only to discover you’ve spelt acceleration wrong in several locations. We’ve added some custom highlighting for misspelled words so you’re less likely to be caught out. The highlighting can be toggled on and off so it can stay out of your way until you need it.

Shout out to Next Step Webs

For their Markdown editor and CodeMirror Add On that helped us achieve this.