[HN Gopher] Utopia, a visual design tool for React, with code as...
___________________________________________________________________
Utopia, a visual design tool for React, with code as the source of
truth
Author : rheeseyb
Score : 137 points
Date : 2021-06-15 14:42 UTC (8 hours ago)
(HTM) web link (utopia.app)
(TXT) w3m dump (utopia.app)
| tW4r wrote:
| Looks amazing, I will definitely check it out, any information in
| supporting other forms of styling, like CSS modules or styled
| components?
| codemonkey-zeta wrote:
| I had the same thought about styled components. In the meantime
| I'll just use emacs to convert the default style objects to
| styled components when I'm done using Utopia.
|
| I imagine I will use Utopia and then tailor the code afterwards
| with a code-editor to add my own idiosyncrasies. Still pretty
| darn efficient to design UIs this way honestly. I'm pretty
| stoked!
| n_morningstar26 wrote:
| 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.
| rheeseyb wrote:
| Fantastic news! We would love to hear your feedback in that
| case :)
| enahs-sf wrote:
| I love that it feels somewhere between figma and xcode. Very
| approachable UI. super cool tool.
| m12k wrote:
| I wonder if they've drawn inspiration from SwiftUI?
| rheeseyb wrote:
| 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.
| siralonso wrote:
| Yep, I was wondering the same - it reminds me a lot of the
| SwiftUI visual editor in Xcode. Very nicely done.
| rvz wrote:
| Great work on this and looks interesting at first glance and very
| happy to see this open source.
|
| Doesn'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.
| flixic wrote:
| 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.
| rvz wrote:
| So you didn't read the prerequisites and the troubleshooting
| sections first then? [0]
|
| [0] https://github.com/concrete-utopia/utopia#troubleshooting
| nkp57 wrote:
| Isn't that for development?
| mrkoreye wrote:
| 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.
|
| 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: https://jsx-
| lite.builder.io/?outputTab=react
| gervwyk wrote:
| 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.
| sktrdie wrote:
| 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_ as a one-way compile step.
| There 's no way to sync the DevTools in-memory changes we make to
| the DOM with the actual code.
|
| The fact that Utopia allows the two things to be treated as one
| is a huge step towards making webdev more enjoyable.
|
| 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 &
| visual aids.
|
| 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.
|
| Kudos to the team for pulling this off.
| rheeseyb wrote:
| 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.
| Jakobeha wrote:
| > 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.
| goatlover wrote:
| > 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.
|
| The Smalltalk way.
| lolive wrote:
| Just wondering: how is it different from a live reload yarn run
| serve+IntelliJ +a browser?
| nicoburns wrote:
| It lets you edit things inline like the browser dev tools. And
| drag them around like Figma.
| flixic wrote:
| The main thing is that you can edit visually, and changes are
| reflected in code. So it goes in both directions. Editor + Live
| Reload only goes in one direction.
| voldemort1968 wrote:
| Well, It is an interactive GUI for one...
| tmp_anon_22 wrote:
| Wouldn't this be better as a VS code plugin versus a web-based
| tool?
| Mavvie wrote:
| I agree, but is it even possible to effectively monetize a VS
| code plugin?
| dzsodzso wrote:
| E. G. https://wallabyjs.com/ does pretty well
| Aeolun wrote:
| Or a full electron app. Not sure I like the idea of uploading
| my code to test.
| jimsmart wrote:
| It seems to be open source - one might imagine it can be run
| as a local instance?
| dvt wrote:
| 25 years later, and we're back to FrontPage. _" Time is a flat
| circle."_
| rho4 wrote:
| 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!
| e12e wrote:
| I can't recall front-page doing script/interactivity much? This
| is more like Dreamweaver?
|
| Ed: it's strange that the lively-kernel.org approach (the
| Self/Smalltalk approach) never did seem to gain any real
| traction. Rather we get these odd half-meassures like source-
| maps, bundled js and what-not.
|
| Well, any small progress towards the 80s in the 20s is good i
| guess...
| canada_dry wrote:
| > 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.
| dvt wrote:
| 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.
| phist_mcgee wrote:
| 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.
| rho4 wrote:
| Also: Visual Basic and Delphi.
| [deleted]
| deft wrote:
| This is cool, the UI and preview reminds me of BB10's IDE for
| qml... Still miss those days and I still don't understand why we
| don't have qml for the web.
| teryyy wrote:
| Awesome to see it's open source.
| forkLding wrote:
| This looks amazing, cant wait to try it out
| jimsmart wrote:
| This ticks so many boxes for me - I've been wanting a code-based
| visual editor for React since like forever.
|
| Thanks! :)
| jarym wrote:
| When you see things side-by-side you realise the React devs
| foisted XML back onto the world :D
| clement75009 wrote:
| Very impressive!
| krmmalik wrote:
| 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/tried a couple
| but they had pretty big learning curves of their own so I didn't
| bother taking it any further.
|
| You guys seem to be addressing the right pain point in the right
| way.
|
| I will definitely give this a go soon
| 123jay7 wrote:
| If you are learning, you should stay far away from "visual
| builders". Unfortunately, these things will make you learn
| slower because they often prioritize visual design over sound,
| structural code. Learn the basics first. If you want to learn
| React, just download it, read the official docs and use
| `create-react-app`.
| bayjorix wrote:
| Thank you! I'm one of the developers working on Utopia.
|
| > I saw some visual builders for React , downloaded/tried a
| couple but they had pretty big learning curves of their own so
| I didn't bother taking it any further.
|
| This was our experience with existing low code or code
| generating design tools as well - you actually have to put a
| lot of time into learning how to use them, time you could spend
| on learning actual React.
|
| One of our guiding principles was that people who use Utopia
| should not need to learn anything that is proprietary to our
| platform.
___________________________________________________________________
(page generated 2021-06-15 23:00 UTC)