Introduction

RunJS is a JavaScript and TypeScript playground / scratchpad for your desktop. It runs code as it's written and displays formatted results in the output panel on the right.

RunJS requires zero configuration to use but is highly configurable in its available options. The options, along with the various capabilities of RunJS, are detailed throughout this documentation.

Installation

RunJS is available on macOS, Windows, and Linux operating systems.

macOS

1. Download RunJS for macOS.
2. Open the browser's download list and locate the downloaded file.
3. Double click the RunJS .dmg file. This will open a small window.
4. Drag and drop the RunJS icon to the Applications folder in the window.
5. To launch the RunJS app, open the Applications folder and double-click the RunJS icon.

Windows

1. Download RunJS for Windows.
2. Open the browser's download list and locate the downloaded file.
3. Double click the RunJS .exe file. This will run the installer.
4. After running the installer, Windows might display the following message: "Windows protected your PC. Windows SmartScreen prevented an unrecognized app from starting. Running this app might put your PC at risk." This is due to RunJS not currently having a signing certificate for Windows.
5. Click on "More info" to reveal other options.
6. Click on the "Run anyway" button.
7. Continue with the RunJS installation instructions.

Updating RunJS

For macOS and Windows users, updates are automatic and run in the background. Linux users will be notified of newer RunJS versions as they are released but they will need to be manually installed, either by downloading the latest release from this website or via a system package manager.

When an update becomes available, you will be notified by a notification via your OS. An update icon will also appear on the right side of the RunJS user interface. Clicking it will relaunch the app with the new version.

User Interface

RunJS is split into two panes, the pane on the left is the editor pane where you can write JavaScript and TypeScript, the pane on the right is the output pane which will show you the results of your code.

The width of these panes can be manipulated by clicking and dragging on the central divider.

You can also toggle the visibility of the output pane via the view menu: View > Toggle Output.

Settings

There are many options in RunJS that can be modified via the settings window. This can be accessed through the menu:

On macOS - RunJS > Preferences

On Windows/Linux - File > Settings

The settings are split across a number of tabs, starting with the general settings.

From the general settings tab, you can control a variety of options that change the behaviour of RunJS. These are hopefully self-explanatory from their labels.

Transpilation

RunJS uses Babel to transpile your code. It's enabled by default but can be toggled from this tab. Also provided here are optional Babel plugins that enable various TC39 proposals. These proposals range from stages 1 to 4 with the more mature proposal plugins being enabled by default.

More information can be found out about these proposal plugins via the following links:

• plugin-proposal-class-properties
• plugin-proposal-do-expressions
• plugin-proposal-numeric-separator
• plugin-proposal-logical-assignment-operators
• plugin-proposal-private-methods
• plugin-proposal-function-sent
• plugin-proposal-pipeline-operator
• plugin-proposal-partial-application
• plugin-proposal-throw-expressions
• plugin-proposal-decorators

Formatting

RunJS provides the ability to format your code via Prettier. Enabling the first option here will mean that your code is automatically formatted on every execution.

Prettier has many formatting options available, these can be configured via the formatting rules field, in the form of a valid JSON object.

Appearance

From the appearance tab, you can change the font-family, font-size, and theme. RunJS includes a number of popular fonts that work well with code, these are:

• DejaVu Sans Mono (default)
• Ubuntu Mono
• Fira Code
• Droid Sans Mono
• Hack
• Fantasque Sans Mono

You'll also find your system fonts available here, however, fonts that you have installed on your system are not currently available.

A large selection of themes are also available that have been inspired by popular colour palettes and themes from other editors, here is a list along with their relevant credit:

• Bespin - Jan T. Sott
• Blackboard - TextMate
• Dracula - Zeno Rocha
• DuoTone Dark - Simurai
• DuoTone Light - Simurai
• Erlang Dark - Jan T. Sott
• Gruvbox Dark - Pavel Pertsev
• Hopscotch - Jan T. Sott
• Isotope - Jan T. Sott
• Lesser Dark - Peter Kroon
• Lucario - Raphael Amorim
• Material - Mattia Astorino
• Monokai - Wimer Hazenberg
• Neo - Jan T. Sott
• Paraiso Dark - Jan T. Sott
• Railscasts - Ryan Bates
• Tomorrow Night Bright - Chris Kempson
• Tomorrow Night Eighties - Chris Kempson
• Visual Studio - Miguel Castillo

Advanced

The advanced tab provides access to a set of options that can change the behaviour of RunJS in intricate ways. These options are described as follows:

Runtime values - With this option enabled, RunJS will display the returned value of each top-level statement within your code.

Show undefined - In JavaScript, any statement that doesn't return a value or is not itself a literal value will return a value of undefined. As many statements are likely to return undefined, it is recommended to keep this option disabled to reduce the amount of noise this would create in the output pane.

Loop protection - With this option enabled, execution will be halted when the output pane has received over 50,000 values for a single run. The aim of this is to guard against unintentionally running an infinite loop.

Tools

Managing NPM Packages

Coming soon