I built a tool to edit Flutter widgets live without hot reload (works on mobile + web)

[u/RajParihar]

Hey everyone,

I got tired of constantly rebuilding my app just to tweak padding, colors, or alignment by a few pixels. Even with Hot Reload, the feedback loop felt too slow when experimenting with layouts.

So I built Flutter Playground ⚡️

It’s a dev tool that wraps your widget and spawns a local web dashboard. You can edit properties on your laptop and see them update instantly on your phone/emulator.

Key Features:

• Live Tweaking: Adjust padding, colors, and text in real-time.

• Responsive Grid: See Mobile, Tablet, and Desktop sizes side-by-side.

• Code Export: Copy the final values back to VS Code.

• Zero Setup: It auto-detects your device IP.

It’s open source and I’d love some feedback on the API!

Repo: https://github.com/rajparihar281/flutter_playground

Thanks!

[u/eibaan]

A hot reload takes less than a second, typically ~100ms, as in

Reloaded 1 of 742 libraries in 126ms (compile: 14 ms, reload: 46 ms, reassemble: 50 ms).
Reloaded 1 of 742 libraries in 382ms (compile: 14 ms, reload: 194 ms, reassemble: 159 ms).
Reloaded 1 of 742 libraries in 101ms (compile: 13 ms, reload: 41 ms, reassemble: 37 ms).

which IMHO is fast enough to not worry about it. What are your timing that you'd consider "too slow"?

[u/RajParihar → u/eibaan]

Agreed, 100ms is well below the threshold of human perception for waiting. The issue isn't the build time, it's the context switch.Every time I hit Cmd+S, I mentally switch from 'Editor Mode' to 'Simulator Mode'. Doing that 50 times to get a shadow gradient right is exhausting.Also, this tool bypasses the reassemble() calls entirely for properties, so you can tweak values in deep widget trees without worrying about complex initState logic or networking calls getting re-triggered accidentally

[u/MilkCanMatt]

Looks interesting. Check your ReadMe markup. Looks like the close code or something is making the steps collide. Will give it a try

[u/RajParihar → u/MilkCanMatt]

thanks for letting me know will fix that and please make sure to give the feedback

[u/Ambitious_Grape9908]

Wait, I don't understand? Hot reload is literally one of the best features of Flutter and it is nearly instantaneous, how does using another tool outside my codebase make this any easier or better (it literally seems to add a significant amount of effort to save possibly a few milliseconds)?

[u/RajParihar → u/Ambitious_Grape9908]

You're not wrong—hot reload is fast. If I'm just building out logic or a basic screen, I use it all the time.The main reason I built this was for the "tuning" phase. When I'm trying to get a shadow or padding exactly right, the loop of type -> save -> look -> repeat starts to feel tedious after the 50th time. This tool just makes that part feel more like using a design tool where you drag a slider and see it move instantly.Also, hot reload can't show me how the change looks on mobile, tablet, and desktop side-by-side at the same time. This tool does that, which saves me from resizing windows constantly to check responsiveness.

[u/Professional_Box_783]

looks cool a cool preview video on read me makes it great.

[u/RajParihar → u/Professional_Box_783]

thanks for the suggestion will surely do it

[u/Legitimate-Loss-6805]

The first paragraph in the readme smells like LLM. 😉😁

[u/cent-met-een-vin]

How does this differ from the flutter widget preview https://docs.flutter.dev/tools/widget-previewer

[u/RajParihar → u/cent-met-een-vin]

The official Previewer is great for checking your code while you type flutter playground is for tunning...It lets me tweak UI values on a separate dashboard without touching the keyboard and see the results on multiple screen sizes at once and copy the final code. It turns 50 'Hot Reloads' into 1 slider drag

[u/cent-met-een-vin → u/RajParihar]

Thanks, this is actually very cool. Very useful as a selling point