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.

CodePen has supported JSX syntax for a while now, through using Babel as the JavaScript preprocessor. Butttt, the syntax highlighting was a little janky. An opening HTML tag would be a totally different color than a closing tag, for example. Because the normal JavaScript syntax highlighting didn’t really know what to do with that.

Thankfully, the latest release of CodeMirror shipped with a JSX mode, so we hopped right on that.

Syntax now looks correct in the Editor:

As well as in embeds:

Remember: you don’t have to use JSX while using Babel, you just can if you want.