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.
Modern JavaScript date utility library
🔥️ NEW: date-fns v4.0 with first-class time zone support is out!
date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js
👉 Blog
It's like Lodash for dates
- It has 200+ functions for all occasions.
- Modular: Pick what you need. Works with webpack, Browserify, or Rollup and also supports tree-shaking.
- Native dates: Uses existing native type. It doesn't extend core objects for safety's sake.
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.
React is a JavaScript library for building user interfaces.
Required by the React Starter (^19). Stays while it’s here.
reactReact is a JavaScript library for creating user interfaces.
Searching and reading work the same in JSpark and JSpark+.
Install a package JSpark+
- Search for the package and pick it.
- 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.
- Click Install. The badge says Installing…, then Building for Web…, then Installed and the version.
- Import it in a Snippet, such as
import { format } from "date-fns".
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.
Modern JavaScript date utility library
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.