Wired Elements — Hand-Drawn Sketchy Web Components for Prototyping

Introduction

Wired Elements is a set of web components that look like they were drawn by hand on a whiteboard. Built on Rough.js for the sketchy rendering and Lit for the web component layer, these elements are ideal for wireframes, prototypes, and applications that want a playful or informal aesthetic. Every render is slightly different, giving each element a natural, organic feel.

What Wired Elements Does

• Renders standard UI controls with a hand-drawn sketchy style
• Provides buttons, inputs, cards, sliders, checkboxes, and more
• Uses Rough.js canvas rendering for the organic look
• Works as standard web components in any framework
• Randomizes stroke paths so each render is visually unique

Architecture Overview

Each Wired Element extends LitElement and uses Rough.js to draw SVG paths with a sketchy algorithm. The components observe standard HTML attributes and emit native DOM events. Shadow DOM encapsulation ensures the sketchy styles do not leak into the host page. The rendering is done in SVG overlaid on semantic HTML elements for accessibility.

Self-Hosting & Configuration

• Install from npm and import individual components or the full bundle
• No build tools required; works with ES module imports
• Customize stroke color and fill via CSS custom properties
• Adjust sketch roughness through the roughness attribute
• Use with any framework or vanilla HTML pages

Key Features

• Unique hand-drawn aesthetic using Rough.js rendering
• Standard web components with no framework lock-in
• Accessible semantic HTML underneath the sketchy SVG
• Lightweight with minimal dependencies
• Each render is visually unique due to randomized stroke paths

Comparison with Similar Tools

• Material Web — polished Material Design; Wired Elements targets the opposite aesthetic
• Shoelace — clean, modern web components; no sketchy style option
• Ant Design — enterprise-focused React components; heavier bundle
• Naive UI — Vue 3 components with clean design; framework-specific

FAQ

Q: Are Wired Elements accessible? A: Yes. The sketchy SVG layer sits on top of real HTML elements, preserving keyboard navigation and screen reader support.

Q: Can I use these in production? A: Yes, though they are most commonly used for prototypes, wireframes, and applications that embrace a casual aesthetic.

Q: Do the components look the same on each render? A: No. Rough.js introduces slight randomness in stroke paths, so each render has a subtly different look.

Q: What browsers are supported? A: All modern browsers that support web components and SVG, including Chrome, Firefox, Safari, and Edge.

Sources

• https://github.com/rough-stuff/wired-elements
• https://wiredjs.com/