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.

Tiny little improvement to the editor went out today: bracket matching. While visually it’s pretty tiny, it can actually be tremendously useful when looking at, editing, and trying to understand code.

Here’s an animated GIF that shows how the matching brackets get a light border beneath them when the cursor is next to the bracket.


Fact dump!

  • That animated GIF was created with LICEcap which is great for that.
  • The bracket matching underline should work with any syntax highlighting theme.
  • CodeMirror makes this possible, thanks team!
  • We have lots of ideas to make the editor better, but always love to hear your ideas as well.