Live data from Hacker News

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

utopia.app

121–130 of 175 posts

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

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

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

#123
post #105
post #102

Earlier quoted context omitted.

Delphi gang here! Encountered Delphi as a kid by accident, and playing with that first form was a life changing event for me: realizing that I can make something new, real, tangible, that I'm in control. Coming from a non-tech family/background, this was big for me, I don't think I'd have gone into tech if not for it.

As a kid (and adult) you need to see some immediate tangible result of your virtual labor.

That's absolutely true for sure, and I'd go so far as to argue that it's one of (if not the) primary driving forces behind development tooling decisions. Whereas some changes are well suited to e.g. unit testing (and where a passing suite of tests provides that instant feedback), when working on the design or interactions of an interface it's very important to actually "see" and/or play with the result of each minor tweak, so the faster you can make that loop the more pleasurable the development experience will be.

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

#124

Looks nice! It seems that any "logic" (conditionals, iterators, etc) in the components will prevent the component (and their children) from being inspectable. Is the intent to keep it "no-code" in this respect (i.e. effectively a visual JSX editor), or will you be adding the ability to inspect more "dynamic" components to make it useful for app development?

Our goal isn't a no-code tool, but rather an editor that provides the tools for both developers and designers. We're iteratively improving the level of complexity of code that we can fully parse and expose to the rest of the editor, so you can expect these kinds of cases to become fewer and far between over time. If you do have specific cases that you come across and are interested in following the development or jus…

Are you planning to expose the JSX editing capabilities as a library, so that it could be used for e.g. non-web-UI editing?

I've been working on a React/JSX wrapper for OpenJSCAD (a solid CAD library), where the "viewer" (that shows the rendered model) offers simple interactivity that is decoupeled from the code. It would be amazing if that could be extended to allow for editing the code when you interact with parts of the model in the viewer (as you would do in traditional CAD programs).

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

#128

Earlier quoted context omitted.

Right. We gave a lot of thought (and iterations...) to why those tools felt like they are holding developers back instead of making them faster, and why were they ultimately abandoned. We believe the answer is that one-way code generation is a trap: if you export code from a tool which cannot be edited by a human and then read back into the tool, it is going to end up being edited by a human anyways, but the tool wil…

I think tools like Dreamweaver and FrontPage ultimately failed due to many factors. By respecting the existing code you address one. Other is that CSS can be shared between unrelated elements and cascading. FP and Dw worked pretty well for HTML where the looks of the elements were determined by their properties. Once CSS showed up they tried to adjust by encoding same things in inline styles of the elements. There wa…

Thank you for taking the time to write this!

Wrt the VS Code plugin, it was an idea we were toying with. Ultimately we decided to go with a standalone editor because we didn't want to limit our market and run the risks involved with coupling our existence to them. That being said, a VS Code plugin is absolutely in our future and something we would want.

You're absolutely right that by targeting React we are mitigating some of those issues you've mentioned, but they are still issues that we still need to address, so we do need to adjust or introduce further tooling. All of these things are on our roadmap, but we're a small team so it's a case of prioritising, which is where comments like this come in to play as they help us add weight to those priorities.

We've got a long way to go, but thoughtful and constructive comments like these help us immensely along the way :)

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

#129
post #70

Product 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 mock…

Utopia Founder here, also a designer. I agree, and for me this cuts both ways - seeing the changes I make in a real UI makes it so much faster to understand edge cases. Not to mention that I used to inevitably re-create production components in my designs. And sure, there are tools for that, but often they just add overhead.

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

#130

Earlier quoted context omitted.

I think tools like Dreamweaver and FrontPage ultimately failed due to many factors. By respecting the existing code you address one. Other is that CSS can be shared between unrelated elements and cascading. FP and Dw worked pretty well for HTML where the looks of the elements were determined by their properties. Once CSS showed up they tried to adjust by encoding same things in inline styles of the elements. There wa…

Thank you for taking the time to write this! Wrt the VS Code plugin, it was an idea we were toying with. Ultimately we decided to go with a standalone editor because we didn't want to limit our market and run the risks involved with coupling our existence to them. That being said, a VS Code plugin is absolutely in our future and something we would want. You're absolutely right that by targeting React we are mitigatin…

It's understandable that you started with standalone for the control and independence. I'm happy to hear that you have VSCode plugin planned. I wish you all the best and I see massive potential for your project to become essential part of visual IDE for the web.
Post reply on HN