The editors here on CodePen use the open source library CodeMirror. CodeMirror has a bunch of settings that control its behavior. You know how when you type an open curly bracket in the CSS editor, it automatically inserts a matching closing bracket? That's an add-on and setting we have installed and turned on. We like it, most people like it, but if you don't, you can turn it off. We don't offer UI controls for this as part of your Settings. Maybe someday we will, but for now, you'll need to get a little deepnerdy to adjust things.

I need to be super clear before we get started here: we can't 100% promise this will work forever. CodeMirror might change, we might change architecture, browsers might change, etc.

Let's say you want to want to turn off that curly bracket matching feature. CodeMirror has an API for that. We don't expose a generic codemirror object though for you to change, it's part of our global CodePen namespace. Each of the three CodeMirror editors are available at:

CP.htmlEditor.editor
CP.cssEditor.edtior
CP.jsEditor.editor

From there, you can use the API. Turning off the curly brace matching would look like:

CP.jsEditor.editor.setOption("autoCloseBrackets", false);

Which would do that specifically for the JavaScript editor.

There are lots of options, so have at it.

Changing these settings will only persist through a single page load though. We don't help persist them in any way. If you're using Google Chrome, here's three things you could use to auto-run those JavaScript commands every time you visit the page, so it's kinda like a permanent setting.

  • dotjs: "dotjs is a Google Chrome extension that executes JavaScript files in ~/.js based on their filename. If you navigate to http://www.google.com/, dotjs will execute ~/.js/google.com.js."

  • Tampermonkey: "Tampermonkey is the most popular userscript manager."

  • Control Freak: "make JavaScript tweaks to just the current web page. Or the entire domain, or every page."