JSLab
Download for Mac

npm packages

Search npm, install and update packages that every tab can import, and get their types in the editor.

Open the package sheet

⌘I, Tools → NPM Packages…, or the activity bar opens the package sheet.

Install a package

Press ⌘I to search npm and install a package once; every tab can import it.

Search the registry as you type, then click Add on the result you want. Or type name@version and press Return: exact versions and ranges both work.

Scoped packages and @types packages install the same way. @types results are hidden by default; Show @types lists them.

import { nanoid } from "nanoid";

nanoid(); // Auto Log shows a fresh id on every run

Packages install into one project that every tab shares. A package you add in one tab is available in every other tab straight away, without restarting JSLab.

From the editor and the output

Import a package you don't have and JSLab offers to install it, from the editor or from the error row.

// dayjs isn't installed yet: click Install on the error row, or the lightbulb on line 2.
import dayjs from "dayjs";

dayjs().format("dddd, MMMM D");
  • An import of a package you haven’t installed is underlined in the editor, with a quick fix to install it, or its @types package.
  • In a browser tab, a run that fails because a package is missing shows an error row with Install and the package’s name. Either way, the tab runs again by itself once the install finishes.
  • A Bun tab usually fetches a missing package by itself when it runs; installing it still gives the editor its types.
  • Inside an import’s quotes, installed packages are suggested as you type.

Update and remove packages

The Installed list shows each package’s installed and latest version, with Update and Remove buttons on every row and Update All for everything at once. A major version bump is marked Major before you install it, because it may include breaking changes.

The Activity section shows what’s running and what’s queued, and Log shows what Bun reported. An operation that runs longer than 5 minutes is stopped.

Types and autocomplete

The editor reads the types of what you install, so imports autocomplete and type-check. A package that doesn’t ship its own types needs its @types package. Turn on Install Types Automatically in Settings → NPM to add it for you whenever an installed package has no types of its own.

Install scripts

Install scripts, such as postinstall, are blocked by default. When an install needs one, the sheet offers Allow Scripts and Retry. To allow them for future installs, turn on Allow install scripts in the sheet, or Allow Install Scripts in Settings → NPM. Scripts run with your permissions.

Native modules install like any other package, and run their build scripts when install scripts are allowed.

Registries and .npmrc

JSLab uses its own .npmrc, never your ~/.npmrc. Edit it in Settings → NPM, where Save writes it and Reset restores the default registry. The file is readable only by you, and tokens never appear in JSLab’s logs.

@acme:registry=https://npm.acme.dev/
//npm.acme.dev/:_authToken=<token>

A git dependency over SSH authenticates through your SSH agent (SSH_AUTH_SOCK) or GIT_SSH_COMMAND, because npm operations don’t see the ~/.ssh folder in your home.

Last updated