Guides

Retool Draggable Modal Windows: What's Possible Today

OTC Team··4 min read

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 Drawer component instead of a modal. Retool's Drawer slides 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 Container component with a visibility condition tied to a variable or 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's Custom Component allows 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's model API. This is the most flexible option but requires frontend development effort.
  • Use an iFrame component with a draggable UI. If your draggable interface lives on an external page, you can embed it via iFrame and use postMessage to 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 Component to 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 div with a draggable header bar. Add CSS to position it with position: absolute so it can move freely within the component bounds.
  • Wire up mousedown, mousemove, and mouseup JavaScript events on the header to track and update the modal's left and top CSS 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 Button or 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.

Ready to ship your first tool?