npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

data-elements

v0.3.4

Published

Install editable Data Elements components and launch the local Tessera Studio.

Readme

Tessera and Data Elements CLI

The CLI and data-elements.dev registry are implemented and tested in this repository but are not publicly published yet. The npx commands below are the release interface; use node packages/cli/index.js with DATA_ELEMENTS_REGISTRY_URL=http://localhost:3000/r/ for repository-local development.

data-elements remains the backwards-compatible installer for editable artifact components. tessera is the public command for the local database analysis workspace.

Tessera Studio

Start Studio from any directory inside a Tessera project with a configured PostgreSQL, MySQL, SQLite, or Turso database. The published one-off command is:

npx data-elements@latest studio

After installing data-elements globally, the equivalent command is:

tessera studio

The command searches upward for tessera.config.ts. Keep database connection strings and model-provider keys in that server-only config file, normally by reading environment variables there.

For an explicit one-off connection, pass one supported database URL as a positional argument. It overrides database.url for that run only. Tessera never logs the URL, but it can still appear in your shell history and process listings, so a config plus environment variable remains the recommended project setup.

tessera studio postgresql://readonly:[email protected]:5432/warehouse
tessera studio mysql://readonly:[email protected]:3306/warehouse
tessera studio file:/absolute/path/to/warehouse.db
TURSO_AUTH_TOKEN=... tessera studio libsql://warehouse-org.turso.io

SQLite accepts file: and sqlite: URLs that reference an existing local database file. Turso accepts libsql: and turso: URLs; keep its credential outside the URL in database.authToken or TURSO_AUTH_TOKEN.

Choose a config file or local listener explicitly when needed:

tessera studio --config ./config/tessera.config.ts --host 127.0.0.1 --port 4310

Studio accepts at most one positional database URL. Only --config, --host, and --port are valid options. The CLI runs the built Studio with the current Bun runtime or with Node.js 24+, through an argument array with no shell.

Install the complete editable component catalog:

npx data-elements@latest

Install one or more artifacts:

npx data-elements@latest add query-artifact metric-artifact

Verify the installed compatibility lock and every locked source hash:

npx data-elements@latest doctor

The CLI delegates to the official shadcn CLI and follows the package manager that invoked it. Generated source is installed under the components directory configured in the host project's components.json.

Prerequisites

  • Node.js 24 or later
  • Bun 1.3 or later
  • A React project with Tailwind CSS
  • A valid shadcn components.json (the shadcn CLI can initialize one when it is missing)

The default command installs the artifact-ui item. It copies only editable React UI source; the browser-safe schema, core, and runtime remain exact-version npm dependencies.

Before an update, the CLI reads data-elements.lock.json from the components alias configured by components.json. An unchanged official installation can be updated normally. If a locked file was changed, removed, or has an invalid hash, the installation becomes custom/unverified and the CLI refuses to overwrite it.

Use --force only when you intend to replace local changes:

npx data-elements@latest --force

--force is an overwrite operation, not a three-way merge. Preserve or commit local changes before using it. add accepts any published registry item and removes duplicate names before invoking shadcn. Set DATA_ELEMENTS_REGISTRY_URL only when testing a local registry; remote registries must use HTTPS.