DEV Community: JSLab

Multi-cursor moves that replace a regex

JSLab — Thu, 12 Nov 2026 02:02:29 +0000

You paste ten lines from a spreadsheet and need them as a JavaScript array. You could write a regex. Or you could edit all ten lines at once, which is faster and you can see it working.

Every Monaco-based editor (VS Code included) has these. The shortcuts below are JSLab's; your editor's may differ, and its command palette will tell you.

Move 1: a pasted column into an array

You paste this:

Ada Lovelace
Alan Turing
Grace Hopper
Katherine Johnson

Select all four lines.
Split Selection into Lines (⇧⌘L): now there's a cursor at the end of each line.
Press Home: every cursor jumps to the start of its line. Type ".
Press End: type ",.

"Ada Lovelace",
"Alan Turing",
"Grace Hopper",
"Katherine Johnson",

Wrap it in const names = [ … ]; and you're done. Four lines or four hundred, it's the same four steps.

Move 2: rename by selecting the next match

const items = [4, 10, 25];
const price = items.map((price) => price * 1.2);
price;

Put the caret in price and press ⌘D (Select Next Occurrence) once for each match you want. Type cost, and they all change.

Unlike find and replace, you see each match get picked, and you can stop before the one you don't want. Here, the arrow function's parameter is a different variable that happens to share the name. ⌘D lets you include it or skip it on purpose.

Move 3: column cursors

Add Cursor Below (⌃⇧↓) stacks cursors straight down, one per line. Good for adding the same thing at the same column, like a key prefix:

const env = {
  URL: "https://api.example.com",
  PORT: "8080",
  REGION: "eu",
};

Cursor before URL, ⌃⇧↓ twice, type API_, and all three keys get the prefix.

Two more worth knowing

Expand Selection (⇧⌘Space) grows the selection to the next enclosing thing: word, string, argument list, block. Faster than dragging.
Duplicate Line (⇧⌘D) and Move Line Up / Down (⌃⌘↑ / ⌃⌘↓) rearrange code without cut and paste.

If you think in Vim

JSLab, a JavaScript & TypeScript scratchpad for macOS, has Vim Keys in Settings → Editor, and ⌘R still runs your code in every mode, so you never have to leave Normal mode to see a result.

In a scratchpad, multi-cursor matters more than in a project: you're constantly reshaping pasted data into something you can run. With Auto Run on, the result updates as soon as you stop typing, so you see the array form as you edit.

Every one of these is a JSLab command, so you can rebind it in Settings → Keybindings or find it by name with ⇧⌘P.

JSLab launches Nov 15. Editing shortcuts: https://js-lab.app/docs/reference/keyboard-shortcuts

Tabs, files and session restore

JSLab — Thu, 12 Nov 2026 00:45:55 +0000

JSLab feature notes: one docs page, explained. Today: Your first tab.

A scratchpad lives or dies on one question: is my stuff still there tomorrow? In JSLab, a JavaScript & TypeScript scratchpad for macOS, the answer is yes, and this note covers how.

Session restore

Quit JSLab and relaunch, and it brings back:

your tabs and their code;
each tab's layout, folds, cursor and scroll position;
the window's size and the display it was on.

Also kept per tab: its working directory and whether its Web View is showing. Each tab's AI Chat conversation comes back too.

The session lives in session.json in JSLab's data folder. If that file can't be read, JSLab restores it from its backup when it can and tells you. A tab whose contents can't be read opens empty and read-only, so JSLab never saves over the file on disk.

Updates use the same mechanism: restarting to update relaunches JSLab with your tabs as they were.

Tabs

To	Do this
Open a blank tab	⌘T
Pick what a new tab is for	+ in the tab bar
Close the tab	⌘W
Reopen the tab you closed	⇧⌘T
Close every other tab	⌥⌘T
Jump to a tab	⌘1 to ⌘8, ⌘9 for the last

Drag to reorder. Closing the last tab opens a fresh one instead of quitting. A scratch tab is titled from its first line of code; Rename… sets your own title.

The + button asks what the tab is for: Plain JavaScript, Plain TypeScript, React, Vue, Solid or Angular. That sets the language, runtime and framework, installs what's needed and opens starter code.

