Drawably draws every UI control as a fresh hand-drawn sketch on each mount
Drawably: Hand-Drawn UI Controls
Drawably is a zero-dependency library that renders buttons, checkboxes, inputs, and more as hand-drawn SVG sketches. Each mount generates a unique pen stroke from seeded randomness, and the lines boil like an animated doodle. It includes React wrappers, text decorations, composites, and an optional pen font, all in about 9 KB of gzipped JavaScript and a 3 KB stylesheet. The real inputs stay in the DOM, so keyboard, forms, and screen readers work as usual.
Each attach call returns a sketch handle: const sketch = drawablyButton(el); sketch.resketch(); // redraw with a new random seed
- voidUpdate
Maybe I'm old fashioned, but usually when something says "hand drawn", I'd expect it to be hand drawn, not machine drawn
- BariumBlue
Those feel very ink-blobby - like they were drawn by someone who can barely hold a pen stick-stopping across each line and then redoing parts of each line to correct mistakes. Looks elementary schooler.
I think I personally prefer Excalidraw look and feel - a couple of smooth and mostly straight lines per line, which looks more like intentional competence with a quick and imperfect tool.
- vunderba
Reminds me of wired elements (which uses Rough.js under the covers).