Using Gomix to share a JavaScript example with npm dependencies

Websites like JSBin and CodePen allow folks to share examples of front-end code.

Chill the Lion, the Most Hearted Codepen of 2015

You can see the source code right next to the running page, and make edits that show up as you go. Super useful.

These websites let you load bundled libraries, like jQuery or React. However, many libraries expect users to install the library via npm, and don’t distribute bundled versions of themselves. That means they’re incompatible with these online editors.

So what do you do if you want to share JavaScript code that has npm dependencies?

Gomix is an online code editor from Fog Creek Software that came out today. It is totally rad and solves this problem.

For example, I created of a ProseMirror editor in the browser. You can see the code here. If you wanted to use this boilerplate, you can fork it (“remix” in Gomix’s vocab) to create a copy in your account and go wild.

In Gomix, you edit in one window while your example displays in another.

I also made a basic Webpack setup, which is a starting point for any JS code you want to share that has npm dependencies, or if you want to use JavaScript modules in your example code.

This is made possible by the fact that Gomix is basically a nice text editor for a Node.js server that will install npm dependencies for you. I’m using Webpack and Webpack Dev Server to bundle JavaScript modules and serve them out.

Have fun!