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.

Your code is executed with the following versions of Node, V8 and Chromium:

• Node: 16.9.1
• Chromium: 96
• V8: 9.6

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. The layout of the panes can be switched between vertical (default) and horizontal, via the view menu:
View > Layout > Horizontal/Vertical

Settings

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

RunJS > Preferences

On Windows/Linux - File > Preferences

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.

Auto-Run - Your code will execute as you type it. If this option is disabled, a button labelled Run will be visible in the editor pane, your code will then be executed when the button is clicked.

Line Numbers - Each line in the editor and output panes will be numbered .

Line Wrap - Lines that are longer than the width of the pane will be wrapped.

Vim Keys - Use Vim key bindings for editing and traversing your code.

Close Brackets - Closing brackets will be automatically inserted when an opening bracket is typed.

Match Lines - The results of your code will be displayed on the same line within the output pane as the corresponding source line.

Auto-Scroll - The output pane will automatically scroll down as more results are displayed.

Autocomplete - Code suggestions will be displayed while typing.

Type Checking - TypeScript diagnostics will be available in a tooltip.

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-do-expressions
• plugin-proposal-async-do-expressions
• 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
• One Dark - Atom
• Paraiso Dark - Jan T. Sott
• Railscasts - Ryan Bates
• Shades of Purple - Ahmad Awais
• SynthWave '84 - Robb Owen
• 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

Manage NPM Packages

The Manage NPM Packages window can be opened from the Tools menu:
Tools > Manage NPM Packages

From here, it's possible to search, add, and remove NPM packages. To search for a package, type a package name in the search box. The search results will be populated when you stop typing. If you want a specific version of a package, add a valid version number to the end of the package name, like this: pad-left@1.2.3

To add a package from the search results, click on the button labelled Add. This will then trigger the package installation, when complete, the search results will be cleared. The package is now available for import in your code.

Manage Environment Variables

The Manage Environment Variables window can be opened from the Tools menu:
Tools > Manage Environment Variables

To add an environment variable, enter a key and value into the matching fields of the first row then click Add. Environment variables can be edited directly within their fields. Click the button labelled Save when done.

Environment variables can be accessed with your code from the process object:
process.env.{key name}

Shortcuts