Running JavaScript Demos in Sublime Text with Node

If you’re coding JavaScript in Sublime Text and have Node.js installed, you can set up a simple “build system” to run that code in Node and return its output without having to leave Sublime Text. Here’s how you do it on macOS:

Step 1: Create some simple JS in Sublime Text and save it. In this example, my file is demo.js, but yours can be anything:

Step 2: Choose Tools > Build System > New Build System…

Step 3: A new document will appear in Sublime Text titled untitled.sublime-build:

Step 4: We’re going to replace the text between the curly braces. But, first, you need to confirm that Node is installed and have the path to it handy. To do that, fire up the Terminal and type “which node” (w/o the quotes). If Node is installed, the answer will be a path. In the default install on most systems, that path will be “/usr/local/bin/node”. However, if you installed Node via Homebrew, it will be something else, probably “/opt/homebrew/bin/node”.

Step 5: Back to Sublime Text. Replace the text inside the curly braces with the following, substituting the correct path to Node:

Using “*.js” here means this will work on any file so long as its name ends in “.js”.

Step 6: Save the file. It lives deep in your file system (in ~Library/Application Support/ Sublime Text/Packages/User/), but Sublime Text will take you to the proper folder. You just have to supply the proper name, which is “JavaScript”. The verbose file extension, “*.sublime-build” will already be there:

Step 7: Close the sublime-build file.

Step 8: Select your new build system (for your demo.js file) by choosing Tools > Build System > JavaScript:

Step 9: Now you can run your JS file by pressing command+b. The output will appear in a pane beneath your code:

Each press of command+b will run your code again.

There you have it. As with everything else in Sublime Text, the setup is a bit convoluted, but the functionality is great.