DIALKIT : accorder une interface à l’œil, en direct dans l’app
📌 DIALKIT est une bibliothèque JavaScript qui greffe un panneau de contrôle flottant sur votre application pendant qu’elle tourne : rayon, couleur, ombre, courbe d’animation deviennent des sliders que vous déplacez à la souris, sans recharger ni recompiler.
Faites le test mental. Vous hésitez entre 24 et 28 px de border-radius sur une carte. Dans le flux habituel, vous changez la valeur, vous attendez le rebuild, vous comparez de mémoire, vous recommencez. DialKit coupe ce cycle : vous déclarez radius: [24, 0, 64] dans votre code, et un slider apparaît dans un panneau flottant, branché sur la valeur en direct. Josh Puckett, l’auteur d’Interface Craft, résume l’idée en trois mots : régler au sentiment, pas au chiffre.
Le catalogue de contrôles surprend par son étendue. Sliders avec bornes et pas, toggles, champs texte, sélecteurs. Une couleur collée en hex, RGB, HSL, OKLCH ou Display P3 est reconnue automatiquement. Un pad XY règle deux nombres d’un seul geste, parfait pour un couple durée/rebond. Et l’éditeur de ressort parle deux langages : le mode temps (visualDuration, bounce) pour les humains, le mode physique (stiffness, damping, mass) pour les amateurs de Motion, avec la courbe qui se redessine sous vos yeux.
La timeline est la pièce qui m’a le plus séduit. Vous décrivez des clips en code — un point de départ, une durée — puis vous les déplacez, les étirez et les scrubbez comme sur un logiciel de montage. L’interface suit la tête de lecture via clip.current, et le bouton Copy renvoie les valeurs finales dans votre config de production. Ajoutez un bouton Replay et le réglage d’une animation devient presque un plaisir.
Je trouve l’approche très juste : DialKit ne remplace ni votre design system ni vos tokens, il comble le trou entre la maquette figée et le code, là où le feeling se joue. Les versions se sauvegardent depuis le panneau et persistent en localStorage, les raccourcis clavier pilotent les sliders (touche tenue, molette pour l’ajustement fin), et tout disparaît dans les builds de production sauf si vous forcez productionEnabled. Les images envoyées dans les contrôles, 10 Mo maximum, ne quittent jamais le navigateur.
Côté compatibilité, chacun trouve son compte : React 18+, Solid, Svelte 5.8+, Vue 3.3+, et un adaptateur JavaScript pur sans aucune dépendance, utilisable même sans bundler. La seule vraie limite est conceptuelle : l’outil règle, il n’exécute pas. Les valeurs ne deviennent définitives qu’une fois copiées dans le code, et c’est très bien comme ça. Sous licence MIT, c’est à essayer sur la prochaine animation qui « marche mais fait bizarre ».
- 🎛️ Chaque valeur devient un contrôle : sliders, couleurs, pads XY, ressorts
- ⏱️ Une timeline de clips à déplacer, étirer et scrubber, façon montage vidéo
- 🧩 React, Solid, Svelte, Vue et un adaptateur vanilla sans dépendance
- 💾 Versions sauvegardées, presets persistants, raccourcis clavier
- 🙈 Éditeur masqué en production, uploads d’images confinés au navigateur
Sources
