Custom JSBin Code Editor Settings

You may already know about the JSBin tool created by Remy Sharp (@rem). It was the first website of it’s kind that I’m aware of that lets you quickly prototype and play around with web concepts in a way that is social and fun. Although it has been around for a while Remy has been adding more and more features to it recently.

One of the ones that I want to point out is the ability to modify the settings of it’s internal code editor in order to look and behave something like the following screenshot…

CodeKit Configuration Settings

JSBin internally uses the CodeMirror library for it’s HTML, JavaScript, and CSS code editors. JSBin exposes the Configuration Settings of CodeMirror and allows you to set them yourself. The settings are stored in localStorage so they are available the next time you use JSBin. CodeMirror supports a whole suite of settings, but the following are the ones that I am most interested in:

Making Changes to Your Editor Settings

You can set the above options manually in your browser’s console like the following snippet of code…

Sharing Your Editor Settings With Others

If you want to share with others your settings for a specific JSBin you can add an api URL parameter pointing to a configuration file.

The following URL will load JSBin with a custom set of code editor options.

The file I am using looks like the following…

Remy has been making videos about various features of JSBin on his Tips and Bits blog. You can view the video about the above feature here…

If you enjoyed this post, please consider sharing it with others via the following Twitter or Reddit buttons. I also have a YouTube Channel with free web development videos that you are welcome to watch and/or subscribe. As always, you can reach out to me on Twitter at @elijahmanor. Thanks and have a blessed day!