Hey, well done for getting something functional working and in the public eye.
> I made this because building UIs in a lexical medium like code is super annoying. I have to pre-render what I’m making in my head
I'd call the pre-rendering in your head a benefit, tbh. Also.. watching your vid, the property editor being "far away" from the selected item renders this tool much less useful to me than writing code. My eyesight's bad, so I can't keep the editor and the selected object in focus at the same time. The head & eye switching is probably more annoying to someone in my position than switching apps because at least I know I'm changing context when I switch apps (although I admit, I've put up with that for 20 years so perhaps I just don't notice).
> I was inspired by the developer console in chrome and safari since I end up editing css there because it’s ironically more convenient.
Conversely, I agree with this entirely. I don't like having to bob my head around the screen when I edit CSS in the browser, but it's still MUCH faster and intuitive than doing it in a separate code editor. I strongly dislike Tailwind and similar tools because they prevent this kind of coding/debugging. A similar tool got shown here on HN recently, and the conversation circled the idea that a visual tool to edit CSS is a) so handy but b) really hard to build because it's not programmatically obvious which file to make updates too... it's still easier to keep the file hierarchy in your head (even though that's quite hard). I guess focusing on React components lets you assume the CSS is "beside" the given component.
> I strongly dislike Tailwind and similar tools because they prevent this kind of coding/debugging
No they don't? I use the inspector all the time to figure out what values to set. Granted, I then translate those to Tailwind in my head, so there is an extra step compared to directly copying the style but that's a very small price to pay for all the advantages that I get from Tailwind.
What are the advantages, really? I used to use tailwind for my site, but then I realized I was essentially writing plain CSS in some DSL. Writing the plain CSS directly and using a few CSS variables for things like color and spacing simplified the whole thing greatly.
For personal projects it might be overkill depending on the scope. But if 2+ people are working on a constantly evolving system, shipping new features, and want consistency in the design system? It’s a solid foundation.
I mean… i know it’s hard. I’ve tried discussing patterns and our self-made “dialect”, and it’s a hard conversation. Using some 3rd party’s tooling makes it easier because you can all defer to the higher authority. But what if you actually agreed on some patterns and made that part of your process? To start with, it would feel like you were writing an overly prescriptive style guide and people would look at you funny… but what’s the difference between using using a 3rd party dialect and making up your own?
>> A similar tool got shown here on HN...a visual tool to edit CSS is a) so handy but b) really hard to build because it's not programmatically obvious which file to make updates too...
Can you point me to the post so that I can study more details?
As mentioned about, the idea of my http://liveditor.com is not to edit the css for you but points you to the line of the css file so that you can edit the styles in the code editor and see the result instantly.
> I made this because building UIs in a lexical medium like code is super annoying. I have to pre-render what I’m making in my head
I'd call the pre-rendering in your head a benefit, tbh. Also.. watching your vid, the property editor being "far away" from the selected item renders this tool much less useful to me than writing code. My eyesight's bad, so I can't keep the editor and the selected object in focus at the same time. The head & eye switching is probably more annoying to someone in my position than switching apps because at least I know I'm changing context when I switch apps (although I admit, I've put up with that for 20 years so perhaps I just don't notice).
> I was inspired by the developer console in chrome and safari since I end up editing css there because it’s ironically more convenient.
Conversely, I agree with this entirely. I don't like having to bob my head around the screen when I edit CSS in the browser, but it's still MUCH faster and intuitive than doing it in a separate code editor. I strongly dislike Tailwind and similar tools because they prevent this kind of coding/debugging. A similar tool got shown here on HN recently, and the conversation circled the idea that a visual tool to edit CSS is a) so handy but b) really hard to build because it's not programmatically obvious which file to make updates too... it's still easier to keep the file hierarchy in your head (even though that's quite hard). I guess focusing on React components lets you assume the CSS is "beside" the given component.