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

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.<p>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.<p>Instead we&#x27;re treating <i>the thing</i> as a one-way compile step. There&#x27;s no way to sync the DevTools in-memory changes we make to the DOM with the actual code.<p>The fact that Utopia allows the two things to be treated as one is a huge step towards making webdev more enjoyable.<p>And they’re following good steps… SwiftUI’s editor is very similar in this regard. Using the code as the main thing but having all kinds of interactable components around it that make writing code simpler with cool visual autocomplete widgets &amp; visual aids.<p>Before with direct DOM changes building something like this was impossible but now with the React paradigm is seems natural to have this sync between code and visuals.<p>Kudos to the team for pulling this off.

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.<p>I&#x27;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 mocks to React components feels so dated. Almost like those PSD2HTML websites of the early 2000s.<p>The market absolutely needs a product like this.

After five minutes of playing with it and failing to find it... where is the panel of components to drag and drop into the tree? Seems like the most basic functionality in an editor like this. Something that VB had in 1993. This should be something that is obvious and visible on a first glance.<p>Another issue I have with the UI is that a lot of elements are greyed out even though they remain interactive. The convention is that UI elements that are greyed out are not interactive due to the current state of the application (wrong mode, unmatched requisites etc). This application seems to violate that and I&#x27;m still baffled as to what greying out of UI elements means in in this app. If they aren&#x27;t disabled why are they greyed out?

25 years later, and we&#x27;re back to FrontPage. <i>&quot;Time is a flat circle.&quot;</i>

A tool I&#x27;ve experimenting with a lot recently is <a href="https:&#x2F;&#x2F;www.plasmic.app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.plasmic.app&#x2F;</a><p>It outputs React code as well. But the approach is more similar to Figma. You can create components with variants etc.<p>It can automatically sync changes to your local repo or create a pull request on GitHub.

I always wanted a tool like this, and wondered why it didn&#x27;t already exist. Many others have tried this before (code + visual editor, albeit not necessarily React). I&#x27;m interested in what challenges the developers faced to make this and how they overcame them.<p>If this works well, it will be amazing and I&#x27;ll almost definitely use it for my next webapp.

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

First, congrats on the tool!<p>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..<p>Also it would be great that in those cases you could define not only the data but also the surrounding canvas and browser properties. Test&amp;design for mobile, laptop, dark background, old browser, changed styles, etc.

This is really nice! Although I’d find it impractical to use, especially for existing projects, unless it also supported different CSS-in-JS libraries (e.g., Emotion, Styled Components), rather than inline styles with the `style` prop.<p>These other libraries offer a great deal of more support, such as targeting children and pseudo-elements (e.g., :hover).<p>Any plans&#x2F;timeline on adding support for other React-in-CSS libraries?

This is similar to what we tried (and failed) to achieve with Blocks UI[0] at Gatsby.<p>The critical piece almost all current-gen UI editing tools are missing is that there needs to be a sync between changes in the code and changes in the design. John Otander and Chris Biscardi built a complex system based on Babel to manage syncing visual changes to the code.<p>I wonder how Utopia solved this! How do you &quot;move&quot; the visual changes made in the editor to the code?<p>[0]: <a href="https:&#x2F;&#x2F;blocks-ui.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;blocks-ui.com&#x2F;</a>

I am very interested in this. I am a low-coder you could say. I have to start coding a front-end in React soon (and I have yet to learn React) so with all the overhead of learning React as well as fiddling with html, css etc, it feels like a really big task. I saw some visual builders for React , downloaded&#x2F;tried a couple but they had pretty big learning curves of their own so I didn&#x27;t bother taking it any further.<p>You guys seem to be addressing the right pain point in the right way.<p>I will definitely give this a go soon

I wonder if they&#x27;ve drawn inspiration from SwiftUI?

When you see things side-by-side you realise the React devs foisted XML back onto the world :D

Product Designer here. Is there a specific reason why tools&#x2F;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&#x27;s lost on me?

This is a really cool idea!<p>A bit of self-promotion: I&#x27;ve been building something similar but without the visual editing, integrating directly in your VS Code editor (and soon IntelliJ&#x2F;WebStorm too). See <a href="https:&#x2F;&#x2F;reactpreview.com" rel="nofollow">https:&#x2F;&#x2F;reactpreview.com</a> for more info.<p>Direct link to the latest beta for Visual Studio Code for HN friends: <a href="https:&#x2F;&#x2F;reactpreview.com&#x2F;download&#x2F;releases&#x2F;reactpreview-vscode-0.1.1.vsix" rel="nofollow">https:&#x2F;&#x2F;reactpreview.com&#x2F;download&#x2F;releases&#x2F;reactpreview-vsco...</a><p>(it&#x27;s very early days, this beta isn&#x27;t even a week old, so expect to find bugs)

How hard would this be to get it working with preact instead of react? I always liked that preact has a very easy &quot;no build tools&quot; route for creating simple frontends that you can simply open and run in a browser.

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

Wouldn&#x27;t this be better as a VS code plugin versus a web-based tool?

I was planning on building something similar. My first attempt involved trying to get grapesjs to work with react. This attempt was very cumbersome because grapesjs generated html, and I would try to manipulate the html into react.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;artf&#x2F;grapesjs" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;artf&#x2F;grapesjs</a><p>Later however, I discovered craft.js, which is basically a framework for creating systems similar to this (page&#x2F;component editors). Craft.js was inspired by grapesjs, but is specifically made for react.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;prevwong&#x2F;craft.js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;prevwong&#x2F;craft.js</a><p>Of course craft.js only solves the UI editor, not the code parsing&#x2F;generation part. Babel is an obvious choice for code generation&#x2F;manipulation, but I found its imperative approach unnecessarily complicated, so I built react-ast to enable declarative and composable code generation using react.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;clayrisser&#x2F;react-ast" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;clayrisser&#x2F;react-ast</a><p>The part I had not figured out was using the code as the source of truth for the editor and syncing it back. I definitely thought about it a lot, but postponed solving it since I had more pressing problems.<p>So, I have a lot of curiosity about this project. How does it work? And how does it stack up against a technology like craft.js? I noticed it’s not using craft.js, so I’m guessing the developers rolled their own equivalent.

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?

