Loading video...

Video Failed to Load

Go Home

DialKit is a framework for live tuning any parameter in your app. See changes instantly, test different value sets with presets, then copy a prompt for your agent. Available for free today.

98,806 views • 7 months ago •via X (Twitter)

54 Comments

joshpuckett's profile picture
joshpuckett7 months ago

npm install dialkit motion or visit to see more on how you can use it. Feedback and PRs welcome!

joshpuckett's profile picture
joshpuckett7 months ago

Live tuning is one of those ways of working that once you learn it, you don't go back. Use it to dial in animations, layouts, effects, or anything you think of.

Kyler Phillips's profile picture
Kyler Phillips7 months ago

Love this, some notion of pages, accordions for subset/grouping would be killer. Thanks for working on it.

joshpuckett's profile picture
joshpuckett7 months ago

collapsible groups are already in there, bb!

Kyler Phillips's profile picture
Kyler Phillips7 months ago

Ah amazing!

Eduardo Sonnino's profile picture
Eduardo Sonnino7 months ago

Thats awesome @joshpuckett !

joshpuckett's profile picture
joshpuckett7 months ago

😅

Soren's profile picture
Soren7 months ago

so cool! have to give this a try.

diip3sh's profile picture
diip3sh7 months ago

Working on new component, will test with it

joshpuckett's profile picture
joshpuckett7 months ago

@yordaniawono was doing something similar!

Kyle's profile picture
Kyle7 months ago

looks lovely, thanks @chazza for telling me about this.

joshpuckett's profile picture
joshpuckett7 months ago

@chazza I hope you find it useful!

Sharif's profile picture
Sharif7 months ago

I’ve been waiting for this!

joshpuckett's profile picture
joshpuckett7 months ago

let me know what you think!

William Bout's profile picture
William Bout7 months ago

Nice pics 👀

joshpuckett's profile picture
joshpuckett7 months ago

Must have been taken by a very talented (and handsome) photographer! 😘

Mike Lee's profile picture
Mike Lee7 months ago

Very impressive work Josh! At the moment I use Leva for this use case but I will definitely try this too, my only feedback so far from the demo is that it would be awesome if we were able to drag the panel around, since I typically move this component around in my presentations while I walk through various details

joshpuckett's profile picture
joshpuckett7 months ago

You can specify anchor position currently, but will looking into drag anywhere positioning

Jason Bradley's profile picture
Jason Bradley7 months ago

Wanted to dm about it so this is clutch

Milind Mishra's profile picture
Milind Mishra7 months ago

Love this, thanks for all the hardwork! 🙌🏻

YottaYocta's profile picture
YottaYocta7 months ago

Game changer if we had this in svelte

joshpuckett's profile picture
joshpuckett7 months ago

submit a PR! Will look to add eventually.

Deep lakhani's profile picture
Deep lakhani7 months ago

It's more like tweakpane but much better thanks @joshpuckett

joshpuckett's profile picture
joshpuckett7 months ago

exactly. I wanted to call it "Tweak", resurrecting this project from 12 years ago, but that'd be too confusing

Deep lakhani's profile picture
Deep lakhani7 months ago

It's great way to tweak with motion

Jason Anderson's profile picture
Jason Anderson7 months ago

This looks really cool! And amazing docs

joshpuckett's profile picture
joshpuckett6 months ago

🙏

cam's profile picture
cam7 months ago

absolutely goated. stoked to use this

Corey O’Neal's profile picture
Corey O’Neal7 months ago

between this and — it's making me want to switch away from svelte

aditya's profile picture
aditya7 months ago

as an interface craft user, been using this for everything in my workflow and it's just game changer! btw raised a pr for a papercut 😅

Toolfolio's profile picture
Toolfolio6 months ago

Pretty UI

Jon's profile picture
Jon6 months ago

I recognize that slider from mile now 😎 That part of the course was mind-blowing to me

joshpuckett's profile picture
joshpuckett6 months ago

Always go the extra mile 🙏 Unless you’re running a race, then you probably don’t need to.

cristi's profile picture
cristi7 months ago

exactly when needed awesome job sir

