@node-projects/wired-elements

Hand-drawn web components for wireframes, prototypes, and interfaces with a sketchbook feel.

This is the node-projects fork of Wired Elements, published as @node-projects/wired-elements. It fixes ES module import paths, uses Lit 3 and @node-projects/roughjs 5, and supports use in Web Component Designer.

Live component showcase · Component API · GitHub releases

Try it

The showcase includes all 26 elements in 23 interactive examples, with category filters, search, and copyable HTML. It builds from this repository's source and bundles its dependencies, including unpublished changes when run locally.

You can also open this package in Web Component Designer.

Install

npm install @node-projects/wired-elements

Usage

Import the elements you need into your application's JavaScript entry point:

import '@node-projects/wired-elements/lib/wired-button.js';
import '@node-projects/wired-elements/lib/wired-input.js';

Then use them in HTML:

<wired-input placeholder="Enter your name"></wired-input>
<wired-button elevation="2">Say hello</wired-button>

To register the main collection at once:

import '@node-projects/wired-elements';

The calendar has a separate entry point:

import '@node-projects/wired-elements/lib/wired-calendar.js';

Use a bundler or a browser import map to resolve the package's npm dependencies. The local showcase demonstrates a bundled browser setup.

These are standard custom elements: use them in plain HTML and JavaScript or in frameworks that support web components. See the component documentation for properties, events, and CSS custom properties. Use the scoped @node-projects/wired-elements package when adapting upstream examples.

Components

Category	Elements
Actions	button, fab, icon-button, link
Inputs	input, textarea, search-input, checkbox, toggle, radio and radio-group, combo, listbox, item, slider, calendar
Layout	card, tabs and tab, divider, dialog
Feedback	progress, progress-ring, spinner
Media	image, video

All element names use the wired- prefix, such as <wired-checkbox>.

Develop locally

npm ci
npm run build

The TypeScript build writes the library and type declarations to lib/.

Run the showcase

npm run preview:site

Open http://127.0.0.1:4173. The showcase uses Wired controls and a locally bundled handwritten font. The video example accepts a local file that stays in your browser.

npm run build:site builds the library and writes the static showcase to _site/. Asset URLs are relative so the site works under the repository's GitHub Pages path.

GitHub Pages

The Component showcase workflow validates pull requests and deploys pushes to master. It can also be run manually from the Actions tab. The repository's Settings → Pages → Build and deployment must use GitHub Actions as the source.

Publish a release

Publish a GitHub release with an exact version tag such as v3.2.0 or 3.2.0. The Publish release package workflow:

1. Checks out the release tag's commit.
2. Sets the package and lockfile version for the build without creating a version commit.
3. Builds the library and creates one npm tarball.
4. Publishes that tarball to npmjs.com and attaches the same .tgz file to the GitHub release.

SemVer prereleases and releases marked as prereleases on GitHub use the next npm tag; stable releases use latest.

Publishing authentication

npm trusted publishing is configured for node-projects/wired-elements and the workflow filename publish-release.yml. The workflow authenticates through GitHub Actions OIDC and needs no npm token secret. If this configuration needs to be recreated, a maintainer can use an authenticated npm CLI with 2FA:

npx --yes --package=npm@12.2.2 npm trust github @node-projects/wired-elements \
  --repo=node-projects/wired-elements --file=publish-release.yml --allow-publish --yes

Retry an existing release

Select Actions → Publish release package → Run workflow on master, and enter the original tag in release_tag. This also works for tags created before the workflow existed.

If npm already has the version with identical integrity, the workflow skips publishing and retries the GitHub asset upload. Existing assets with the same filename are replaced. A version already published with different contents fails; create a new release version when package contents change.

The pack metadata reader accepts both npm 11's array output and npm 12's object keyed by package name. Check the format handling, version validation, prerelease tags, and retries with:

node --test scripts/release-package.test.mjs

Credits and license

Originally created by Preet Shihn. Built with Lit and Rough.js, with this fork using @node-projects/roughjs.

Released under the MIT License. Copyright © 2021 Preet Shihn.