Introduction

RunJS is a JavaScript and TypeScript playground for desktop operating systems. 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.16.0
• Chromium: 106
• V8: 10.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. Continue with the RunJS installation instructions.

Updating RunJS

For macOS and Windows, 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 app 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 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 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.

Scrolling - This controls the scrolling behaviour. There are three options to choose from, Standard, Synchronous and Automatic. When the Synchronous option is selected, the editor and output panes will be scrolled together. When the Automatic option is selected, the output pane will automatically scroll down as the output results are displayed.

Confirm close - When closing a tab, a confirmation dialog will appear. The tab will only be closed upon confirmation.

Autocomplete - Code suggestions will be displayed while typing.

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

Hover info - Hover over a symbol to quickly see its type information and relevant documentation.

Signatures - As you write a function call, information about the function signature will be displayed in a tooltip.

Build

The Build tab provides options for the bundling and tranpilation of your code.

Bundling - This option is provided primarily to support ES module imports. If you don't need to import ES modules, then it is recommended to keep this option disabled, as bundling may negatively affect performance.

Transpilation - RunJS uses Babel to transpile your code. 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 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. Formatting can be triggered via the Action menu: Action > Format Code. Formatting can also be triggered automatically when Auto-format is enabled. Triggering each time your code is run manually.

For more information about the formatting options available here, please see the Prettier documentation

Appearance

From the Appearance tab, you can control various visual aspects of RunJS. The following options are available:

Theme - A selection of themes are available that have been inspired by popular colour palettes and themes from other editors. Here is a list along with their relevant credit:

• Ayu - Konstantin Pschera
• Bespin - Jan T. Sott
• Blackboard - TextMate
• Dracula - Zeno Rocha
• DuoTone Dark - Simurai
• Erlang Dark - Jan T. Sott
• Lesser Dark - Peter Kroon
• Lucario - Raphael Amorim
• Material - Mattia Astorino
• Monokai - Wimer Hazenberg
• Neo - Jan T. Sott
• One Dark - Atom
• Shades of Purple - Ahmad Awais
• SynthWave '84 - Robb Owen
• Tomorrow Night Bright - Chris Kempson
• Visual Studio - Miguel Castillo

Font - A number of popular fonts that work well with code are available. 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.

Font Size - The size of the font in pixels.

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

Invisibles - Space characters will appear visible.

Active Line - The line that the cursor is currently on will appear highlighted.

Tab Bar - The tab bar will remain visible even if only one tab is present.

Advanced

The Advanced tab provides a set of options that can change the behaviour of RunJS in intricate ways. The following options are available:

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

Show undefined - In JavaScript, any statement that doesn't return a value or is not itself a literal value will result in an undefined value. As many statements are likely to result in an undefined value, 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 iterations of a loop reach 2000. The aim of this is to guard against unintentionally running an infinite loop.

Tools

NPM Packages

The NPM Packages window can be opened from the Tools menu:
Tools > 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.

Snippets

The Snippets window can be opened from the Tools menu:
Tools > Snippets

To create a snippet, click on the plus icon in the bottom left corner of the window. This will create a blank snippet ready for you to populate the name, description and body of the snippet.

Snippets can also be created from the editor's context menu. Selected code will be used as the body of the snippet. If there is no selection, then the whole of the code present in the editor will form the snippet body.

Snippets can be inserted into the editor via the options menu in the bottom left corner of the snippet window. Choosing the Insert Snippet option will insert the snippet into the editor pane of the current tab. Choosing the Insert Snippet in New Tab option will open a new tab and insert the snippet into the editor pane on the new tab.

Snippets can also be inserted via autocomplete. Snippets are matched for autocomplete suggestions based on their name.

Environment Variables

The Environment Variables window can be opened from the Tools menu:
Tools > 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