Files

Open… (⌘O), Save (⌘S) and Save As… (⇧⌘S) work with .js, .jsx, .ts, .tsx, .mjs, .cjs, .mts, .cts, .json and .txt. Drop files on the window and each opens in a new tab. From a terminal, jslab file.ts does the same.

A few guard rails:

JSLab asks before it opens or pastes more than 5 MB, and won't open a file over 50 MB.
Closing a tab with unsaved changes asks whether to save. Confirm Close (Settings → General) asks before closing any tab.
A saved tab's right-click menu has Copy Path and Reveal in Finder.

JSLab launches Nov 15. The full page: https://js-lab.app/docs/first-tab

Prettier on demand, on run, on save

JSLab — Wed, 11 Nov 2026 00:47:33 +0000

JSLab feature notes: one docs page, explained. Today: Formatting.

Scratch code is written fast and formatted never. JSLab, a JavaScript & TypeScript scratchpad for macOS, formats with Prettier, so the mess you typed at speed can look like code before you paste it anywhere.

On demand

⌥⇧F (Format Code) formats the current tab. It's also in Actions → Format Code and the command palette.

const order={id:42,items:[{sku:"A-1",qty:2},{sku:"B-7",qty:1}],paid:true}
const total=order.items.reduce((sum,item)=>sum+item.qty,0)
total

One ⌥⇧F later:

const order = {
  id: 42,
  items: [
    { sku: "A-1", qty: 2 },
    { sku: "B-7", qty: 1 },
  ],
  paid: true,
};
const total = order.items.reduce((sum, item) => sum + item.qty, 0);
total;

The format lands as one undo step, and JSLab applies minimal edits instead of replacing the whole buffer, so your folds, scroll position and cursor stay where they were.

On run, on save

Two settings, both off by default:

Format on Run (Settings → General) formats before each run, unless you're typing.
Format on Save (Settings → Editor) formats when you save a file.

The options

Settings → Formatting holds every Prettier option JSLab supports, with Prettier's usual defaults:

Setting	Default
Print Width	80
Tab Width	2
Semicolons	On
Single Quotes	Off
Trailing Commas	All
Arrow Parens	Always

Plus Use Tabs, Quote Props, JSX Single Quotes, Bracket Spacing and Bracket Same Line. Print Width goes from 20 to 320, and Tab Width from 1 to 16.

When it can't parse

If Prettier can't parse the tab, the status bar says Couldn't format, with Prettier's message, and your code is left as it was. A format that takes too long is stopped and the formatter restarts, so a giant paste can't hang the editor.

JSLab launches Nov 15. The full page: https://js-lab.app/docs/formatting

What your TypeScript becomes when it runs

JSLab — Tue, 10 Nov 2026 16:00:54 +0000

TypeScript has a simple story: types are checked, then erased, and what runs is JavaScript. That's true for almost every line you write. The exceptions are worth knowing, because they're the lines that behave differently from how they look.

The part that disappears

interface User {
  name: string;
  age: number;
}

import type { Config } from "./config";

const users: User[] = JSON.parse(raw) as User[];
const theme = { dark: true } satisfies Record<string, boolean>;
function greet(u: User): string {
  return `Hi ${u.name}`;
}

Run it through any TypeScript compiler and you get, give or take whitespace:

const users = JSON.parse(raw);
const theme = { dark: true };
function greet(u) {
  return `Hi ${u.name}`;
}

The interface, the import type, the annotations, as and satisfies: all gone. None of it exists at runtime, which is why as User[] can't check anything.

The part that doesn't

A few TypeScript features generate JavaScript of their own.

Enums become an object, built by a small function:

enum Level { Low, High }

turns into roughly:

var Level;
(function (Level) {
  Level[Level["Low"] = 0] = "Low";
  Level[Level["High"] = 1] = "High";
})(Level || (Level = {}));

That's why Level[0] is "Low": a numeric enum maps both ways. The exact shape varies by compiler; the idea doesn't.

Parameter properties become assignments:

class Point {
  constructor(public x: number, public y: number) {}
}

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

