Ability to drag the devtools icon

[toto1384]

Even though the icon is small and in the corner of the screen, it would be nice if we had the ability to drag it whenever we want.

[TkDodo]

clicking the button opens the devtools, so how would that work? Having the same icon support click and drag doesn't sound too good...

i think you can already specify where the icon should sit (4 corners of the screen)

[toto1384]

You drag it wherever you want on the screen and when you press it, it should open the dev tools just as it did before. It's dx at the end of the day. Maybe you have a part of the UI in the corner of the screen and you don't want to go to the code and specify the position just to see it

[TkDodo]

if you know how to do this in an accessible way and so that there is a clear distinction between click and press, feel free to PR it. I think dnd-kit is the best tool to do any kind of drag and drop functionality: https://dndkit.com/

[toto1384]

I will consider it, thanks for the suggestion

[fum4]

I would like to tackle this feature request. I’ve come across a scenario where my app displays a different button or action in every corner of the screen, depending on the active page. These will get covered by the devtools button as long as its position is static.

@TkDodo I have a small POC in place for this, but I think you might want to tackle the following topics first:

1. Position Persistence: Should the button's position be saved and restored between page reloads (e.g., in localStorage)? Or should it reset to the default position each time?

2. Opt-in vs Default: Should draggable functionality be:

• Always enabled?
• Opt-in via a new prop (e.g., draggable={true})?

[DamianOsipiuk]

Why not just use DevtoolsPanel and position it however you want, with whatever trigger you want?

Also if you are using multiple tanstack libraries you might want to consider switching to TanStack
Devtools.
You can also add your own plugins there and have a singular devtools panel for everything you need.