# Wired Elements — Hand-Drawn Sketchy Web Components for Prototyping

> A collection of web components that render with a hand-drawn, sketchy appearance. Built on Rough.js and Lit for wireframes, prototypes, and playful UIs.

## Install

Save in your project root:

# Wired Elements — Hand-Drawn Sketchy Web Components for Prototyping

## Quick Use
```bash
npm install wired-elements
```
```html
<script type="module" src="node_modules/wired-elements/lib/wired-elements-bundled.js"></script>
<wired-button>Click Me</wired-button>
<wired-input placeholder="Enter text"></wired-input>
<wired-card>This looks hand-drawn!</wired-card>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-9e8a8973
Author: AI Open Source