Live data from Hacker News

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

utopia.app

91–100 of 175 posts

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

#91

Earlier quoted context omitted.

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

Recently I started incorporating n8n, a workflow automation software, into my backend. Initially my use-cases were Zapier-like. But I realised it was more powerful as a visual program editor. For certain kinds of workflows, it is more intuitive to code and manipulate them using graphical nodes. Perhaps, we can have a similar text+graphical editor for such backend code as well.

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

#92
post #88

First, congrats on the tool! Have you thought about supporting multiple use-cases for each component? So for example the component might be showing a list. I want to test (and visually design) the use-case when the list is empty, then I want to switch and visually design when the list has one element, then when the list has a lot of elements.. Also it would be great that in those cases you could define not only the d…

It seems to already support that - see the section "Working with generated and conditional content"

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

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

Dreamweaver is still around actually.

https://www.adobe.com/products/dreamweaver.html

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

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

Patience. nocode and this both are the same. Utopia will evolve.

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

#97
post #31
post #23

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

I'm getting old, too *sigh. Technology stacks appear, and go right ahead reinventing dependency managers and repositories, IDEs with autocompletion, refactoring & WYSIWYG editors, a strong type system, comments and schema validation for configuration file formats (JSON)... Nice work though, looks really promising!

Something something smalltalk in the 80s something something. I'm old enough to remember Smalltalk systems running on Sun workstations being a thing. I still don't know if we've reached that level of development effectiveness with modern tools.

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

#98

Earlier quoted context omitted.

They fell out of favour because you couldn't realistically build a dynamic site that didn't generate spaghetti code. They were fine for static sites, but the moment you needed to make things _happen_ they become unmaintainable, unversioned messes.

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 was some support for css classes but it wasn't first class. You couldn't easily click to make a group of visual properties a style, name it (or choose a selector for it) and use it in other element somewhere on the page. The css classes are one thing, the other is 'cascading'. You couldn't do that conveniently either. So the moment you wanted to use the actual innovation that css brought to the table you had to pretty much drop into code and rarely ever come back to gui, which made visual part of FP and Dw obsolete.

And since you are dropping into editor you might want to drop into your favorite one where you have your own file tree, plugins and such. I think Utopia would make more sense if it could be run as a VSCode plugin.

To try to avoid that fate I think Utopia might consider some way of extracting those sliders on the right hand of UI out of specific component and into a shared group of styles. If you were working with CSS instead of css in js react-style the best idea would be to just mirror what css has, like named classes and complex selectors. And when you click a component you should let edit both inline component style and all the selectors that apply to it. It should basically mirror Chrome CSS inspector but in visual form with sliders and friendly names and other stuff. Since you are using React it would be best to mirror what React developers use to share styles between components. Some commentators here mentioned some libraries and solutions for sharing styles between components in React. But it doesn't look in Utopia it is as essential for survival since in React sharing styles by sharing whole components is a valid approach.

The other thing that made me abandon FP and Dw was that my HTML was generated server-side with a lot of PHP and parts of it kept in multiple files. You neatly address this using React and keeping it alive enough to populate the page you edit with state. React also enables composition of the page from components that can be edited separately which neatly resolves the issue of web page being spread over multiple files. I see that Utopia deals with editing components that include other component from different files neatly and it could be used flexibly to edit all the components however small and large and complex they are.

Other than that visual tools like that are great, both for people learning web development and people doing their work. I hope that Utopia thanks to your effort and power of React and its ecosystem will eventually becomes the standard way how people begin React project. Sort of like visual form of create-react-app.

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

#100

Earlier quoted context omitted.

is this how Framer[1] works? They have a react UI interactions. How do you see it? [1]framer.com

Framer, at least when I last tried it, was more of a prototyping tool. You could generally only one-way import React components into Framer, and then you could use Framer to assemble new components, but not in a way that allowed round-tripping. It's very possible to import production components into design tools, it's rare when a design tool can output production components again. Largely because production-ready vis…

Slight correction, though it’s too late to edit: I meant to say at the end, “it’s unclear if Utopia will follow the same standards and patterns that production code demands,”
Post reply on HN