Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Utopia, a visual design tool for React, with code as the source of truth

utopia.app

Post reply on HN
Print view View original

141–150 of 175 posts

Re: Utopia, a visual design tool for React, with code as the source of truth

#141

Post by clemens_m_12 »

cdaringe wrote: post #109
AbolTabol wrote: post #73

Product Designer here. Is there a specific reason why tools/demos(Framer comes to mind) such as these are tied to React? Is it just because of the popularity of React these days or is there a technical reason for it that's lost on me?

React/JSX converts what was previously DSLs nested within DSLs into code. This is why dev tools like this oft use React, or more specifically JSX. It complements the HTML DSL, but in a coding context. Most other similar browser tools use templating mechanisms with DSLs for embedded logic. For this reason, React will have jQuery like longevity, and people will continue to design for it. It's easier to code for code th…

As someone who worked with React, Angular and Vue professionally the last 6 years I cannot agree.

React will be around for a while because of its popularity. It has nothing to do with JSX. Acutally, Vue, especially Vue 3 with the compositiona API is much easier to work with than React. You could use JSX with Vue as well. React has quite some leaky abstractions, which makes it more hard to master than Vue or Svelte. React seems easy, but it is not.

Re: Utopia, a visual design tool for React, with code as the source of truth

#142

Post by Kiro »

deanclatworthy wrote: post #104

Big no for me if styles are injected as inline styles. As a developer I don't want to work with that generated code. At the very least look at using styled components or generate accompanying css module file.

What's the problem with inline styles? Just curious. Trying to understand what the difference between styled components and inline styles actually is in this case.

Re: Utopia, a visual design tool for React, with code as the source of truth

#143

Post by rheeseyb »

throwaway-42808 wrote: post #72
tppiotrowski wrote: post #71

Earlier quoted context omitted.

This. From the video it’s hard to see if you can declare and reuse styles or if all styles are inline and need to be repeatedly applied to identical components. Either way, this is really awesome. Huge congrats on the release. It reminds me of one of my fav talks which I can’t find right now but it’s a guy that codes up a Mario clone while toggling back and forth between the game and the code and making changes in th…

Probably Bret Victor - "Inventing on Principle" (2012) - https://www.youtube.com/watch?v=PUv66718DII

Bret Victor is our idol! I didn't even have to click the video to know exactly which one you were talking about :)

Re: Utopia, a visual design tool for React, with code as the source of truth

#144

Post by rheeseyb »

kyawzazaw wrote: post #83
bayjorix wrote: post #29

Earlier quoted context omitted.

Thank you! I'm one of the developers working on Utopia. > I saw some visual builders for React , downloaded/tried a couple but they had pretty big learning curves of their own so I didn't bother taking it any further. This was our experience with existing low code or code generating design tools as well – you actually have to put a lot of time into learning how to use them, time you could spend on learning actual Rea…

I am student and I think my instructors who teach a Software Engineering class would be very very interested. We typically have non-CS majors in that class and it can be a bit of a learning curve.

Helping people learn to code is something that we're very keen to achieve with Utopia.

Re: Utopia, a visual design tool for React, with code as the source of truth

#145

Post by rheeseyb »

_f9cu wrote: post #96

How does it detect source element when hovered on preview? Preview would have a dynamic ID that maps to the source JSX.

At the very high level, yeah that's pretty much what's happening. We generate IDs that we map to each of the elements statically and that we inject into the DOM so that we can capture metadata about the element. We're currently writing an in-depth explanation of how this all works, which will be uploaded on our blog in the very near future.

Re: Utopia, a visual design tool for React, with code as the source of truth

#146

Post by 13daug »

sktrdie wrote: post #9

To 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…

I was lost but Since I've read along this SwiftUI’s editor is very similar in this regard. Using the code things get well

Re: Utopia, a visual design tool for React, with code as the source of truth

#147

Post by fwouts »

This is a really cool idea!

A bit of self-promotion: I've been building something similar but without the visual editing, integrating directly in your VS Code editor (and soon IntelliJ/WebStorm too). See https://reactpreview.com for more info.

Direct link to the latest beta for Visual Studio Code for HN friends: https://reactpreview.com/download/releases/reactpreview-vsco...

(it's very early days, this beta isn't even a week old, so expect to find bugs)

Re: Utopia, a visual design tool for React, with code as the source of truth

#148

Post by maltenuhn »

rattray wrote: post #78

What I really want is a way to sync back changes made in the inspector to my css-in-js code. Does Chrome offer hooks that a library could use to accomplish this?

If you're referring to the Chrome devtools inspector - unfortunately, that's a no. To start with, no such hooks are available. Additionally, the truly hard bit is figuring out what code the resulting HTML maps to, especially when there's lists, conditional content, and nested components involved.

Re: Utopia, a visual design tool for React, with code as the source of truth

#150

Post by maltenuhn »

gervwyk wrote: post #20

This looks promising! I’ve been waiting for something like this. Will give it a try. How would you hydrate the app with data while you dev? Feels like adding some storybook like features to test components could be useful.

(founder here) You totally can do this, we use it like that all the time. "Dev" edits the running application or component, not a scaffold - so if you've got {list.map(x => {x}} you can select each card and it'll map it back to the instance inside the map. Same with ternaries etc.
Post reply on HN