Like many others, I think this is <i>super</i> cool, and something that I think has been missing in the ecosystem for a long time.<p>I feel like the thing that would really make this over-the-top powerful is deep integration with a component library, either a company&#x27;s in-house one or an open-source library. It would allow for super fast UI prototyping that would also serve as scaffolding for the full-featured product.

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

Also worth looking at some of what was possible back in 2008 (and was sidetracked for unrelated reasons) - it&#x27;s great to see these ideas coming back in a viable way<p><a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=ouzAPLaFO7I" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=ouzAPLaFO7I</a> [280 North Atlas]

As soon as I resize the code menu this[0] happens. Everything shifts up and I cannot scroll it down or get it back to normal without refreshing.<p>[0]<a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;N82Zutz" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;N82Zutz</a>

We used to call this WYSIWYG editing, and it ushered in a whole generation of FE and flash devs. Editors like this went out of favor because, sadly, it can never quite keep up with the cutting edge.

This is so cool. I built something similar for my startup <a href="https:&#x2F;&#x2F;panakit.com" rel="nofollow">https:&#x2F;&#x2F;panakit.com</a>. It’s a tool de create blogs and I have a UI builder where users can customise the blog. The code is hidden away since it is aimed at non-tech people. My UI builder is way limited in functionality and only works for blogs and it was still quite a bit of work to build, I can’t even imagine the amount of work your tool required. How do you plan to make money out of it?

Awesome to see it&#x27;s open source.

Gret work!<p>I find it similar to Hadron App[0] that generates modern HTML and CSS. I was very excited about that tool. Unfortunately, the blog[1] and changelog[2] went silent last year.<p>[0] <a href="https:&#x2F;&#x2F;hadron.app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;hadron.app&#x2F;</a><p>[1] <a href="https:&#x2F;&#x2F;medium.com&#x2F;@HadronApp" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;@HadronApp</a><p>[2] <a href="https:&#x2F;&#x2F;hadron.app&#x2F;updates" rel="nofollow">https:&#x2F;&#x2F;hadron.app&#x2F;updates</a>

This looks very cool. I&#x27;m very new to JS&#x2F;webdev and I wonder if it could eventually be possible to use this with react-native (if you can&#x27;t already).

I have been searching for a technology like this for a long time. I have several specific features I’m searching for in a technology like this, and I’m curious how many of these features Utopia supports.<p>- Extendable component library and property panel so it can support custom component libraries and styling systems<p>- Native integration with vscode (maybe as an extension)<p>- Tailwind style editor and theme ui style editor - Full TypeScript support

Very cool! Using “follow me” mode is a neat way to see what you are editing in both the code and in the visual design.<p>We are working on something similar at Builder.io that utilizes jsx-lite to allow visual editing right alongside code. Feel free to check it out here: <a href="https:&#x2F;&#x2F;jsx-lite.builder.io&#x2F;?outputTab=react" rel="nofollow">https:&#x2F;&#x2F;jsx-lite.builder.io&#x2F;?outputTab=react</a>

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

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

I am curious if at any point functionality and power of these Web tools will ever come anywhere close to something like Delphi.<p>Nice work anyways.

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

So they invented react-aware FrontPage ? =)

Nice! I especially like that one can easily view and edit the code generated.<p>How long did it take you to arrive at this version?

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

This ticks so many boxes for me - I&#x27;ve been wanting a code-based visual editor for React since like forever.<p>Thanks! :)

I love that it feels somewhere between figma and xcode. Very approachable UI. super cool tool.

Great work on this and looks interesting at first glance and very happy to see this open source.<p>Doesn&#x27;t really look ready or supported out of the box for M1 Macbooks, unsurprisingly. Probably going to install this on my other machine to try it out instead.

Just wondering: how is it different from a live reload yarn run serve+IntelliJ +a browser?

Damn, I&#x27;d been meaning to build exactly this for ages but never got around to it. It&#x27;s always felt like a key missing piece, particularly after working with tools like Android&#x27;s preview tab. Major kudos to the team!

Pretty cool, congratulations. Any plans to support Vue in the future?

This is cool, the UI and preview reminds me of BB10&#x27;s IDE for qml... Still miss those days and I still don&#x27;t understand why we don&#x27;t have qml for the web.

<a href="https:&#x2F;&#x2F;journeyapps.com&#x2F;platform&#x2F;oxide&#x2F;" rel="nofollow">https:&#x2F;&#x2F;journeyapps.com&#x2F;platform&#x2F;oxide&#x2F;</a>

Is Vue support in the works? Or maybe even react native?

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.

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

Why is CSS &amp; HTML written in JS?

maybe this should be a VsCode extension that can work offline

Excellent, now do one for Angular! And Web Components!

This looks amazing, cant wait to try it out

Vue support would be great :)

maybe this should be a VSCode extension so that it works offline aswell

Very impressive!

please consider adding support for svelte!

How does Utopia compare with Dreamweaver or FrontPage?

Ctrl-f &quot;winforms&quot; - 0 results. Really?

this looks awesome! Great job and its a great team work.

So this is cool because it&#x27;s for React but I&#x27;m curious, this is not a new idea right? Lots of UI tools hold the source of the UI in code. For example the original C# in Visual Studio did this IIRC. I think Android Studio does this (well it edits XML which is used at runtime?). Swift?