Namespaces with values become an object built by a function too, like enums.

Why this matters now

Node can run .ts files by stripping types, without a compile step. Stripping only works for syntax that can be erased. An enum or a parameter property needs code generated, so Node's default mode refuses it.

TypeScript 5.8 added a flag for exactly this: erasableSyntaxOnly reports an error on enums, parameter properties and value namespaces, so your code stays strippable. The usual replacement for an enum is a plain object:

const Level = { Low: 0, High: 1 } as const;
type Level = (typeof Level)[keyof typeof Level];

Seeing it for your own code

You learn this fastest by looking at the output. I do it in JSLab, a JavaScript & TypeScript scratchpad for macOS: Actions → Show Transpiled Output puts the JavaScript your tab actually runs in the side bar, next to your code.

It refreshes on each run, and marks itself Stale once you've edited past the run it shows.
Hide instrumentation switches between the code exactly as it runs and the code without JSLab's own additions for Auto Log, logpoints and loop protection. Turn it off once; it's a good look at how those features work.
Which syntax proposals the transform accepts, such as the pipeline operator, is set in Settings → Build. Decorators work as they are.

Types are checked in the editor and stripped when the code runs, so a type error is an underline, never a failed run.

JSLab launches Nov 15. Show Transpiled Output: https://js-lab.app/docs/editor

Prototype an API call before you write the client

JSLab — Tue, 10 Nov 2026 04:04:42 +0000

Before writing a client for an API, I want answers: what does the response actually look like, what happens without a token, what are the limits? A scratch file gets those answers faster than reading the docs twice.

Our test subject: the GitHub REST API, which works without a token (with a low rate limit) and with one.

Step 1: the token comes from the environment

Never paste a token into code, even scratch code. It ends up in a screenshot, a gist or a commit.

const token = process.env.GITHUB_TOKEN;

In Node and Bun, process.env holds the environment the process started with. undefined here is a valid state, and the code should handle it.

Step 2: a request that fails properly

const res = await fetch("https://api.github.com/repos/oven-sh/bun", {
  headers: {
    Accept: "application/vnd.github+json",
    ...(token ? { Authorization: `Bearer ${token}` } : {}),
  },
  signal: AbortSignal.timeout(5000),
});

if (!res.ok) {
  throw new Error(`GitHub ${res.status}: ${await res.text()}`);
}

Three habits in there:

Conditional header. The spread adds Authorization only when there's a token.
A timeout. fetch has none by default. AbortSignal.timeout(5000) aborts after five seconds with a TimeoutError.
res.ok is your job. fetch only rejects on network failure. A 404 or 403 resolves happily, so throw on it yourself, with the body: GitHub's error messages are good.

Step 3: type what you actually got

type Repo = {
  full_name: string;
  stargazers_count: number;
  open_issues_count: number;
  pushed_at: string;
};

const repo = (await res.json()) as Repo;
repo.full_name;
repo.stargazers_count;

Write the type from the real response, not from memory. And remember as is a promise to the compiler, not a check. For anything beyond a prototype, validate.

Step 4: read the limits

res.headers.get("x-ratelimit-limit");
res.headers.get("x-ratelimit-remaining");

Run it without a token and with one, and compare. That's the number your client's retry logic has to respect.

In a scratchpad

I do this in JSLab, a JavaScript & TypeScript scratchpad for macOS, in a Bun tab:

The token goes in Tools → Environment Variables…. Values are masked on screen, they're saved in a file only your user account can read, and every run sees them in process.env. Or point the tab at your project's folder with Set Working Directory… and JSLab loads that folder's .env.
Top-level await just works, and Auto Log shows repo.full_name, the star count and both headers beside their lines without a single console.log.
A Response and its Headers are shown in their own form when logged, so res on its own line is worth a look too.

Need to hit an API that doesn't send CORS headers, from code that also touches the DOM? The Browser & Node APIs runtime has a fetch with no CORS restriction. The plain Browser runtime keeps real CORS, so you can check what a website would see.

JSLab launches Nov 15. Environment variables: https://js-lab.app/docs/environment-variables

