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

131–140 of 175 posts

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

#131

Post by maltenuhn »

canada_dry wrote: post #27
dvt wrote: post #23

25 years later, and we're back to FrontPage. "Time is a flat circle."

> 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.

Utopia founder here. Yep, I loved the idea of Frontpage, and learnt so much, and yet - it sucked so much in practice. What kept us honest here was having the real-time feedback loop between design and code, and real-time two way editing. It really pushed us to "only make the smallest, surgical updates possible", and ultimately "make sure the editor actually understands the code"

We also are trying our best to preserve intent (eg if you resize a flexbox element, we don't set a width on it but default to flexBase, unless there's already a flexGrow on it).

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

#133

Post by maltenuhn »

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.

Utopia founder here. Totally with you on this, inline styles are at best a starting point. We already support changing the style target to `css` (styledC / emotion) and the various pseudo states. We also have primitive support for CSS classes.

We started with inline styles because typically that's the starting point when designing / prototyping. A lot of the features on our near-term roadmap are about then abstracting those: "take this element with styles and make it a component", "refactor this manually styled thing with the best matching layout component" etc.

Our design philosophy here is to help you do what you'd do in code (heck, you can even do it in code!), but not make broad assumptions about what that is or should be. Inline styles, helper components, utility css classes, styledComponents all have their place, and it's your job as a designer / engineer to decide on where to use what. What we can do is make those changes as fast as possible, while always showing you the resulting code. No black box, no "smart" decisions.

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

#134

Post by codethief »

sgrove wrote: post #67

Also 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]

I've only skimmed the video but it looks like your philosophy was a bit different, in that you were pursuing a visual programming / no-code approach?

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

#135

Post by codethief »

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.

> How would you hydrate the app with data

Never heard the word "hydrate" in this context before but it sounds very… appropriate :)

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

#136

Post by codethief »

leemcd56 wrote: post #75

So, say I were to attempt to swap out React for Vue 3, how difficult would it be? How tightly coupled is React?

Piggy-backing on this question, is it possible to use React alternatives like Preact or my own DIY React clone?

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

#137

Post by rheeseyb »

da39a3ee wrote: post #85

The page is completely broken for me with most links failing due to certificate errors: Failed to load resource: net::ERR_CERT_INVALID 4b99d2cfb81c64aed531.css:1 Failed to load resource: net::ERR_CERT_INVALID cdn.utopia.app/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js:1 etc Same in Chrome and Safari

Is this still the case for you? I don't believe we've seen this issue from anyone else, so I'm wondering if it was a blip or something more insidious

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

#139

Post by maltenuhn »

trhoad wrote: post #122
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…

> we need to make coding more enjoyable and figure out ways to make it more interactive. Honestly, this isn't the reason. The reason for the nocode movement is that businesses are sick of constantly trying to find technology talent for big salaries, and want to DIY. I cast no judgement on whether that's going to be a disaster or not, or for whom.

Business cost savings are a huge pull factor, for sure (if you counted all the Excel spreadsheet "apps" as software, some old school companies would be in the top 100 apps by usage, easy :)

I also wouldn't underestimate the push factor from the creative folks who are technical enough to "read" code / reason in abstract patterns, but can't write it. Fun definitely comes into that, as does a learning curve that's very shallow and near-infinite.

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

#140

Post by maltenuhn »

iddan wrote: post #132

I really hope the community will settle on one tool and invest in it. Something like that would make React development so much easier

Utopia founder here. Obviously this is a privilege we need to earn, but we made Utopia open source (MIT) for that very reason, and free for single users for the same.
Post reply on HN