JSLab
Download for Mac

Your first tab

Run code as you type, read each result in the output panel, and open, save and manage tabs.

JSLab is a scratchpad: open a tab, type JavaScript or TypeScript, and see the result in the output panel, tagged with the line that produced it.

Run your code

Type code in a tab and it runs as you stop typing, with each value shown beside the line that made it.

// Your first tab: change anything and watch.
const name = "JSLab";
`Hello, ${name}`;

const squares = [1, 2, 3, 4].map((n) => n * n);
squares;
squares.reduce((a, b) => a + b);
  • Type. JSLab runs your code a moment after you stop typing. This is Auto Run. Turn it off in Settings → General, or with ⌥⌘A.
  • Run on demand. ⌘R runs the tab immediately, whether or not Auto Run is on.
  • Read the output. Every top-level expression is logged for you (Auto Log), so you don’t need console.log. Results, logs and errors appear in the output panel, each tagged with its line. Click a row’s line number to jump the editor to that line.
  • Stop it. ⇧⌘R stops a run, and ⌥⌘R kills it outright.

Try it with a few lines:

const prices = [4, 8, 15];
const total = prices.reduce((sum, n) => sum + n, 0);
total * 1.2; //?

Each run happens in its own process, so a crash or an infinite loop never takes the app down. If your code stops responding, JSLab offers to kill the tab rather than freezing the editor. See The editor and live output for Auto Log, magic comments and logpoints.

Tabs

Open, close, reopen, rename, reorder and cycle through tabs, each with its own code and runtime.

To Do this
Open a blank tab ⌘T
Pick what a new tab is for Click + in the tab bar
Close the current tab ⌘W
Reopen the tab you closed ⇧⌘T
Close every other tab ⌥⌘T
Go to the next or previous tab ⌥⌘→ or ⌃⇥, and ⌥⌘← or ⌃⇧⇥
Jump to a tab ⌘1 to ⌘8 by position, ⌘9 for the last tab

Drag a tab to reorder it. Closing the last tab opens a fresh one instead of quitting. Right-click a tab for Rename…, Close, Close Others, Close to the Right, and, for a saved file, Copy Path and Reveal in Finder.

A scratch tab is titled from its first line of code. A saved tab uses its file’s name. Rename… sets your own title; leave it empty to go back to the first line.

The New Tab dialog

The + button asks what the tab is for: Plain JavaScript, Plain TypeScript, React, Vue, Solid or Angular. Your answer sets the tab’s language, runtime and framework, and installs the packages it needs. For the four framework choices you can also turn on Use Tailwind. The tab opens with starter code, so it shows something on its first run. See The Web View.

Open and save files

  • Open… (⌘O), Save (⌘S) and Save As… (⇧⌘S) work with .js, .jsx, .ts, .tsx, .mjs, .cjs, .mts, .cts, .json and .txt files.
  • You can also drop files onto the window. Each one opens in a new tab.
  • JSLab asks before it opens or pastes more than 5 MB, and it can’t open a file larger than 50 MB.
  • Closing a tab with unsaved changes asks whether to save them. Turn on Confirm Close in Settings → General to be asked before closing any tab.

Session restore

When you quit and relaunch, JSLab brings back your tabs and their code, each tab’s layout, folds, cursor and scroll position, and the window’s size and display.

Where to go next

Last updated