This is a really cool idea. I'm not super into React, so take it with a grain of salt when i say I'm surprised I haven't seen something like this sooner. :)
Show HN: A Visual IDE for React
11–20 of 148 posts
Re: Show HN: A Visual IDE for React
#12Is it really that tough to Cmd+Tab then Cmd+R?
All jokes aside, good job. Creating tools to solve problems is always fun.
Re: Show HN: A Visual IDE for React
#13Great idea. I think UI/UX designers would love a tool like this. Especially if they could import React components made by the development department.
Re: Show HN: A Visual IDE for React
#14Great idea. I think UI/UX designers would love a tool like this. Especially if they could import React components made by the development department.
It is not a unique concept, but there's absolutely room for another implementation/offering.
Some of the more popular existing ones Framer-X (funny landing page copy claiming it is entirely unique) and Modulz:
Re: Show HN: A Visual IDE for React
#15This isn't shown in the video, but does your editor comes with pre-set "styles" or is it something that you would import yourself ?
My experience is that typing the code for components nesting inside components is not really the big hurdle when designing React views ; rather, it's getting the "layout" part of the css right.
The big value in the video seems to be the simple fact that you have a "Form" parent component where adding a child gives it roughly the right look.
But maybe I have Stokholm syndrome, and forgot how simple it was to hook up in GUI in VB3 back in the days !
Nice work !
Re: Show HN: A Visual IDE for React
#16Thanks for submitting this it was interesting to see. Is this an old project because the video example uses React Classes rather than functional components and hooks.
Ah I used React classes out of habit—will update the exporter to output hooks instead. Thanks for the heads up!
Since you already have an exporter that produces class-style React components, it seems like it would be nice to have the option of class or functional components. I've worked on projects with strictly class-based components, strictly functional components, and a mix of both. Would certainly be nice to be able to select between the two flavours of exported components, and would make it easier to sell the decision to use Aspect-designed components in more codebases!
(Our reasons for preferring one flavour or another usually depends on some combination of legacy-ness of the project (older -> prefer class components for consistency), complexity (simpler -> prefer functional components), and experience of the team (more junior -> prefer functional). YMMV, etc.)
Re: Show HN: A Visual IDE for React
#17It reminds me of Visual Basic or early versions of Dreamweaver to an extent (which is a huge compliment). That enabled a massive number of people to make apps who wouldn't otherwise have been able to, but after using it for a long time most users abandon the visual UI builder in favor of the code editor.
If you're a visually-driven person then this looks ace, but I think in the opposite way to the narrator. Rather than finding writing the code directly annoying and preferring an interactive way of editing components, I find visual interfaces to code really hard to work with. I suspect I think in abstractions too much for it to work for me.
Re: Show HN: A Visual IDE for React
#18Look promising, but just logged in and poked around and couldn't figure out how to get elements on the canvas. Or do much of anything. Some of the interaction design seems quite odd and difficult to use (eg. all the sidebar accordions open on hover rather than on click. And clicking on elements in the "insert" dropdown doesn't insert them.).
Apologies for jumping to critical feedback! Rough prototypes are rough for good reason ;) Glad to see more of these GUI builders popping up and think this is a worthwhile avenue to explore. But might be worth spending a bit of time looking at interface design best practices. And/or getting a designer to come advise on the project.
Re: Show HN: A Visual IDE for React
#19It reminds me of Visual Basic or early versions of Dreamweaver to an extent (which is a huge compliment). That enabled a massive number of people to make apps who wouldn't otherwise have been able to, but after using it for a long time most users abandon the visual UI builder in favor of the code editor. If you're a visually-driven person then this looks ace, but I think in the opposite way to the narrator. Rather th…
This, very much so. One of the (few) things I genuinely love about modern frontend web development is the speed of the edit loop with React and hot reloading. Look, I'm an engineer; _writing code_ is my jam, not clicking pretty widgets in a (nice!) UI. It's genuinely faster for me to turn an image in my head into a functioning component by just writing out Typescript or CSS; the abstractions are less leaky, and the escape hatches are literally at my fingertips rather than requiring an extra jump or two.
Put another way: if I have to take my hands off the keyboard I've already lost.
Re: Show HN: A Visual IDE for React
#20I'm a bit fed up with those "IDE" for web attempts.
Every 9 Month or so , we get a new attempt at fixing Web Dev lack of Visual Feedback and productivity issues.
The typical coder behind this type of project get "Mental Fatigue/ Coder Exhaust" after 6 Months as they generally ignore the complexity behind building such product and end up abandoning the project....
There is a google graveyard , but we should also build an "Front IDE / Webviewer" graveyard.
The only one I recall without googling anything : Deco[0] and PreVue[1]
[0]https://www.decoide.org/ [1]https://github.com/open-source-labs/PreVue
HN could you complete my comment with others "Front IDE / Webwiever" that have been abandoned ?
Pretty sure there is more than a dozen.