Live data from Hacker News

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

utopia.app

41–50 of 175 posts

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

#41
post #30

Earlier quoted context omitted.

> 25 years later, and we're back to FrontPage. And... about bloody time IMHO. There's a reason tools like FrontPage and Flash were so popular - those tools made the internet available to millions of people who aren't into tedious coding.

I totally agree. I'm not sure why they fell out of popularity. I would've never learned HTML/CSS/JS had it not been for my 9-year-old self messing with FrontPage.

Also: Visual Basic and Delphi.

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

#42

We are actually going to start designing our Front end this weekend , about to do it from scratch. absoulatly going to put this to extensive test.

Fantastic news! We would love to hear your feedback in that case :)

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

#43
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…

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.

> 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

This is something I thought a lot about and really hope to see more in programming. Everything - every object, every concept, every program - has multiple representations, and in order to understand that thing you need to see it in multiple representations. But code is one representation, static text. Having other representations (like the laid-out website), especially that you can not just view but also edit, makes your project a lot easier to understand.

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

#44
post #7

I wonder if they've drawn inspiration from SwiftUI?

Funny you should mention this, we were actually working on it for a while before SwiftUI was revealed, but taking a slightly different approach at the time (the original approach was more inline with Unity, meaning an engine would be required to run the apps). We had reached the conclusion that that approach was wrong (primarily because of the lock in and how much of an uphill battle it would be for us to move to away from it), and had just started working on the new code-first approach when Apple dropped that at WWDC. Our jaws hit the floor because we knew we were on the right tracks then.

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

#45
post #30

Earlier quoted context omitted.

> 25 years later, and we're back to FrontPage. And... about bloody time IMHO. There's a reason tools like FrontPage and Flash were so popular - those tools made the internet available to millions of people who aren't into tedious coding.

I totally agree. I'm not sure why they fell out of popularity. I would've never learned HTML/CSS/JS had it not been for my 9-year-old self messing with FrontPage.

[deleted]

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

#46
post #6

Looks amazing, I will definitely check it out, any information in supporting other forms of styling, like CSS modules or styled components?

We had this question earlier in a reddit submission so copying and pasting the answer here (so that you don't think I'm being insincere!) - We fully support styledComponents, or any valid React for that matter. You can even use utility CSS classes in code. The design tool can edit some of these today already (e.g. you can pass in additional styles to a component instance). Better support for creating and managing styledComponents / Emotion is high on our roadmap so watch this space!

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

#48
post #2

Awesome to see it's open source.

Yeah we wanted to go the open source route from the beginning. The thinking was that it would help us build a community with meaningful relationships with our users (or at least the ones that get annoyed enough to log bugs or even contribute), but also most of our favourite tools are open source.

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

#49
I always wanted a tool like this, and wondered why it didn't already exist. Many others have tried this before (code + visual editor, albeit not necessarily React). I'm interested in what challenges the developers faced to make this and how they overcame them.

If this works well, it will be amazing and I'll almost definitely use it for my next webapp.

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

#50
post #12
post #10

Earlier quoted context omitted.

It's a browser based tool. I'm not sure what you mean by "Doesn't really look ready or supported out of the box for M1 Macbooks". JavaScript cannot target chip architectures, AFAIK.

So you didn't read the prerequisites and the troubleshooting sections first then? [0] [0] https://github.com/concrete-utopia/utopia#troubleshooting

There is indeed some messing around required, but some of our team are developing this using M1 macs
Post reply on HN