// HACKER NEWS — CYBERSECURITY
Drawably: Hand-Drawn UI Controls
Hand-drawn UI controls. Every mount generates a fresh pen sketch from seeded
randomness, and the stroke boils like an animated doodle. Zero dependencies,
~9 KB of JS gzipped (React wrappers add under 1 KB) and a 3 KB stylesheet. An
optional pen font is a separate 31 KB.
Three variants: outline (default), solid, scribble. Buttons also carry a
state machine for async work:
In React, pass the state prop; the sketch stays put and only the state
changes:
Override the state colours with --drawably-error and --drawably-success.
For secondary or destructive actions, set tone: "neutral" (warm grey) or
tone: "danger" (red).
Badges take variant: "outline" | "scribble"; lists take
marker: "dash" | "check". Selects reserve the widest option's width so
picking never shifts layout; in Chromium the options list gets a sketched
frame and pen check (appearance: base-select), Safari and Firefox keep the
OS popup.
The real inputs stay in the DOM, so keyboard, forms, labels and screen readers
all work as usual. The sketch is an aria-hidden SVG layered underneath.
Every control has a React counterpart in drawably/react: DrawablyButton,
DrawablyCheckbox, DrawablyRadio, DrawablyToggle, DrawablyInput,
DrawablyTextarea, DrawablySelect, DrawablyDivider, DrawablyCard,
DrawablyBadge, DrawablyList.
Annotate copy the way you would with a pen. Each attaches to an inline element
and leaves its layout alone; use them on a word or a short phrase.
A decoration that wraps onto several lines gets one drawing per line. The
arrow's SVG is appended to
in document coordinates and redraws on
resize. Anchors inside a scrolling container will drift as it scrolls.
Pieces built from the controls above. One seed reproduces every stroke in
the piece; destroy() tears them all down.