The jslab CLI: open files and pipe code into a tab

JSLab — Tue, 10 Nov 2026 00:45:57 +0000

JSLab feature notes: one docs page, explained. Today: The jslab CLI.

JSLab is a JavaScript & TypeScript scratchpad for macOS, which makes it a GUI app. But a lot of the code you want to try starts in a terminal: a file in a repo, the output of another command, a one-liner. jslab is a small command-line tool that gets it into a tab.

Install it

Choose Help → Install jslab Command…. JSLab links its own binary into ~/.local/bin/jslab. If that folder isn't on your PATH, the message gives you the line to add to your shell profile:

export PATH="$HOME/.local/bin:$PATH"

Once it's installed, the same menu item reads Uninstall jslab Command….

Open files

jslab notes.ts

Each file opens in a new tab. The tab's language comes from the extension, or from your settings.

Pipe code in, and run it

- reads code from stdin. --run runs it as soon as it opens:

echo 'console.log(new Date())' | jslab --run -

Without --run, the code only opens. For -, the tab's working directory defaults to your terminal's current folder, so relative paths in the piped code resolve where you are.

The options

jslab [file ...]                 Open files in new tabs
jslab -                          Read code from stdin into a new tab
jslab --run [file|-]             Open and run immediately
      --runtime bun|browser|browser-node
      --lang ts|js|tsx|jsx
      --cwd <dir>
      --title <title>
jslab --version | --help

browser-node is the Browser & Node APIs runtime. So opening a component in a browser tab, in the current folder, is:

jslab --runtime browser --cwd . app.tsx

Two I use

# Last week's version of a file, in its own tab
git show HEAD~5:src/format.ts | jslab --lang ts -

# Try a snippet you just copied from a README
pbpaste | jslab --run -

Code from stdin has no file extension, so pass --lang when it's TypeScript. pbpaste prints the macOS clipboard, so the second line runs whatever you copied. Read it before you pipe it.

How it works

If JSLab isn't running, jslab starts it and waits up to 10 seconds for it to be ready. Each call then sends one request over a local socket, jslab.sock, in JSLab's data folder.

JSLab launches Nov 15. The full page: https://js-lab.app/docs/reference/cli

Snippets (Cmd+B) and the command palette

JSLab — Mon, 09 Nov 2026 00:48:32 +0000

JSLab feature notes: one docs page, explained. Today: Snippets and the command palette.

Two features in JSLab, a JavaScript & TypeScript scratchpad for macOS, that are about not typing the same thing twice.

Snippets: a name is a trigger

⌘B (or Tools → Snippets…, or the activity bar) opens the Snippets panel in the side bar. Search by name or description, then Insert a snippet at the cursor, Insert in New Tab, Copy, Edit or Delete it.

The part I use most: a snippet's name is its trigger. Type the name in the editor, press ⇥, and it expands. Names show up in autocomplete too. Tab only expands when a snippet's name sits right before the caret; everywhere else it indents as usual.

