Skip to main content

Use npm packages

Import any npm package that runs in a browser, and the Widget Studio fetches it for you. There's nothing to install.

import { format } from "date-fns@4";

Check the Blotch Library first. It may already have what you need, drawn to suit e-ink, and it keeps your Widget lighter. For charts, use the library's charts rather than a charting package.

Browser packages only​

Your Widget runs in a browser, so packages made for Node.js, which use things like fs or child_process, don't work. Packages that work in both are fine.

Pin the version​

Always add a version to the package name. Without one, your Widget gets the newest version every time it's drawn, and a new major version of the package can break it without warning.

You writeYou getLike this in package.json
date-fns@4The newest 4.x.x^4.0.0
date-fns@4.1The newest 4.1.x~4.1.0
date-fns@4.1.0Exactly 4.1.04.1.0
date-fnsThe newest version, whatever it is*

Scoped packages and paths inside a package work too, such as @scope/package@2 or package@2/subpath.

Type @ after a package name to see its versions. Types are fetched with the package where it has them, so auto-complete works.

Import by name​

Import named or default exports:

import { format } from "date-fns@4";
import dayjs from "dayjs@1";

Two other forms of import aren't fetched for you, so avoid them:

  • Namespace imports with capitals in the name, such as import * as Lib from "lib@1". Write it in lowercase, import * as lib from "lib@1", or import by name.
  • Imports for side effects only, such as import "lib@1".

React​

Widgets always use the React version Blotch provides, whatever version you import. Import React without a version:

import { useState } from "react";