CryingPotato

Building DevTools-Like UI in React #

Dec 30

I’ve been working on a new DevTools experience I’m calling Tailor. I was inspired by Tailscan and wanted to understand how I’d build a clone of it as a starting point.

• The most annoying interaction problem I faced was when/ how to activate and deactivate DevTools. Tailscan does this super well, you have a button to activate/ deactivate DevTools. When you click on an element the toolbar remains but the hover behaviour is disabled. When you click anywhere outside the toolbar again you reactivate the hover behavior.
• Make the toolbar follow the cursor for a more natural feeling placement instead of making it relative to the element you place.
• When you add and remove mouseover listeners for document inside a React component, make sure you wrap the callback function you pass in inside a useCallback. Otherwise React creates new functions each time the component re-renders and you won’t properly remove the event listeners.
• pointer-events: none is your best friend for the overlay/ toolbar UI you build.
• css-box-model is a great package to do math for you.