DEV Community

Cover image for Announcing Wired-Elements 2.0
Preet Shihn
Preet Shihn

Posted on • Originally published at

Announcing 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 👇


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


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

wired-video example


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-image example


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

wired-dialog example


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


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


A search input control

wired-search example


Try wired-elements out on Glitch playground.

Checkout for more.

Top comments (0)