shihn.ca ⚡️

Wired-Elements 2.0

I'm happy to announce the 2.0 release of wired-elements. It started of, and still is, a fun project to work on. In this era of really slick and buttery smooth design systems, a brutal and rough beacon of light 😉

In this release, the underlying base code for all components was refactored to create smaller and more efficient components. By more efficient, I mean fewer re-renders of the sketchy shapes. This was done mainly by not re-rendering shapes if the dimensions do not change, and also by utilizing the Resize Observer where it's available.

View all components in action in the wired-elements showcase.

New components in 2.0 👇

wired-calendar

This is the first fully community contributed component. Eduardo Martinez created this. The calendar is customizable in many ways, for details check out the wired-calendar readme.

wired-calendar example

wired-video

A simple video player that shows a sketchy progress and hand-drawn controls for play/pause and volume.

wired-image

An image component akin the the <img> tag, but it frames the image in a hand-drawn box. The elevation of the box is configurable.

wired-calendar example

wired-dialog

A modal dialog implementation. This contents of the dialog look like paper cutouts around a hand drawn box.

wired-divider

A hand-drawn horizontal line that can be used to divide two sections.

wired-link

Akin to <a> tag, a link with href, and a sketchy underline.

wired-search

A search input control

MORE

Try wired-elements out on Glitch playground.

Checkout wiredjs.com for more.