Guides
Retool Draggable Modal Windows: What's Possible Today
If you've ever tried to make a Retool draggable modal window, you've probably hit the same wall everyone else has: it's not natively supported. Retool's Modal component locks to the center of the screen, with no built-in option to reposition, drag, or anchor it elsewhere in the layout. For internal tools where users need to reference background data while a modal is open, this is a real UX problem — and it's been one of the most consistently requested features in the Retool community since at least 2021.
Why Retool Modal Positioning Matters for Internal Tools
Internal tools are different from consumer apps. Your users aren't casually browsing — they're switching between reference data, input forms, and status panels as part of a real workflow. A centered, blocking modal that covers the canvas means they have to close it, check the underlying data, mentally hold that information, and then reopen the modal. That's friction that adds up fast across dozens of daily interactions.
The specific use case that keeps surfacing in the Retool community: users want to drag a modal out of the way to peek at what's behind the overlay — the same way you can pop out Retool's built-in code editors and move them around the screen. If the code editor team figured it out, the argument goes, why not modals?
What Retool Has Said About Draggable Modals
According to posts from Retool staff in the community thread, this feature is on the roadmap and was logged as part of a planned rebuild of the Modal component. The official response confirmed it's "part of our plans moving forward" — but no release date has been committed to publicly. If you're building a tool today and need this capability, you can't wait on the roadmap.
Your Workarounds for Movable Modals in Retool Right Now
There's no perfect solution, but there are several approaches worth considering depending on your use case:
- Use a
Drawercomponent instead of a modal. Retool'sDrawerslides in from the side and doesn't fully obscure the canvas. If your users mainly need to see data on one side of the screen while interacting with a form, a drawer is often the better UX choice anyway. It keeps the background visible and feels less interruptive. - Split your layout instead of using a modal. For complex workflows, consider redesigning the view so the "modal content" lives in a persistent side panel or a conditional container that toggles visibility. Use a
Containercomponent with a visibility condition tied to avariableor button state. This gives users full access to the rest of the canvas at all times. - Inject a custom draggable modal via
Custom Component. Retool'sCustom Componentallows you to embed arbitrary HTML, CSS, and JavaScript. You can build a draggable modal using plain JS drag events or a lightweight library and pass data in and out via Retool'smodelAPI. This is the most flexible option but requires frontend development effort. - Use an
iFramecomponent with a draggable UI. If your draggable interface lives on an external page, you can embed it viaiFrameand usepostMessageto communicate with the parent Retool app. A heavier approach, but viable for teams with existing web infrastructure.
How to Build a Draggable Modal Using Retool's Custom Component
If you need a true draggable experience today, the Custom Component route is your best bet. Here's the general approach:
- Add a
Custom Componentto your Retool canvas and size it to cover the area where you want the draggable modal to appear. - In the component's HTML, create a modal-style
divwith a draggable header bar. Add CSS to position it withposition: absoluteso it can move freely within the component bounds. - Wire up
mousedown,mousemove, andmouseupJavaScript events on the header to track and update the modal'sleftandtopCSS properties as the user drags. - Use
Retool.modelUpdate()to send data back to the parent app — for example, a boolean for whether the modal is open, or form values the user has entered. - Trigger the custom component's visibility using a standard Retool
Buttonor query result, the same way you'd trigger a native modal.
This approach won't win any awards for simplicity, but it gives you full control over modal positioning, styling, and behavior. Teams that need a polished, draggable workflow panel and can't wait on Retool's native roadmap have shipped this successfully in production.
The Bottom Line on Retool Modal Dragging
Retool draggable modal windows are coming — eventually. The feature is confirmed on the roadmap as part of a Modal component rebuild, but there's no public timeline. In the meantime, the Drawer component solves the problem for most use cases with zero custom code. For teams that need true free-form dragging, the Custom Component path works but requires dev time. If this is a hard requirement for your internal tool, factor that build time into your project scope now rather than waiting on a platform feature that has no confirmed ship date.
Ready to build?
We scope, design, and ship your Retool app — fast.