I am curious if at any point functionality and power of these Web tools will ever come anywhere close to something like Delphi. Nice work anyways.
You beat me to it. Good old Delphi ... I still consider UX in Delphi unparalleled.
Utopia, a visual design tool for React, with code as the source of truth
61–70 of 175 posts
Re: Utopia, a visual design tool for React, with code as the source of truth
#62Pretty cool, congratulations. Any plans to support Vue in the future?
Re: Utopia, a visual design tool for React, with code as the source of truth
#63Is Vue support in the works? Or maybe even react native?
Re: Utopia, a visual design tool for React, with code as the source of truth
#64This is really nice! Although I’d find it impractical to use, especially for existing projects, unless it also supported different CSS-in-JS libraries (e.g., Emotion, Styled Components), rather than inline styles with the `style` prop.
These other libraries offer a great deal of more support, such as targeting children and pseudo-elements (e.g., :hover).
Any plans/timeline on adding support for other React-in-CSS libraries?
Re: Utopia, a visual design tool for React, with code as the source of truth
#65How hard would this be to get it working with preact instead of react? I always liked that preact has a very easy "no build tools" route for creating simple frontends that you can simply open and run in a browser.
Re: Utopia, a visual design tool for React, with code as the source of truth
#66Earlier quoted context omitted.
I had the same thought about styled components. In the meantime I'll just use emacs to convert the default style objects to styled components when I'm done using Utopia. I imagine I will use Utopia and then tailor the code afterwards with a code-editor to add my own idiosyncrasies. Still pretty darn efficient to design UIs this way honestly. I'm pretty stoked!
If it doesn’t support styled-components, how does this work with real React components?
[deleted]
Re: Utopia, a visual design tool for React, with code as the source of truth
#67Also worth looking at some of what was possible back in 2008 (and was sidetracked for unrelated reasons) - it's great to see these ideas coming back in a viable way
https://www.youtube.com/watch?v=ouzAPLaFO7I [280 North Atlas]
Re: Utopia, a visual design tool for React, with code as the source of truth
#68As soon as I resize the code menu this[0] happens. Everything shifts up and I cannot scroll it down or get it back to normal without refreshing. [0] https://imgur.com/a/N82Zutz
Hmmm that's incredibly frustrating. I'm trying to reproduce this but failing. Are you able to do this every time? If so is there any chance you could take a screen recording please to help us debug it?
First I have to apologize. I hadn't upgraded chrome. After updating it did not happen again on chrome. It does happen on firefox[0], and I do realize that you've stated your app works best in chrome.
Lastly, thanks for making this. It looks really cool.
Re: Utopia, a visual design tool for React, with code as the source of truth
#69To me this editor gets it right in the sense that we don’t need to get rid of code as the “nocode” movement is trying. Instead we need to make coding more enjoyable and figure out ways to make it more interactive. One specific thing Utopia addresses to me is the need for the code and the actual thing to be treated more as one single interactable component and not two separate things. Instead we're treating the thing…
Thank you! This is pretty much exactly the ethos behind Utopia - that there is ultimately some underlying thing that you want to make changes to, but you often want to be able to make those changes from different viewpoints (or in different contexts) depending on the types of changes you want to make. The React paradigm, especially with functional components, is absolutely right for this kind of a tool.
is this how Framer[1] works? They have a reactUI interactions. How do you see it?
[1]framer.com
Re: Utopia, a visual design tool for React, with code as the source of truth
#70Product designer here. I just spent the past few hours fine-tuning some visual details in our Figma component library. Now I need to file tickets for each change and work with our frontend developers to make sure the updated Figma details get properly mapped over to React.
I've grown numb to the friction, but I think this Utopia demo just reset my pain tolerance. Going back to manually mapping designs from Figma mocks to React components feels so dated. Almost like those PSD2HTML websites of the early 2000s.
The market absolutely needs a product like this.