To make one, select some code and choose Edit → Create Snippet… (it's in the right-click menu too). With nothing selected, it starts from the whole tab. Each snippet has a Name (letters, digits, _, $ and -, unique), an optional Description, a Language hint and the Body.

Placeholders

A body can carry tab stops. After inserting, ⇥ jumps between them:

function ${1:name}(${2:args}) {
  $0
}

$1, $2… are tab stops in order, ${1:name} has default text, and $0 is where the cursor ends. A body with no placeholders is inserted exactly as written, $ and all.

Import and export

Tools → Import Snippets… and Export Snippets… move your whole library as one JSON file ("format": "jslab-snippets"). Importing merges by name, ignoring case, and asks Overwrite, Keep Both or Skip on a clash. Imported snippets always get new ids, so a file can't overwrite one of yours by claiming its id.

One warning straight from the docs: an inserted snippet is live code. With Auto Run on, it runs like anything else you type, including one from someone else's library.

The command palette

⇧⌘P (View → Command Palette…) searches every command by name.

Matched letters are highlighted, and results are grouped by section.
Each result shows its shortcut, so the palette teaches you the keys as you go.
Toggle commands show whether they're on or off.
A command you can't use right now stays listed as Unavailable now, so you always know it exists.

Type a theme's name and the palette switches themes too. ↑ ↓ to move, ↵ to run, esc to close.

JSLab launches Nov 15. The full pages: https://js-lab.app/docs/snippets

Quick data munging: group, sum and bucket a CSV

JSLab — Sun, 08 Nov 2026 16:02:02 +0000

Someone sends you a CSV and a question: "totals by region? and by week?" It's not worth a notebook, a database or a project. It's worth twenty lines.

The data

const csv = `date,region,product,amount
2026-10-05,EU,Pro,120
2026-10-06,US,Basic,80
2026-10-06,EU,Basic,45.5
2026-10-12,APAC,Pro,210
2026-10-13,US,Pro,120`;

Step 1: rows (the naive way)

const [header, ...lines] = csv.trim().split("\n");
const keys = header.split(",");

const rows = lines.map((line) => {
  const cells = line.split(",");
  return Object.fromEntries(keys.map((k, i) => [k, cells[i]]));
});

Fine for this file. Hold that thought.

Step 2: totals by region with `Object.groupBy`

Object.groupBy (ES2024) does the bucketing that used to need a reduce:

const byRegion = Object.groupBy(rows, (r) => r.region);

const totals = Object.fromEntries(
  Object.entries(byRegion).map(([region, rs]) => [
    region,
    rs.reduce((sum, r) => sum + Number(r.amount), 0),
  ]),
);
// { EU: 165.5, US: 200, APAC: 210 }

Note the Number(...): everything from a CSV is a string, and "120" + "45.5" is not a sum.

Step 3: use a real parser

The naive split breaks on the first quoted field: 2026-10-07,EU,"Pro, annual",400 has four commas. Don't fix that with a regex. Use a parser:

import Papa from "papaparse";

const { data, errors } = Papa.parse(csv, {
  header: true,
  dynamicTyping: true, // "120" → 120
  skipEmptyLines: true,
});

data is the same array of objects, with quoted fields handled and amount already a number. Check errors before you trust it.

Step 4: by week, without the timezone bug

import { parseISO, startOfWeek, format } from "date-fns";

const weekOf = (date) =>
  format(startOfWeek(parseISO(date), { weekStartsOn: 1 }), "yyyy-MM-dd");

const byWeek = Object.groupBy(data, (r) => weekOf(r.date));
Object.entries(byWeek).map(([week, rs]) => ({
  week,
  total: rs.reduce((sum, r) => sum + r.amount, 0),
}));
// [{ week: "2026-10-05", total: 245.5 }, { week: "2026-10-12", total: 330 }]

Why parseISO and not new Date("2026-10-05")? A date-only string passed to Date is parsed as UTC midnight. West of Greenwich, that's still Sunday evening, and your Monday sale lands in the previous week. parseISO reads it as local midnight.

Doing it in a scratchpad

I do this kind of thing in JSLab, a JavaScript & TypeScript scratchpad for macOS:

⌘I opens the package sheet. Add papaparse and date-fns once and every tab can import them. Or just write the import: JSLab underlines it and offers to install it as a quick fix.
Auto Log shows each step's value beside its line, so I see totals without logging it.
An array of records, like data above, gets a Tree / Table switch in the output. As a table I can sort it, filter it and copy it as CSV, JSON or Markdown, which is usually what the person asking actually wanted.

For the real file, set the tab's working directory to its folder and read it:

import { readFile } from "node:fs/promises";
const csv = await readFile("./sales.csv", "utf8");

JSLab launches Nov 15. Tables and npm packages: https://js-lab.app/docs/output

Working directory and environment variables

JSLab — Sun, 08 Nov 2026 01:00:24 +0000

JSLab feature notes: one docs page, explained. Today: Working directory and Environment variables.

By default, a tab in JSLab, a JavaScript & TypeScript scratchpad for macOS, isn't tied to any folder. That's right for most snippets. It's wrong the moment you want to poke at a real project's files.

Give a tab a folder

Actions → Set Working Directory…, the working-directory button in the status bar, or Set Working Directory… in the command palette. Each tab has its own, and it's kept across relaunches.

With a working directory set, the tab runs as if it lived in that folder:

process.cwd(), __dirname and import.meta.dir are that folder.
Relative imports written as string literals resolve there.
<folder>/node_modules is searched before JSLab's own installed packages, so you get the project's versions.
A .env file in the folder is loaded into the run.

import { readFile } from "node:fs/promises";
import config from "./config.json";

config; // read from the working directory
await readFile("./README.md", "utf8");

Clear it with Actions → Clear Working Directory, or the × beside the folder's name in the status bar. If the folder is moved or deleted, the run says Working directory not found and offers Change….

Variables every tab sees

Tools → Environment Variables… (or the palette; there's no default shortcut) holds key and value pairs that every tab's run gets, on top of what your login shell exports.

Values are masked; Show reveals one.
Paste a whole .env file into the Key field and JSLab fills in the rows for you to check.
Changes apply from the next run.
They're saved in env.json in JSLab's data folder, readable only by your user account.

process.env.API_URL ?? "API_URL isn't set yet";
process.env.JSLAB; // "1" in every JSLab run

The order they apply in

For a Bun run, later layers win:

Your login shell's environment.
The Environment Variables sheet.
The working directory's .env, if the tab has one.
JSLAB=1, so your code can tell it's in JSLab.

So the sheet holds what's true everywhere, and a project's .env overrides it for the tabs pointed at that project.

Two details from the docs: JSLab reads the .env itself (up to 1 MiB) rather than leaving it to Bun, so every run gets the same result, and BUN_OPTIONS never reaches your code.

JSLab launches Nov 15. The full pages: https://js-lab.app/docs/working-directory

Canvas sketches with no build step

JSLab — Sat, 07 Nov 2026 16:03:10 +0000

Canvas is the most fun you can have with forty lines of JavaScript, and it needs nothing: no framework, no bundler, no dev server. Here's a sketch with the three details that make it look right.

The page

One HTML file. Open it in a browser.

<!doctype html>
<canvas id="c" width="320" height="200"></canvas>
<script type="module">
  // the sketch goes here
</script>

Keep the script inline. From file://, browsers block module scripts loaded with src, so a second file means running a local server.

Detail 1: sharp on Retina

A canvas is a bitmap. On a 2× display, a 320×200 canvas gets stretched and looks soft. Size the backing store in device pixels, then scale the drawing back:

const canvas = document.querySelector("#c");
const ctx = canvas.getContext("2d");

const { width, height } = canvas;
const dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
ctx.scale(dpr, dpr);

Now you draw in CSS pixels and get device-pixel sharpness.

Detail 2: move by time, not by frame

requestAnimationFrame runs at the display's refresh rate: 60, 120, sometimes less. Move things by speed × elapsed time and they move at the same speed everywhere:

const dots = Array.from({ length: 40 }, () => ({
  x: Math.random() * width,
  y: Math.random() * height,
  vx: (Math.random() - 0.5) * 120, // pixels per second
  vy: (Math.random() - 0.5) * 120,
}));

let last = performance.now();

function frame(now) {
  const dt = Math.min((now - last) / 1000, 0.05); // seconds, capped
  last = now;

  ctx.fillStyle = "rgba(15, 23, 42, 0.25)"; // fade the last frame
  ctx.fillRect(0, 0, width, height);

  ctx.fillStyle = "#f59e0b";
  for (const d of dots) {
    d.x += d.vx * dt;
    d.y += d.vy * dt;
    if (d.x < 0 || d.x > width) d.vx *= -1;
    if (d.y < 0 || d.y > height) d.vy *= -1;
    ctx.beginPath();
    ctx.arc(d.x, d.y, 3, 0, Math.PI * 2);
    ctx.fill();
  }

  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

The cap on dt matters: switch tabs for a minute, come back, and an uncapped dt teleports every dot.

Detail 3: fade, don't clear

Painting a translucent rectangle instead of calling clearRect leaves short trails. Change 0.25 to 0.05 for long ones, or 1 for none. It's the cheapest effect in canvas.

Tweaking it live

The fun part of a sketch is changing numbers. With a plain HTML file, that's edit, switch windows, reload, repeat.

In JSLab, a JavaScript & TypeScript scratchpad for macOS, I switch the tab to the Browser runtime, and it renders into a Web View tile under its output. The page starts empty, apart from a <div id="root">, so the first line makes the canvas:

document.body.innerHTML = '<canvas id="c" width="320" height="200"></canvas>';

The rest of the sketch stays exactly as above. With Auto Run, the sketch reruns a moment after I stop typing, so changing 120 to 400 is the whole loop.

One thing I didn't expect to like: every run reloads the page. In a hot-reload setup, it's easy to end up with two requestAnimationFrame loops running at once after an edit. Here, each run starts from a clean page, so there's only ever one.

canvas.onclick with an AudioContext works too, and while a tab is playing sound, a speaker icon on the tab mutes it.

JSLab launches Nov 15. The Web View docs: https://js-lab.app/docs/web-view

Stop, Kill and loop protection

JSLab — Sat, 07 Nov 2026 00:46:07 +0000

JSLab feature notes: one docs page, explained. Today: Stop, Kill and loop protection, from The editor and live output.

JSLab, a JavaScript & TypeScript scratchpad for macOS, runs your code as you type it. Code you're typing is code that's half-written, and half-written code doesn't always end. This note covers what happens then.

A run can stay active on purpose

A run doesn't end when the last line runs. It stays active while it has open timers, servers, sockets or child processes, and the status bar says so:

let ticks = 0;
const timer = setInterval(() => {
  ticks++;
  console.log(`tick ${ticks}`);
  if (ticks === 3) clearInterval(timer);
}, 500);
"started";

This one ends itself after three ticks. One that doesn't is what Stop is for.

Stop and Kill

⇧⌘R (Stop) stops a run gracefully and closes its timers, servers and the rest. If the run doesn't respond, JSLab kills it after 500 ms.
⌥⌘R (Kill) kills it immediately.

Each run is its own process (or a freshly reloaded page in a browser tab), so killing it can't hurt the editor. process.exit() flushes its output before the run ends.

When a tab stops answering

If your code stops responding altogether, JSLab shows This tab isn't responding, with Kill and Wait. By default it appears after 3 seconds. Change that with Unresponsive Timeout in Settings → Advanced, anywhere from 1,000 to 60,000 ms.

Loop protection

Most hangs in a scratchpad are a loop that never ends, so JSLab catches those before you have to:

// i never reaches 10
let i = 0;
while (i < 10) {
  i = i * 2;
}

for, while, do…while, for…in and for…of loops are stopped after too many iterations, with an error that names the loop's line.

Loop Limit (Settings → Advanced): 2,000 iterations by default, from 100 to 10,000,000.
Loop Protection in the same place turns it off, as does Toggle Loop Protection in the command palette (⇧⌘P).

Curious how it works? Actions → Show Transpiled Output shows the JavaScript your tab actually runs. Switch Hide instrumentation off and you can see the loop-protection code JSLab adds around your loops.

Safe Mode

If a tab hangs every time JSLab opens, hold Shift while you launch it. JSLab starts in Safe Mode, with Auto Run paused, so you can fix the code before it runs. JSLab also reopens in Safe Mode by itself if it didn't shut down cleanly while running code.

JSLab launches Nov 15. The full page: https://js-lab.app/docs/editor

Why a scratchpad should run your code in a separate process

JSLab — Fri, 06 Nov 2026 16:02:28 +0000

A scratchpad runs code you haven't finished writing. That's the job. Which means it runs a lot of code like this:

let i = 0;
while (i < 10) {
  console.log(i);
  // forgot i++
}

Where that code runs decides whether you lose a second or lose your editor.

Option 1: run it in the same thread

The simplest scratchpad is eval (or new Function) in the page that hosts the editor. It's fast and it's one line. It's also a trap.

JavaScript runs one thing at a time per thread. While that while loop spins, nothing else on the thread runs: not your Stop button's click handler, not the editor's rendering, not the code that would show an error. Paste it into a browser console and that tab freezes until the browser offers to kill it.

There's no try/catch for "this never returns".

Option 2: a worker

A Web Worker (or a Node worker_thread) runs on its own thread, so the UI stays responsive, and the host can stop it:

const worker = new Worker(new URL("./run.js", import.meta.url), { type: "module" });
setTimeout(() => worker.terminate(), 2000);

Better. But a worker still lives in your process. It shares the process's environment, its working directory and its fate: if something in it brings the process down, the editor goes too.

Option 3: a separate process

Give each run its own OS process and the operating system becomes the boundary. Here's a minimal runner that works in Node and in Bun:

import { execFile } from "node:child_process";

function runFile(file, ms = 2000) {
  return new Promise((resolve) => {
    execFile(process.execPath, [file], { timeout: ms }, (error, stdout, stderr) => {
      resolve({ stdout, stderr, timedOut: error?.killed ?? false });
    });
  });
}

// never-ends.js contains: while (true) {}
await runFile("./never-ends.js");
// { stdout: "", stderr: "", timedOut: true }

timeout makes Node send the child a signal when time's up. What that buys you:

Kill always works. A process can be killed from outside no matter what it's doing. No cooperation needed.
Crashes stay contained. A segfault in a native addon, an out-of-memory, a process.exit() in a library: the child dies, the host carries on.
Every run starts clean. No globals left over from the last run, no timers still firing from three edits ago.
Real process semantics. process.env, process.cwd(), stdout, exit codes and signals behave like they do in production, because it is a process.

The cost is start-up time on every run. That's why the runtime you pick matters: one that starts fast and runs TypeScript without a separate compile step keeps the loop tight.

How JSLab does it

JSLab, a JavaScript & TypeScript scratchpad for macOS, uses option 3. In a Bun tab, each run is a separate Bun process, using the Bun that ships inside the app. In a browser tab, each run is a freshly reloaded page. Either way, a crash or an infinite loop never takes the editor down.

On top of the process boundary:

⇧⌘R (Stop) stops a run gracefully, and kills it after 500 ms if it doesn't respond. ⌥⌘R (Kill) kills it at once.
If a run stops answering for 3 seconds, JSLab asks: Kill or Wait.
Loop protection stops a runaway while loop like the one above after 2,000 iterations, with an error naming its line, before you even reach for Stop.

The details of Stop, Kill and loop protection are in today's feature note.

JSLab launches Nov 15. How runs work: https://js-lab.app/docs/editor

DEV Community: JSLab

Multi-cursor moves that replace a regex

Move 1: a pasted column into an array

Move 2: rename by selecting the next match

Move 3: column cursors

Two more worth knowing

If you think in Vim

Tabs, files and session restore

Session restore

Tabs

Files

Prettier on demand, on run, on save

On demand

On run, on save

The options

When it can't parse

What your TypeScript becomes when it runs

The part that disappears

The part that doesn't

Why this matters now

Seeing it for your own code

Prototype an API call before you write the client

Step 1: the token comes from the environment

Step 2: a request that fails properly

Step 3: type what you actually got

Step 4: read the limits

In a scratchpad

The jslab CLI: open files and pipe code into a tab

Install it

Open files

Pipe code in, and run it

The options

Two I use

How it works

Snippets (Cmd+B) and the command palette

Snippets: a name is a trigger

Placeholders

Import and export

The command palette

Quick data munging: group, sum and bucket a CSV

The data

Step 1: rows (the naive way)

Step 2: totals by region with Object.groupBy

Step 3: use a real parser

Step 4: by week, without the timezone bug

Doing it in a scratchpad

Working directory and environment variables

Give a tab a folder

Variables every tab sees

The order they apply in

Canvas sketches with no build step

The page

Detail 1: sharp on Retina

Detail 2: move by time, not by frame

Detail 3: fade, don't clear

Tweaking it live

Stop, Kill and loop protection

A run can stay active on purpose

Stop and Kill

When a tab stops answering

Loop protection

Safe Mode

Why a scratchpad should run your code in a separate process

Option 1: run it in the same thread

Option 2: a worker

Option 3: a separate process

How JSLab does it

Step 2: totals by region with `Object.groupBy`