UI devtools

📸 @uidevtools new ux idea: resize margin with mouse?

📸 @uidevtools identify svg elements and show additional properties - stroke + fill setting stroke color as currentColor means it will take the parent's color property :)

📸 @uidevtools sometimes you start with a div/span and then change your mind, especially for proper semantics 😇 ui-devtools supports changing classnames, inner text and now tagName

📸 @uidevtools added some good old text editing, tap T on an element with text .

📸 @uidevtools tiny improvement, added a way to toggle border on each side because sometimes you only need border-bottom (the instant code change is very satisfying 😇)

pulled a useful snippet out from @uidevtools to open source it → Click a component while holding Alt/option to open it's source code in @code github.com/siddharthkp/babel…

📸 @uidevtools holy shit, this actually worked??? convert conditional expression to a template expression to make room for the "always" class

📸 @uidevtools first attempt at conditional expressions, opened up pandora's box

👀 @uidevtools accidentally made the transforms super super fast! should change the unit to milliseconds now! before and after:

📸 @uidevtools completely changed my mind about showing scale and margins. when you're resizing, you want the tool to get out of your way so you can see how Your ui looks

📸 @uidevtools warning for inaccessible text contrast + hints for colors with enough contrast AA/AAA

📸 @uidevtools showing color number on hover because I like to know which value i'm picking

📸 @uidevtools made a tiny breakthrough with @vuejs, vue support coming soon 🎉

I'm surprised how well this worked out! animating svgs with raw tailwind

📷 @uidevtools Exploring keyboard shortcuts to improve the workflow a bit more. Shift > mb > down down down > Enter not sold on the ux yet. experiment shipped to sponsors.

📷 @uidevtools performance improvements to the background sync, it now saves changes back to source super fast! before and after: 500ms → 50ms

so gratifying to build for the folks using @uidevtools - the feedback has been deep, constructive and wholesome! 50% towards sustainability goal

📷 @uidevtools it's impossible to visually select a container element that has no space before it's children 😅 added a breadcrumb to jump to the parent element quickly, has been really handy!

wip, behind the curtain 04 let's talk about money and open source I don't want to put @uidevtools behind a license because I think it has the potential to be useful beyond the stack I'm using right now (React + Tailwind) but, 1/7

wip, behind the curtain 03 we've seen a bunch of web ui builders pop up in the last couple of years and it's really exciting to see how things are moving the direction with @uidevtools is a tiny bit different, it's meant to add on to your existing application/workflow 1/4