DRAWABLY : une UI croqués à la main pour votre web
📌 DRAWABLY est une bibliothèque JavaScript qui transforme vos boutons, checkboxes, toggles et autres contrôles en esquisses à la main, avec un trait qui « bout » comme un croquis animé.
L’idée est séduisante et bien exécutée. Au lieu des mêmes composants UI templates que tout le monde, Drawably génère aléatoirement un dessin au crayon à chaque montage — et le trait vibre doucement, comme un coup de stylo qui n’a pas tout à fait séché. Zéro dépendance, 7 KB gzipped, 3 KB de CSS. Le genre de bibliothèque que vous ajoutez pour donner du caractère sans alourdir votre bundle.
Ce qui m’a convaincu, c’est lafolie du détail. Chaque contrôle a trois variantes de dessin (outline, solid, scribble), et la surbrillance de l’état — loading, error, success — est gérée directement dans la machine à états du composant. Pas besoin de wrapper ou de logique côté client : vous appelez button.setState("loading"), et l’esquisse change de couleur et s’accélère. En React, ça se passe d’un prop state.
La bibliothèque couvre tout ce qu’on attend d’un kit UI complet : boutons, checkboxes, radios, toggles, inputs, textareas, selects, dividers, cards, badges, et même des listes avec des marqueurs dessinés. Pour les annotations, il y a du soulignement, du surlignage, des cercles et des flèches — chaque décoration se redessine au survol.
- ✏️ Zéro dépendance — 7 KB gzipped, pas de framework requis
- 🎨 Esquisses aléatoires — chaque montage génère un dessin unique
- 🫧 Trait qui bout — animation CSS de 3 frames, respecte prefers-reduced-motion
- 🧩 Contrôles complets — buttons, checkboxes, radios, toggles, inputs, selects, cards
- ⚛️ Wrappers React — DrawablyButton, DrawablyCheckbox, etc. dans drawably/react
- 🖊️ Font optionnelle — Drawably Pen (31 KB) pour des labels à la main
Ce que je trouve intéressant, c’est le positionnement : Drawably ne remplace pas votre design system, il le pimente. C’est le genre d’outil qu’on glisse sur un prototype, un side project ou une landing page pour lui donner une personnalité immédiate. Le système de seed permet de figer un dessin si vous voulez de la reproductibilité, et le rough renderer est exporté pour créer vos propres formes.
La bibliothèque est en version 0.3.10, sous licence MIT, avec 394 étoiles sur GitHub. Daniel Belyi, le développeur, a aussi mis en place des tests (Vitest) et une font personnalisée construite par sa propre plume. C’est cohérent : quand on fait une lib de traits crayonnés, on fabrique aussi le crayon.
Sources