seán's profile picture
seán7 months ago

Bought the course just last night so I could get access to this damn 😅 but i'm sure I'll still learn loads!

joshpuckett's profile picture
joshpuckett7 months ago

I go a lot deeper on it in Interface Craft. There are also other skills (and coming tools) that are exclusive to members.

seán's profile picture
seán7 months ago

Sweet looking forward to diving in!

Kailash's profile picture
Kailash7 months ago

Just saw this at interfacecraft. Trying it asap

Saura ☕'s profile picture
Saura ☕7 months ago

OMG!

Corey Haines's profile picture
Corey Haines7 months ago

@zstvns

BuildTradePlay's profile picture
BuildTradePlay7 months ago

This looks great, will give it a go 👌

izaias's profile picture
izaias7 months ago

This feels bigger than tuning. If those parameters connect to canonical components, you are not just tweaking visuals, you are evolving the system. Code defines the primitive. Canvas shapes it in context. Prompt reasons over it. One object, multiple ways to interact.

James Burke's profile picture
James Burke7 months ago

Nice one @joshpuckett. I will give it a whirl. Did you also see Tweakpane? Pretty cool project that is similar to yours.

James McDonald's profile picture
James McDonald6 months ago

You're on fire right now mate. Played around with this earlier... so good!

the ikid's profile picture
the ikid7 months ago

Would this give context of dom to the agent ? Been using agentation for a few weeks which I like a lot but this is going much further

joshpuckett's profile picture
joshpuckett6 months ago

Different; you design params in your code and then yes, prompt has specific context to update them. Agentation is complementary too; I use both daily

Igor Syvets's profile picture
Igor Syvets6 months ago

Love this. Just a couple days ago was building such panel for myself and was glad to discover a much polished version in Interface Craft! Except in mine I copy config json and not prompt.

Marchen's profile picture
Marchen7 months ago

curious how it integrates with existing animation libs

joshpuckett's profile picture
joshpuckett7 months ago

it makes working with @motiondotdev a dream; but works with anything.

Marchen's profile picture
Marchen7 months ago

@motiondotdev motion compatibility is huge. makes sense it works anywhere

Ben Gold's profile picture
Ben Gold7 months ago

This is so freaking cool.

Terry Carson's profile picture
Terry Carson7 months ago

Congrats on the launch! Live tuning parameters sounds like a game changer. Excited to try it out and see how it improves app workflows.

Greg Huntoon's profile picture
Greg Huntoon7 months ago

@brettmcm This is a layer of abstraction above what we’ve been working on. Stellar concept. Love it. So well done, @joshpuckett. Gonna have to give the tool a spin.

Leo's profile picture
Leo7 months ago

already have dialkit in one of my projects. the speed of dialing in the right values without guessing is genuinely great. nice work @joshpuckett thank you!

Related Videos

New Tools for a New Era. Coding agents like Claude and Cursor have dramatically reduced the time it takes to go from idea to functional software. But the experience of designing and refining with them sucks. One reason for this is that while the terminal is an incredible tool for communicating direction with language, it is a terrible tool for defining and exploring visual and interactive objects. Here is one idea for how we might fix a small part of that. In the old world, when you wanted to create a transition or animation in your app, you would type some code, refresh your local server, and click to run your animation. It probably wasn't right, because after all no one can know what 'cubic-bezier(0.3, 0.05, 0.45, 1)' really feels like when you read it. You need to see it. Feel it. Interact with it in a real world context. So you'd edit some values, save, refresh, and keep guessing and checking until it felt right. Today, you can write a quick, single-use tool that's a visual studio for designing animations. You can then configure some components and containers common in all apps, and explore different animations in real time, adjusting key properties, and getting it just right. Then, you can copy a highly detailed prompt (or export a skill containing all your animations) that captures your intent and direction with perfect clarity. Paste this into your terminal and your agent instantly implements it everywhere. To me, this is an improvement over the old world, and a better way to work in today's. I'm extremely excited to see the ways in which our ability to rapidly create software will shape how we design software tomorrow. Feedback, ideas, and critiques welcome!

joshpuckett

82,659 views • 8 months ago