MenuPages and packages / Packages

Docs / Pages and packages

Packages

Search npm and read about a package in the Packages window. With JSpark+, install it for every Snippet.

On this page

Packages has a window of its own. Open it with Packages on the rail, at the left of the editor, or choose Window → Packages.

Search npm

Type a name or a few words in Search npm… at the top of the list. When you stop typing, the list shows what npm found. Pick a row to see that package on the right.

npm’s results for date-fns; the first one is picked and not installed yet.

With nothing typed, the list shows the packages already installed. A check marks an installed package, and a lock one that a Starter needs. An installed package whose name holds your words stays in the list, even when npm’s results leave it out.

Read about a package

The right side shows the package you picked:

  • Its name, and whether it is installed: Not installed, or Installed and its version.
  • Its description, its size, a link to its page on npm, when it was published, and its downloads a week.
  • Its README, under the facts.
  • For an installed package, where it works: Node and Web, each with a mark. Hover a mark to see why.
An installed package: where it works, its facts from npm, and the Starter that needs it.

Searching and reading work the same in JSpark and JSpark+.

Install a package JSpark+

  1. Search for the package and pick it.
  2. To install a version other than the latest, choose it from the version menu. The button then says which, such as Install 4.1.0.
  3. Click Install. The badge says Installing…, then Building for Web…, then Installed and the version.
  4. Import it in a Snippet, such as import { format } from "date-fns".
date-fns found, installed for Node and Web, and imported in a new Snippet.

A package is installed once, for every Node and Web Snippet. Node Snippets get npm’s own install; Web Snippets get a build for the browser from esm.sh, kept on your computer. Its types come with it, for TypeScript.

  • No package’s install script runs. When one was skipped, the package says “Setup skipped. It may not work.”
  • An install that would break another installed package is refused, and the message names it.

In JSpark, Install says “Adding or changing packages needs JSpark+”. Packages already installed, the Starters’ own packages and imports from a CDN work in JSpark too.

Update or remove one JSpark+

When npm has a newer version, the badge is followed by, for example, 4.4.0 available, and an Update to 4.4.0 button appears. To change to any other version, choose it from the version menu, then click Update to or Downgrade to.

date-fns 4.1.0 is installed, and 4.4.0 is available.

To remove a package, click Uninstall.

  • If another installed package needs it, JSpark says so first, and the button becomes Uninstall anyway. The package then stays on disk for the one that needs it, and Web Snippets can’t import it.
  • A package a Starter needs has a lock and no Uninstall: “Required by the React Starter (^19). Stays while it’s here.” Only versions inside the Starter’s range are offered.

Packages offline

  • Installed packages work with no connection, in Node and Web Snippets alike.
  • A Web Snippet that imports part of a package by its path, such as date-fns/locale, builds that part the first time, and that needs a connection once.
  • Each Starter’s packages come with the app. They install on the first Run of a Snippet from that Starter, with no connection.
  • Searching, installing and updating need a connection. Offline, the search box shows a mark that says so, and the version menu offers only the installed version.
  • A package installed while esm.sh can’t be reached is ready for Node first: “Ready for Node. Web finishes once you’re online.” It finishes by itself once you are.

If a package won’t install or work, see A package will not install or work.

The pictures show JSpark on a Mac. On Windows, the window looks a little different and uses Ctrl for ⌘, but everything works the same way.

Esc

Type to search every docs page.