DialKit
A floating control panel for React, Solid, Svelte, and Vue: sliders, toggles, color pickers, spring editors, and easing curves wired directly to UI values. By Josh Puckett.
What It Does
DialKit renders a draggable floating panel that auto-generates controls from a config object. Call useDialKit("name", config) in any component and get a collapsible folder in the panel with sliders, toggles, pickers, spring/easing editors, and action buttons. Source: Obsidian-LLM-Wiki/Clippings/Josh Puckett.md; https://joshpuckett.me/dialkit
The panel is dev-only by default (productionEnabled: false). Supports popover and inline modes.
Config Types
| Format | Control | Description |
|---|---|---|
[default, min, max, step?] |
Slider | Explicit range with optional step |
number |
Slider | Auto-inferred range |
boolean |
Toggle | On/off segmented control |
"#ff5500" |
Color Picker | Auto-detected from hex strings |
"Hello" |
Text Input | Auto-detected from non-hex strings |
{ type: "spring", ... } |
Spring Editor | Visual spring curve, Time/Physics modes |
{ type: "easing", ... } |
Easing Editor | Cubic bezier curve with duration preview |
{ type: "select", ... } |
Select | Dropdown with options array |
{ type: "action" } |
Button | Triggers onAction callback |
{ nested: ... } |
Folder | Collapsible group |
Keyboard Shortcuts
Assign keyboard shortcuts to controls: hold key + scroll, drag, or move mouse to adjust values without touching the panel. Interaction types: scroll, drag, move, scroll-only.
Installation
npm install dialkit motion
Add <DialRoot /> as sibling to {children} in root layout. Import dialkit/styles.css.
Use Cases
- Tuning spring physics (visualDuration, bounce) on hover animations
- Adjusting layout values (gap, padding, columns, radius) in real-time
- Exploring visual variations (colors, opacity, blur) on components
- Triggering replay of entrance animations via action buttons
- Live-tweaking Motion transition parameters during development
Tuning Console Pattern
Soren Blank's Linear parallax-bar recreation shows the high-leverage use case: use a DialKit-like floating panel as a temporary console for spatial/motion parameters while the component updates live. The reviewed video exposes bar count, step sizes, diagonal offsets, peak nodes, peak height, falloff, and floor. The lesson is to make hard-to-see motion geometry explicit while developing, then preserve the final values as constants or design tokens. Source: X/@sorenblank and local video contact sheet, 2026-07-03
Frameworks
React (default), Solid (dialkit/solid), Svelte 5 (dialkit/svelte), Vue 3 (dialkit/vue). Identical API surface across all.
Timeline
- 2026-07-03 | Added Soren Blank's parallax-bar artifact as evidence for DialKit's role as a motion/layout tuning console, especially for visible geometry parameters that are tedious to tune by code edits alone. Source: X/@sorenblank, 2026-05-01
- 2026-06-17 | Added inline provenance and timeline. Source: Obsidian-LLM-Wiki/Clippings/Josh Puckett.md; https://joshpuckett.me/dialkit
- 2026-04-07 | Created DialKit tool page from Josh Puckett clipping. Source: Obsidian-LLM-Wiki/Clippings/Josh Puckett.md