12 ms·

Show HN: A Visual IDE for React

479 points by tscepo 4y ago

I made this because building UIs in a lexical medium like code is super annoying. I have to pre-render what I’m making in my head, and then jump between the browser and IDE to test. I was inspired by the developer console in chrome and safari since I end up editing css there because it’s ironically more convenient. Hope it’s useful!

sktrdie 4y ago
https://utopia.app/ https://utopia.app/ also does this
- hobofan 4y ago
  Utopia doesn't "also" do this, they are doing something far more useful (bidirectional visual editing of the code) that could actually end up making its way into many people's workflow (it's just a shame that they don't support Typescript yet). There are plenty of drag and drop visual React builders, but as long as they follow an unidirectional export-once workflow, they are about as useful as a Figma mockup.
- BillSaysThis 4y ago
  Can I bring my own component library? And CSS variable files?
lstamour 4y ago
Just a tip for the demo video - check out Descript.com for an easy way to edit out the “ums” in videos and screen recordings. I use it regularly to tighten up a recording quickly. I likely wouldn’t edit or make videos in the first place if I didn’t have Descript. No relationship to disclose, just a happy customer.
deleted 4y ago
[deleted]
chunkyslink 4y ago
Thanks 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.
- tscepo 4y ago
  Ah I used React classes out of habit—will update the exporter to output hooks instead. Thanks for the heads up!
  - Doches 4y ago
    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.)
your_challenger 4y ago
The video doesn't work { "error": { "code": 402, "message": "Quota has been exceeded for this project. Please visit the Firebase pricing page to learn more." } }
- your_challenger 4y ago
  Works now
- tscepo 4y ago
  Ah thanks for the heads up, just fixed!
- epberry 4y ago
  Best kind of error message.
bmitc 4y ago
Seems interesting. As a note, I am not able to view the video on an iPad. (Not complaining. Just FYI.)
lordofgibbons 4y ago
I'm seeing a MIME type not supported for the video on Android Firefox
_steady 4y ago
As someone who doesn't like to watch videos, i'd have loved some text content on this or any page explaining the proposition
- tscepo 4y ago
  Got it, added some explanatory copy. Accompanying image examples following soon.
DoctorOW 4y ago
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. :)
- tscepo 4y ago
  Thanks!
throwntoday 4y ago
Is it really that tough to Cmd+Tab then Cmd+R? All jokes aside, good job. Creating tools to solve problems is always fun.
- Xevi 4y ago
  I even have the browser and code on the monitor at the same time. And with pretty much all modern web frameworks you have a dev server that automatically does hot module replacement, so you instantly see your changes without reloading anything yourself.
  - nkozyra 4y ago
    I've never seen a hot reload that worked fast enough to not be annoying. React does it all quickly when all it's re processing is css but anything js related and it seems not to be able to treeshake down to bare minimum updates. We're talking 750ms to 1.5s, and I admit it's still a marvel compared to things I used to have to deal with, but it's still enough to feel cludgy. Flutter is another example of this. It's not _slow_ but if I'm sitting there waiting for even a bit I'm less likely to use the feature as an incremental tool rather than batch a bunch of things before looking or tabbing over.
    - randomsearch 4y ago
      > I've never seen a hot reload that worked fast enough to not be annoying. Then you, my friend, have never used Vite.
    - dmix 4y ago
      I use a vue dev server daily (both with webpack previously and now with the way faster vite) and it's pretty much instant. These projects only recompile the code that changes, then via chunking the browser only reloads a tiny specific .js file that contained that one component matching the vue-route, so usually 10-30kb refresh (and it loads about ~10x small .js files per page), which happens before I can tab back or notice when widescreened. Previously when I used the slower Webpack without chunking it started to take time when the project grew large. But that was long ago (3 years ago?).
elanning 4y ago
Great idea. I think UI/UX designers would love a tool like this. Especially if they could import React components made by the development department.
- krono 4y ago
  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: https://designcode.io/framer-x https://designcode.io/framer-x https://www.modulz.app/ https://www.modulz.app/
  - schkolne 4y ago
    Here are some other exciting products in the space: https://www.plasmic.app/ https://www.plasmic.app/ https://www.builder.io/ https://www.builder.io/ https://clutch.io/ https://clutch.io/ https://builderx.io/ https://builderx.io/ https://dynaboard.com/ https://dynaboard.com/ Each one has a slightly different take on the problem, and some of these are turning out to be quite useful for teams. I'm very curious to see how things will shape up. I find Aspect to be particularly beautiful, a nice clean UI great work!
- dgb23 4y ago
  If the components are headless. Otherwise it makes more sense to do it the other way around. Designers write components that just render stuff, which then gets wired up by devs to be state/effectful.
  - danielvaughn 4y ago
    This is what I’m doing. I’ve been building a “programming language” for UI designers. The idea is that they just describe the visual behavior, and then devs can wire it up with business logic.
phtrivier 4y ago
This 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 !
- tscepo 4y ago
  I set up super minimal preset styling, and yeah I think basic css import makes sense as a next feature. Hoping to avoid overly complex style inheritance. I 100% agree, getting layout css right is the most annoying part of styling. I’m inspired by Apple’s stack views and Figma’s auto layout which make it a lot more intuitive so I think those can be the first “Aspect components” that will come out on next release. Thanks for the feedback!
  - dgritsko 4y ago
    Tailwind support would be awesome. I often use Tailwind Play (https://play.tailwindcss.com/ https://play.tailwindcss.com/) when I'm "sketching out" the look of a new component since it's so quick to iterate and get immediate visual feedback, as you well know.
- danielvaughn 4y ago
  I've been wondering whether it would be possible to leverage ML/AI to "infer" a layout from a visual mockup. So like if two elements have the same X position, they're assumed to be left aligned with one another. If three elements are the same width and sit side-by-side with the same distance between them, they're assumed to be a 3-grid column. Etc etc.
  - tscepo 4y ago
    We're actually in review on the Figma plugin store for exactly this. Should be out soon.
onion2k 4y ago
It 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.
- Doches 4y ago
  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.
  - deleted 4y ago
    [deleted]
  - diatone 4y ago
    Playing devil’s advocate here: if this graphical interface could be manipulated without mouse clicks, you’re still interested? Alternatively: if there were some high bandwidth, low latency feedback loop between you and this app, an order of magnitude faster than how you currently iterate on working with React, you’d consider it?
Mappleton 4y ago
Look 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.
- tscepo 4y ago
  I really appreciate the feedback, thanks! Talking to designer friends and updating UX as we speak, based on this.
echopom 4y ago
I'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/ https://www.decoide.org/ [1]https://github.com/open-source-labs/PreVue 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.
- lfkdev 4y ago
  Where exactly is now your problem with IDE's for webs?
- hutzlibu 4y ago
  Do you also have concrete criticism of this project or just generic general complaints about the topic? Yes, there are many attempts trying to fix the problem, that designing requires coding and yes, that is a very, very hard problem to do right. But just shitting on something because you feel bitter about the topic (or whatever your motivation is) probably won't lead to anything interesting.
  - polydevil 4y ago
    Well, is says that the website itself was build by the tool. Non-semantic tags, divs instead of links, buttons instead of links, a lot of inline styles (which is a bad practice), deep nesting. So inline styles will make caching css impossible, so high load times, not good for performance. Deep nesting makes the problem even worse. So the result is a slow bloated inaccessible code, but the result may look ok. If all you want is a pretty picture - than yeah, it is a great tool. I prefer this approach - https://github.com/seek-oss/playroom https://github.com/seek-oss/playroom Just create your components and add them to the sandbox and allow your designers to play with them.
  - 4y ago
varispeed 4y ago
These visual tools never clicked with me. There is always a point that you need to code something "manually" and then switching back and forth is just tedious (and if you are lucky that your code doesn't break the tool) to the point it makes no sense to use such a visual tool. Maybe this is different though. I wish it was possible to try without having to set up an account.
bananapear 4y ago
Would be nice to be able to try it out or see a demo without having to create an account and log in
the_other 4y ago
Hey, well done for getting something functional working and in the public eye. > I made this because building UIs in a lexical medium like code is super annoying. I have to pre-render what I’m making in my head I'd call the pre-rendering in your head a benefit, tbh. Also.. watching your vid, the property editor being "far away" from the selected item renders this tool much less useful to me than writing code. My eyesight's bad, so I can't keep the editor and the selected object in focus at the same time. The head & eye switching is probably more annoying to someone in my position than switching apps because at least I know I'm changing context when I switch apps (although I admit, I've put up with that for 20 years so perhaps I just don't notice). > I was inspired by the developer console in chrome and safari since I end up editing css there because it’s ironically more convenient. Conversely, I agree with this entirely. I don't like having to bob my head around the screen when I edit CSS in the browser, but it's still MUCH faster and intuitive than doing it in a separate code editor. I strongly dislike Tailwind and similar tools because they prevent this kind of coding/debugging. A similar tool got shown here on HN recently, and the conversation circled the idea that a visual tool to edit CSS is a) so handy but b) really hard to build because it's not programmatically obvious which file to make updates too... it's still easier to keep the file hierarchy in your head (even though that's quite hard). I guess focusing on React components lets you assume the CSS is "beside" the given component.
- kristiandupont 4y ago
  > I strongly dislike Tailwind and similar tools because they prevent this kind of coding/debugging No they don't? I use the inspector all the time to figure out what values to set. Granted, I then translate those to Tailwind in my head, so there is an extra step compared to directly copying the style but that's a very small price to pay for all the advantages that I get from Tailwind.
  - bzxcvbn 4y ago
    What are the advantages, really? I used to use tailwind for my site, but then I realized I was essentially writing plain CSS in some DSL. Writing the plain CSS directly and using a few CSS variables for things like color and spacing simplified the whole thing greatly.
math-dev 4y ago
Is it via class or functional components ? Keep up the good work - maybe jetbrains will buy / fund you!
- tscepo 4y ago
  Right now we export class components, but the option to export functional components is coming soon. Will likely default to functional component export. Thanks!
idkwhoiam 4y ago
This reminds me of the Ext Designer tool from many years ago that was very useful in building forms with the Ext.js framework.
deleted 4y ago
[deleted]
tuyiown 4y ago
No design principle, no explicit constraints on code base, no explicit supported scope. Surely there is some kind of React component that won't work well with this, the unsuspecting will discover this too late.
- deleted 4y ago
  [deleted]
bibinou 4y ago
> © Metacode, Inc. dba Aspect Is this the Metacode that got YC funding?
- tscepo 4y ago
  Yes. I’m super passionate about software that creates software.
  - Edmond 4y ago
    Kindred spirits...I would like to get in touch, my email is in my profile.
  - Karawebnetwork 4y ago
    Out of topic, are you worried that Meta might target you at some point?
edwinyzh 4y ago
First, congrats to your new project! Secondly, although it's not for react, but that's exactly the same reason why I have developed http://liveditor.com http://liveditor.com some years ago! The idea was that the css inspector/tweaker and the code editor should be combined together and working together seamlessly. PS, I know the software might have some little issues but I'm going to update it soon ;)
- ghostbrainalpha 4y ago
  This feels like home to me, as I was once a Dreamweaver.
simon_000666 4y ago
I want this - but mobile first. Whenever I’m sitting on a bus or train for a short trip that doesn’t warrant bringing a laptop but there is a simple little tweak that could be made in 10 mins. I would like to use a tool like this designed to be used on a mobile device. Also I think then people who only have mobile devices could also create their own software. It grates on me that in order to build mobile web applications you need a laptop or desktop.
beshur 4y ago
Sorry, I could not go farther in the video after watching the narrator trying to accurately click on all those inputs, dropdowns etc. simultaneously saying "writing this in code would be annoying". In my opinion using mouse pointer to click things on screen is annoying when it comes to programming.
- danielvaughn 4y ago
  I think it comes down to preference, but ultimately I agree with you. There are a lot of misconceptions about "code", and when people talk about how code is either slow, hard, annoying etc, they're speaking in the abstract and not being specific. At the end of the day, "code" is really just typing what you want instead of dragging around a mouse. It's like saying "I like to use my mouse to copy and paste instead of typing cmd+c cmd+v, it's faster". It doesn't make any sense.
- mbreese 4y ago
  I find mocking things up is better done visually. Whether that’s pen/paper, Illustrator, or a GUI builder like this. I think they serve the same purpose. The only difference is that with this, you’re closer to getting a final asset you can tweak with code. GUI builders have a long history. But the best of them produce code you can commit to git. But, I guess the real question of usefulness is how good (or sane) the generated code is. To use an example from a different comment, if it is closer to Dreamweaver, that at least produced workable code. If it is closer to FrontPage… good luck.
  - user3939382 4y ago
    FrontPage only has one thing to say to you in response to this insult:  
  - criley2 4y ago
    I find that mocking is best done by product/designers and not engineers, and that the skills to make a wonderful user experience are about as opposite from the skills of being a talented js/typescript/react/redux/devos etc engineer as can be. When I get a feature to implement in react, I expect the mocks to completed. We do our design work in figma and it's already a wonderful tool for mocking up our react app. The point of an 'all-in-one' mock and code tool seems strange. Is it to get rid of designers (which is bad because UX/accessibility/design is yet another skill to add ontop of the devops pile that will not be handled at a high level) or is it to get rid of the engineer (so that the product team can create a react app without an expensive coder, which is bad because shit is going to break and no one is going to know how to fix it). Perhaps this is intended for very small companies (~single person shops) where like it or not you're doing everything so anything that simplifies the process is a value add. The project looks very cool though, and he can definitely put together a form faster with this tool than I can writing it all out by hand. I wonder how the experience gets when you're in the weeds of custom components, hooks, props and all of the sauce that makes react complicated.
foxbee 4y ago
This looks really neat. Your branding is awesome, and the website is clean, but requires a lot more content for me to take this product for a spin.
can16358p 4y ago
I don't believe we need an IDE for React, it will end up dead like Dreamweaver or FrontPage. BUT, a Vscode plugin that visualizes self-contained components with all its styles intact would be nice: like I open MyComponent.tsx and in the right pane I see it visually, without running the actual webpage or server.
- macray 4y ago
  https://previewjs.com/ https://previewjs.com/ does that
  - trenchgun 4y ago
    Looks great!
  - JeanMeche 4y ago
    It's there some kind of equivalent for Angular components ?
  - fwouts 4y ago
    Hey! Author of Preview.js here :) It's early days and you might find that Preview.js can be a little difficult to set up in a large, complex project (working on improving that now) but please send through any feedback on the GitHub repo or Discord server, much appreciated!
- tscepo 4y ago
  Been thinking about this a lot the past few days. The main reason this isn’t yet integrated into vscode is to allow designers to edit, like in webflow.
- realharo 4y ago
  Something like https://storybook.js.org/ https://storybook.js.org/? Not a VS Code plugin, but similar idea (though it does a lot more). SwiftUI and Jetpack Compose also support individual component previews in their respective IDEs. (https://developer.apple.com/documentation/swiftui/previews-in-xcode https://developer.apple.com/documentation/swiftui/previews-i..., https://developer.android.com/jetpack/compose/tooling#preview https://developer.android.com/jetpack/compose/tooling#previe...)
csmeyer 4y ago
This is a pretty slick app! One thing I notice is that there are a lot of options in things like the insert menu with tags that aren't super popular. Maybe prioritizing more commonly used options would help with the UX? Also once you're logged in, there's no way to get back to the landing page without logging out.
- tscepo 4y ago
  Will make these changes in a few minutes, thanks for the heads up!
  - csmeyer 4y ago
    Also, is there a way to make more than one project/rename projects? Another UI thing, I think having those side panels expand on hover is a little distracting, maybe use a chevron to expand/collapse? If you have contact info on the page I'd be happy to give some more feedback, don't want to spam HN
eurasiantiger 4y ago
The Web is a wide audience. How do you design visually for the people who cannot see? In other words, how does this tool ensure that a site built using it remains accessible at WCAG2.1 A or AA level?
edding4500 4y ago
Cool project, congrats you finished it up to this point :) As some people pointed out, web developer demands are pretty specific and vary from person to person. To fulfill most of them would mean immense efforts. In contrast to that, I think your idea could thrive as a `boiler plate` component generator. Add an export button that just hands you the component code and you got me hooked for some quick components.
qwerty456127 4y ago
I agree 10000%. A way to design browser-based GUIs the visual RAD way makes me drool. I hope it grows and flourishes.
qwerki 4y ago
Disappointing to see the top comments are not encouraging of your efforts. This is not an easy undertaking and it's clear you've put a lot of time into it – you should be commended. I wish you the best of luck and look forward to seeing more of your work!
- tscepo 4y ago
  That means a lot, thanks!
- TimMeade 4y ago
  ditto. Looks like a lot of work. Nice.
- deleted 4y ago
  [deleted]
  - deleted 4y ago
    [deleted]
simonmorg 4y ago
The website does not tell me much. With this tool, what are the optimum use cases? I don't mind tools, such as low code platforms, that simplify the dev process for simple tasks - like Budibase for example. But I think these tools need purpose and an understanding of their capabilities - it would be good to know what aspect is best at.
- deleted 4y ago
  [deleted]
noduerme 4y ago
This is super cool. If I worked in React I would love the ability to build most of an MVC through a GUI like this and avoid the waste of time. I really hate React, though. Throwing logic into HTML and JSX... just feels so hackish. Like, if I want to alter states on a thing in the DOM, I want all that logic in the JS in one neat class, not mixed with control flow in a template somewhere else. /rant Still, I think a front-end like this could actually make it a lot friendlier for newbs and also save a ton of time for people who have to work in what I consider a nightmare of a stack... either way it looks like a samurai level piece of code that will be appreciated.
- pc86 4y ago
  Just a few days ago someone posted some snarky HN comments on React's initial release thread talking exactly about HTML and JSX being hackish, and all I could think was "well... it is." The popularity and success of a project doesn't mean that all its core assumptions/opinions are good, only that the project is popular and successful. Vue isn't perfect but I much prefer how it still lets you separate out various concerns. If it had half (or even 1/3) the community React does I think it could surpass React.
  - noduerme 4y ago
    >>The popularity and success of a project I think React (and Vue) are popular and successful because they meet 80% of the needs 80% of the time, and that's what you want and need from frameworks that are trying to do everything for everybody. They also make it a lot easier to go from a 6-month course into a low level coding job, and corporations are happier because the parts are more replaceable. In my mind, they're rather limited and hard to work with if you want to do anything outside the box, but there are always going to be frameworks because they solve the most common problems quickly.
- deleted 4y ago
  [deleted]
- tepitoperrito 4y ago
  You might not hate react, you might just be holding it wrong. A component could represent a discrete entity or thing you'd like to alter the state of. You might be able to handle that all locally in that component but beyond this limited case don't try to shoehorn state management into a view library. I highly recommend spending a few minutes getting to know MobX which I think maps very well to the concept of business logic and state encapsulated (in one class if you'd like) and seperated from the view layer.
solarkraft 4y ago
Visual editors are great! However closed source development tools tend to not do very well.
- runako 4y ago
  One of the top dev tools in the world is Microsoft's Visual Studio (not VS Code). It's doing fine. Similarly, JetBrains makes an incredibly popular set of closed-source dev tools[1]. Most people use dev tools as a part of their jobs. Employers buy tools for their employees. It's a good idea to make great software for developers and then to charge money for it so that you can keep shipping. 1 - https://news.ycombinator.com/item?id=21796793 https://news.ycombinator.com/item?id=21796793
- upupandup 4y ago
  Open source doesn't make software inherently better, more reliable or secure. Without a dedicated development direction that is supported financially, you are banking on the generosity of the github author. I have no problem with paid tools, I do have an issue with Stallmanism, gaslighting micro-ISV as evil, while telling OSS devs to suck it up and ask for donations to fund their widely used work.
  - solarkraft 4y ago
    I don't have an issue with paid tools either. I have an issue with non-extensibility and relying on small companies that may go out of business at any moment. You could arguably remediate the former issue with a good plugin API. Then again this program may not be aimed at developers, but more at designers, which may care a bit less about extensibility and covering special use cases.
claudiojulio 4y ago
Just because I don't like to do things in a way, it doesn't mean my way is the only right. Congratulations to the project creator. I wish you much success!
noso 4y ago
Watched the "get stated" video to the end and gave a great overview of how helpful the tool can be while building react apps. Awesome work and well done!
91edec 4y ago
Congrats on shipping.
NoXero 4y ago
I would like to start off by saying this is a very cool idea, and I can see the hard work and ingenuity that went into this effort. I think it is especially impressive if this is a solo endeavor. However, as someone who has quite a bit of experience with React, a tool like this I could see getting in my way. I don't see this being particularly helpful, maybe for prototyping for designers. It looks like a solution looking for a problem to me, honestly. Anyway, at least it is cool, and shows off your skill! Thanks for sharing.
anonymouse008 4y ago
Holy cannoli this is amazing!! I have no better words than Mike Markkula's point 3 of Apple's marketing philosophy for you: Point No. 3: Impute “People DO judge a book by its cover. We may have the best product, the highest quality, the most useful software etc.; if we present them in a slipshod manner, they will be perceived as slipshod; if we present them in a creative, professional manner, we will impute the desired qualities.” You have a stellar product - spend every waking moment polishing it. You already nailed point 1 and 2, that's why they're not included!
tmcw 4y ago
> "Aspect is built using Aspect" That is extremely impressive.
- spyremeown 4y ago
  Agreed. Bootstrapping your code with your own code shows a lot of self-reliance and belief in the product.
pavlov 4y ago
Good luck, looks great already! I spent years of my life on the problem of generating useful multi-platform code from a GUI tool and integrating it into designer and developer workflows. Before giving up I made React Studio (https://reactstudio.com https://reactstudio.com) which is owned by my co-founders now. It's insanely difficult. Nobody's needs are exactly the same, and nobody can agree even on the basics of how a web app is structured: where does CSS go, how do you update your global data, etc. The abstractions I had to build to handle that then increased the learning curve to such levels that it became more like a CAD tool where you'd practically need to train teams into a new way of thinking for them to become productive. Having traction with a few customers never seemed to translate into something scalable. (Maybe with an actual sales team an enterprise strategy could have worked.) My original version of the product was a mobile-only UI tool that generated native code for iOS and Android. In retrospect that was a better product than trying to expand into full-blown web apps. In native, a button is a button and a tab bar is a tab bar (with small differences between UIKit and Android); in web anything can be anything, and it's a point of pride to reinvent the basics constantly, so a tool must somehow adapt to the shifting tides of how CSS must look this year.
- deleted 4y ago
  [deleted]
- tscepo 4y ago
  Yeah I can learn a lot from React Studio—I think a lot about keeping the learning curve down for growth, so I'm glad you pointed that out. I'm focusing on enterprise sales next and actively looking for people to help with that, so again I think you're right. Thanks for the feedback!
  - pavlov 4y ago
    You're welcome, and I hope you crack this — the industry is stuck in a local maximum with tools based on what are essentially 1970s concepts (unstructured code-as-text and unstructured vector graphics). Two more random thoughts on this topic... I've long felt there's an important role missing in our industry. Architects don't draw a bunch of façade sketches, ask people if they look good, and then send them to construction engineers to figure out what the beige box in the drawing might actually mean. But that's how a lot of software is made. The problem is that we only have designers and programmers. The construction industry has many kind of design engineering roles in the middle, and they have specialized tools. In my mind, the missing role is something like an interaction architect. Someone who emphatically is not a graphic designer nor a front-end developer, but an expert on the structure of applications, how UX affordances translate into maintainable and accessible UI structures, etc. (This is the kind of role I hoped to enable with React Studio, but it was a failure and I'm too burned out from the experience to ever try again, probably.) The second thing I wanted to note is a warning example. I worked a couple of years at Facebook, and they had an internal React GUI design tool that was one of the best I've ever seen. Yet it was discontinued last year. The replacement was basically "We'll somehow make Figma do this eventually", which disappointed the people who had come to depend on the internal tool. Facebook/Meta is known for having some of the best internal tools in the industry, and spending a lot of resources to make those tools better. Why didn't it work out? My guess is that the team required to build this complexity was too large and projected usage was too low to justify development... But it's a worrying sign that even Facebook couldn't make this kind of tooling work. There was a captive audience of users who could have been required to adopt the software if the benefits were large enough. But it just didn't seem to cross the treshold from "interesting, very cool achievement" to "compelling, we'll fall behind if we don't use this."
epberry 4y ago
I just want to say that I love Aspect. I have 3 projects on here, 2 of which are live: https://everettberry.com/ https://everettberry.com/ and https://prcvlabs.org/ https://prcvlabs.org/.
dimgl 4y ago
I like the ambition. Great project. Best of luck to you. I see big things coming your way.
etchalon 4y ago
This is an absolutely awesome thing. Great job!
cercatrova 4y ago
Any thoughts on Framer? They seem to do the design aspect as well as the site-building aspect. https://www.framer.com https://www.framer.com https://www.framer.com/sites https://www.framer.com/sites
jesushax 4y ago
Bravo. Soon, developing point-and-click, drag-and-drop apps will be almost as easy as it was in 1998 with Visual Basic 6. I (mostly) jest, but yeah, this is marvelous. I'm developing a small React app this weekend, I'll use this and make sure to report any bugs or issues along the way. Thanks a lot for making something that makes other people (me!) excited!
- code_witch_sam 4y ago
  or winforms and C#! tbf, building a ui with an absolutely-positioned, pixel-bound presentation engine was AWFUL without a designer. anyone work with Win32 APIs back in the day? 60 lines of code just to open a window without even drawing anything on it! building a ui in code is a lot easier with flow layout and a good component library
  - CRConrad 4y ago
    https://wiki.freepascal.org/Overview_of_Free_Pascal_and_Lazarus https://wiki.freepascal.org/Overview_of_Free_Pascal_and_Laza...
- forgotmypw17 4y ago
  VB6 is awesome, and I wish it could remain in use. Unfortunately, being proprietary and closed, it was and continues to be at the mercy of its owner.
  - CRConrad 4y ago
    https://wiki.freepascal.org/Overview_of_Free_Pascal_and_Lazarus https://wiki.freepascal.org/Overview_of_Free_Pascal_and_Laza...
animal_spirits 4y ago
This looks really interesting! I like seeing more domain specific IDEs coming out
PhillyG 4y ago
Would this make learning React easier?
pyrossh 4y ago
Hi many years ago I built something similar for a game framework called libgdx. https://github.com/pyrossh/gdx-studio https://github.com/pyrossh/gdx-studio Looks cool. But to get it completely working it takes a lot of time and effort. See overlap2d as well. These days I just prefer writing plain code as I feel the generated code is not what I want.
nathanganser 4y ago
flutterflow.io is another tool like this :)
abdouls 4y ago
Wow, this looks absolutely nice! It looks clean and neat as well!

479 points by tscepo 4y ago

sktrdie 4y ago

https://utopia.app/ https://utopia.app/ also does this

hobofan 4y ago
Utopia doesn't "also" do this, they are doing something far more useful (bidirectional visual editing of the code) that could actually end up making its way into many people's workflow (it's just a shame that they don't support Typescript yet). There are plenty of drag and drop visual React builders, but as long as they follow an unidirectional export-once workflow, they are about as useful as a Figma mockup.
BillSaysThis 4y ago
Can I bring my own component library? And CSS variable files?

lstamour 4y ago

Just a tip for the demo video - check out Descript.com for an easy way to edit out the “ums” in videos and screen recordings. I use it regularly to tighten up a recording quickly. I likely wouldn’t edit or make videos in the first place if I didn’t have Descript. No relationship to disclose, just a happy customer.

deleted 4y ago

[deleted]

chunkyslink 4y ago

Thanks 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.

tscepo 4y ago
Ah I used React classes out of habit—will update the exporter to output hooks instead. Thanks for the heads up!
- Doches 4y ago
  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.)

your_challenger 4y ago

The video doesn't work { "error": { "code": 402, "message": "Quota has been exceeded for this project. Please visit the Firebase pricing page to learn more." } }

your_challenger 4y ago
Works now
tscepo 4y ago
Ah thanks for the heads up, just fixed!
epberry 4y ago
Best kind of error message.

bmitc 4y ago

Seems interesting. As a note, I am not able to view the video on an iPad. (Not complaining. Just FYI.)

lordofgibbons 4y ago

I'm seeing a MIME type not supported for the video on Android Firefox

_steady 4y ago

As someone who doesn't like to watch videos, i'd have loved some text content on this or any page explaining the proposition

tscepo 4y ago
Got it, added some explanatory copy. Accompanying image examples following soon.

DoctorOW 4y ago

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. :)

tscepo 4y ago
Thanks!

throwntoday 4y ago

Is it really that tough to Cmd+Tab then Cmd+R? All jokes aside, good job. Creating tools to solve problems is always fun.

Xevi 4y ago
I even have the browser and code on the monitor at the same time. And with pretty much all modern web frameworks you have a dev server that automatically does hot module replacement, so you instantly see your changes without reloading anything yourself.
- nkozyra 4y ago
  I've never seen a hot reload that worked fast enough to not be annoying. React does it all quickly when all it's re processing is css but anything js related and it seems not to be able to treeshake down to bare minimum updates. We're talking 750ms to 1.5s, and I admit it's still a marvel compared to things I used to have to deal with, but it's still enough to feel cludgy. Flutter is another example of this. It's not _slow_ but if I'm sitting there waiting for even a bit I'm less likely to use the feature as an incremental tool rather than batch a bunch of things before looking or tabbing over.
  - randomsearch 4y ago
    > I've never seen a hot reload that worked fast enough to not be annoying. Then you, my friend, have never used Vite.
  - dmix 4y ago
    I use a vue dev server daily (both with webpack previously and now with the way faster vite) and it's pretty much instant. These projects only recompile the code that changes, then via chunking the browser only reloads a tiny specific .js file that contained that one component matching the vue-route, so usually 10-30kb refresh (and it loads about ~10x small .js files per page), which happens before I can tab back or notice when widescreened. Previously when I used the slower Webpack without chunking it started to take time when the project grew large. But that was long ago (3 years ago?).

elanning 4y ago

Great idea. I think UI/UX designers would love a tool like this. Especially if they could import React components made by the development department.

krono 4y ago
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: https://designcode.io/framer-x https://designcode.io/framer-x https://www.modulz.app/ https://www.modulz.app/
- schkolne 4y ago
  Here are some other exciting products in the space: https://www.plasmic.app/ https://www.plasmic.app/ https://www.builder.io/ https://www.builder.io/ https://clutch.io/ https://clutch.io/ https://builderx.io/ https://builderx.io/ https://dynaboard.com/ https://dynaboard.com/ Each one has a slightly different take on the problem, and some of these are turning out to be quite useful for teams. I'm very curious to see how things will shape up. I find Aspect to be particularly beautiful, a nice clean UI great work!
dgb23 4y ago
If the components are headless. Otherwise it makes more sense to do it the other way around. Designers write components that just render stuff, which then gets wired up by devs to be state/effectful.
- danielvaughn 4y ago
  This is what I’m doing. I’ve been building a “programming language” for UI designers. The idea is that they just describe the visual behavior, and then devs can wire it up with business logic.

phtrivier 4y ago

This 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 !

tscepo 4y ago
I set up super minimal preset styling, and yeah I think basic css import makes sense as a next feature. Hoping to avoid overly complex style inheritance. I 100% agree, getting layout css right is the most annoying part of styling. I’m inspired by Apple’s stack views and Figma’s auto layout which make it a lot more intuitive so I think those can be the first “Aspect components” that will come out on next release. Thanks for the feedback!
- dgritsko 4y ago
  Tailwind support would be awesome. I often use Tailwind Play (https://play.tailwindcss.com/ https://play.tailwindcss.com/) when I'm "sketching out" the look of a new component since it's so quick to iterate and get immediate visual feedback, as you well know.
danielvaughn 4y ago
I've been wondering whether it would be possible to leverage ML/AI to "infer" a layout from a visual mockup. So like if two elements have the same X position, they're assumed to be left aligned with one another. If three elements are the same width and sit side-by-side with the same distance between them, they're assumed to be a 3-grid column. Etc etc.
- tscepo 4y ago
  We're actually in review on the Figma plugin store for exactly this. Should be out soon.

onion2k 4y ago

It 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.

Doches 4y ago
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.
- deleted 4y ago
  [deleted]
- diatone 4y ago
  Playing devil’s advocate here: if this graphical interface could be manipulated without mouse clicks, you’re still interested? Alternatively: if there were some high bandwidth, low latency feedback loop between you and this app, an order of magnitude faster than how you currently iterate on working with React, you’d consider it?

Mappleton 4y ago

Look 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.

tscepo 4y ago
I really appreciate the feedback, thanks! Talking to designer friends and updating UX as we speak, based on this.

echopom 4y ago

I'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/ https://www.decoide.org/ [1]https://github.com/open-source-labs/PreVue 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.

lfkdev 4y ago
Where exactly is now your problem with IDE's for webs?
hutzlibu 4y ago
Do you also have concrete criticism of this project or just generic general complaints about the topic? Yes, there are many attempts trying to fix the problem, that designing requires coding and yes, that is a very, very hard problem to do right. But just shitting on something because you feel bitter about the topic (or whatever your motivation is) probably won't lead to anything interesting.
- polydevil 4y ago
  Well, is says that the website itself was build by the tool. Non-semantic tags, divs instead of links, buttons instead of links, a lot of inline styles (which is a bad practice), deep nesting. So inline styles will make caching css impossible, so high load times, not good for performance. Deep nesting makes the problem even worse. So the result is a slow bloated inaccessible code, but the result may look ok. If all you want is a pretty picture - than yeah, it is a great tool. I prefer this approach - https://github.com/seek-oss/playroom https://github.com/seek-oss/playroom Just create your components and add them to the sandbox and allow your designers to play with them.
- 4y ago

varispeed 4y ago

These visual tools never clicked with me. There is always a point that you need to code something "manually" and then switching back and forth is just tedious (and if you are lucky that your code doesn't break the tool) to the point it makes no sense to use such a visual tool. Maybe this is different though. I wish it was possible to try without having to set up an account.

bananapear 4y ago

Would be nice to be able to try it out or see a demo without having to create an account and log in

the_other 4y ago

Hey, well done for getting something functional working and in the public eye. > I made this because building UIs in a lexical medium like code is super annoying. I have to pre-render what I’m making in my head I'd call the pre-rendering in your head a benefit, tbh. Also.. watching your vid, the property editor being "far away" from the selected item renders this tool much less useful to me than writing code. My eyesight's bad, so I can't keep the editor and the selected object in focus at the same time. The head & eye switching is probably more annoying to someone in my position than switching apps because at least I know I'm changing context when I switch apps (although I admit, I've put up with that for 20 years so perhaps I just don't notice). > I was inspired by the developer console in chrome and safari since I end up editing css there because it’s ironically more convenient. Conversely, I agree with this entirely. I don't like having to bob my head around the screen when I edit CSS in the browser, but it's still MUCH faster and intuitive than doing it in a separate code editor. I strongly dislike Tailwind and similar tools because they prevent this kind of coding/debugging. A similar tool got shown here on HN recently, and the conversation circled the idea that a visual tool to edit CSS is a) so handy but b) really hard to build because it's not programmatically obvious which file to make updates too... it's still easier to keep the file hierarchy in your head (even though that's quite hard). I guess focusing on React components lets you assume the CSS is "beside" the given component.

kristiandupont 4y ago
> I strongly dislike Tailwind and similar tools because they prevent this kind of coding/debugging No they don't? I use the inspector all the time to figure out what values to set. Granted, I then translate those to Tailwind in my head, so there is an extra step compared to directly copying the style but that's a very small price to pay for all the advantages that I get from Tailwind.
- bzxcvbn 4y ago
  What are the advantages, really? I used to use tailwind for my site, but then I realized I was essentially writing plain CSS in some DSL. Writing the plain CSS directly and using a few CSS variables for things like color and spacing simplified the whole thing greatly.

math-dev 4y ago

Is it via class or functional components ? Keep up the good work - maybe jetbrains will buy / fund you!

tscepo 4y ago
Right now we export class components, but the option to export functional components is coming soon. Will likely default to functional component export. Thanks!

idkwhoiam 4y ago

This reminds me of the Ext Designer tool from many years ago that was very useful in building forms with the Ext.js framework.

deleted 4y ago

[deleted]

tuyiown 4y ago

No design principle, no explicit constraints on code base, no explicit supported scope. Surely there is some kind of React component that won't work well with this, the unsuspecting will discover this too late.

deleted 4y ago
[deleted]

bibinou 4y ago

> © Metacode, Inc. dba Aspect Is this the Metacode that got YC funding?

tscepo 4y ago
Yes. I’m super passionate about software that creates software.
- Edmond 4y ago
  Kindred spirits...I would like to get in touch, my email is in my profile.
- Karawebnetwork 4y ago
  Out of topic, are you worried that Meta might target you at some point?

edwinyzh 4y ago

First, congrats to your new project! Secondly, although it's not for react, but that's exactly the same reason why I have developed http://liveditor.com http://liveditor.com some years ago! The idea was that the css inspector/tweaker and the code editor should be combined together and working together seamlessly. PS, I know the software might have some little issues but I'm going to update it soon ;)

ghostbrainalpha 4y ago
This feels like home to me, as I was once a Dreamweaver.

simon_000666 4y ago

I want this - but mobile first. Whenever I’m sitting on a bus or train for a short trip that doesn’t warrant bringing a laptop but there is a simple little tweak that could be made in 10 mins. I would like to use a tool like this designed to be used on a mobile device. Also I think then people who only have mobile devices could also create their own software. It grates on me that in order to build mobile web applications you need a laptop or desktop.

beshur 4y ago

Sorry, I could not go farther in the video after watching the narrator trying to accurately click on all those inputs, dropdowns etc. simultaneously saying "writing this in code would be annoying". In my opinion using mouse pointer to click things on screen is annoying when it comes to programming.

danielvaughn 4y ago
I think it comes down to preference, but ultimately I agree with you. There are a lot of misconceptions about "code", and when people talk about how code is either slow, hard, annoying etc, they're speaking in the abstract and not being specific. At the end of the day, "code" is really just typing what you want instead of dragging around a mouse. It's like saying "I like to use my mouse to copy and paste instead of typing cmd+c cmd+v, it's faster". It doesn't make any sense.
mbreese 4y ago
I find mocking things up is better done visually. Whether that’s pen/paper, Illustrator, or a GUI builder like this. I think they serve the same purpose. The only difference is that with this, you’re closer to getting a final asset you can tweak with code. GUI builders have a long history. But the best of them produce code you can commit to git. But, I guess the real question of usefulness is how good (or sane) the generated code is. To use an example from a different comment, if it is closer to Dreamweaver, that at least produced workable code. If it is closer to FrontPage… good luck.
- user3939382 4y ago
  FrontPage only has one thing to say to you in response to this insult:  
- criley2 4y ago
  I find that mocking is best done by product/designers and not engineers, and that the skills to make a wonderful user experience are about as opposite from the skills of being a talented js/typescript/react/redux/devos etc engineer as can be. When I get a feature to implement in react, I expect the mocks to completed. We do our design work in figma and it's already a wonderful tool for mocking up our react app. The point of an 'all-in-one' mock and code tool seems strange. Is it to get rid of designers (which is bad because UX/accessibility/design is yet another skill to add ontop of the devops pile that will not be handled at a high level) or is it to get rid of the engineer (so that the product team can create a react app without an expensive coder, which is bad because shit is going to break and no one is going to know how to fix it). Perhaps this is intended for very small companies (~single person shops) where like it or not you're doing everything so anything that simplifies the process is a value add. The project looks very cool though, and he can definitely put together a form faster with this tool than I can writing it all out by hand. I wonder how the experience gets when you're in the weeds of custom components, hooks, props and all of the sauce that makes react complicated.

foxbee 4y ago

This looks really neat. Your branding is awesome, and the website is clean, but requires a lot more content for me to take this product for a spin.

can16358p 4y ago

I don't believe we need an IDE for React, it will end up dead like Dreamweaver or FrontPage. BUT, a Vscode plugin that visualizes self-contained components with all its styles intact would be nice: like I open MyComponent.tsx and in the right pane I see it visually, without running the actual webpage or server.

macray 4y ago
https://previewjs.com/ https://previewjs.com/ does that
- trenchgun 4y ago
  Looks great!
- JeanMeche 4y ago
  It's there some kind of equivalent for Angular components ?
- fwouts 4y ago
  Hey! Author of Preview.js here :) It's early days and you might find that Preview.js can be a little difficult to set up in a large, complex project (working on improving that now) but please send through any feedback on the GitHub repo or Discord server, much appreciated!
tscepo 4y ago
Been thinking about this a lot the past few days. The main reason this isn’t yet integrated into vscode is to allow designers to edit, like in webflow.
realharo 4y ago
Something like https://storybook.js.org/ https://storybook.js.org/? Not a VS Code plugin, but similar idea (though it does a lot more). SwiftUI and Jetpack Compose also support individual component previews in their respective IDEs. (https://developer.apple.com/documentation/swiftui/previews-in-xcode https://developer.apple.com/documentation/swiftui/previews-i..., https://developer.android.com/jetpack/compose/tooling#preview https://developer.android.com/jetpack/compose/tooling#previe...)

csmeyer 4y ago

This is a pretty slick app! One thing I notice is that there are a lot of options in things like the insert menu with tags that aren't super popular. Maybe prioritizing more commonly used options would help with the UX? Also once you're logged in, there's no way to get back to the landing page without logging out.

tscepo 4y ago
Will make these changes in a few minutes, thanks for the heads up!
- csmeyer 4y ago
  Also, is there a way to make more than one project/rename projects? Another UI thing, I think having those side panels expand on hover is a little distracting, maybe use a chevron to expand/collapse? If you have contact info on the page I'd be happy to give some more feedback, don't want to spam HN

eurasiantiger 4y ago

The Web is a wide audience. How do you design visually for the people who cannot see? In other words, how does this tool ensure that a site built using it remains accessible at WCAG2.1 A or AA level?

edding4500 4y ago

Cool project, congrats you finished it up to this point :) As some people pointed out, web developer demands are pretty specific and vary from person to person. To fulfill most of them would mean immense efforts. In contrast to that, I think your idea could thrive as a `boiler plate` component generator. Add an export button that just hands you the component code and you got me hooked for some quick components.

qwerty456127 4y ago

I agree 10000%. A way to design browser-based GUIs the visual RAD way makes me drool. I hope it grows and flourishes.

qwerki 4y ago

Disappointing to see the top comments are not encouraging of your efforts. This is not an easy undertaking and it's clear you've put a lot of time into it – you should be commended. I wish you the best of luck and look forward to seeing more of your work!

tscepo 4y ago
That means a lot, thanks!
TimMeade 4y ago
ditto. Looks like a lot of work. Nice.
deleted 4y ago
[deleted]
- deleted 4y ago
  [deleted]

simonmorg 4y ago

The website does not tell me much. With this tool, what are the optimum use cases? I don't mind tools, such as low code platforms, that simplify the dev process for simple tasks - like Budibase for example. But I think these tools need purpose and an understanding of their capabilities - it would be good to know what aspect is best at.

deleted 4y ago
[deleted]

noduerme 4y ago

This is super cool. If I worked in React I would love the ability to build most of an MVC through a GUI like this and avoid the waste of time. I really hate React, though. Throwing logic into HTML and JSX... just feels so hackish. Like, if I want to alter states on a thing in the DOM, I want all that logic in the JS in one neat class, not mixed with control flow in a template somewhere else. /rant Still, I think a front-end like this could actually make it a lot friendlier for newbs and also save a ton of time for people who have to work in what I consider a nightmare of a stack... either way it looks like a samurai level piece of code that will be appreciated.

pc86 4y ago
Just a few days ago someone posted some snarky HN comments on React's initial release thread talking exactly about HTML and JSX being hackish, and all I could think was "well... it is." The popularity and success of a project doesn't mean that all its core assumptions/opinions are good, only that the project is popular and successful. Vue isn't perfect but I much prefer how it still lets you separate out various concerns. If it had half (or even 1/3) the community React does I think it could surpass React.
- noduerme 4y ago
  >>The popularity and success of a project I think React (and Vue) are popular and successful because they meet 80% of the needs 80% of the time, and that's what you want and need from frameworks that are trying to do everything for everybody. They also make it a lot easier to go from a 6-month course into a low level coding job, and corporations are happier because the parts are more replaceable. In my mind, they're rather limited and hard to work with if you want to do anything outside the box, but there are always going to be frameworks because they solve the most common problems quickly.
deleted 4y ago
[deleted]
tepitoperrito 4y ago
You might not hate react, you might just be holding it wrong. A component could represent a discrete entity or thing you'd like to alter the state of. You might be able to handle that all locally in that component but beyond this limited case don't try to shoehorn state management into a view library. I highly recommend spending a few minutes getting to know MobX which I think maps very well to the concept of business logic and state encapsulated (in one class if you'd like) and seperated from the view layer.

solarkraft 4y ago

Visual editors are great! However closed source development tools tend to not do very well.

runako 4y ago
One of the top dev tools in the world is Microsoft's Visual Studio (not VS Code). It's doing fine. Similarly, JetBrains makes an incredibly popular set of closed-source dev tools[1]. Most people use dev tools as a part of their jobs. Employers buy tools for their employees. It's a good idea to make great software for developers and then to charge money for it so that you can keep shipping. 1 - https://news.ycombinator.com/item?id=21796793 https://news.ycombinator.com/item?id=21796793
upupandup 4y ago
Open source doesn't make software inherently better, more reliable or secure. Without a dedicated development direction that is supported financially, you are banking on the generosity of the github author. I have no problem with paid tools, I do have an issue with Stallmanism, gaslighting micro-ISV as evil, while telling OSS devs to suck it up and ask for donations to fund their widely used work.
- solarkraft 4y ago
  I don't have an issue with paid tools either. I have an issue with non-extensibility and relying on small companies that may go out of business at any moment. You could arguably remediate the former issue with a good plugin API. Then again this program may not be aimed at developers, but more at designers, which may care a bit less about extensibility and covering special use cases.

claudiojulio 4y ago

Just because I don't like to do things in a way, it doesn't mean my way is the only right. Congratulations to the project creator. I wish you much success!

noso 4y ago

Watched the "get stated" video to the end and gave a great overview of how helpful the tool can be while building react apps. Awesome work and well done!

91edec 4y ago

Congrats on shipping.

NoXero 4y ago

I would like to start off by saying this is a very cool idea, and I can see the hard work and ingenuity that went into this effort. I think it is especially impressive if this is a solo endeavor. However, as someone who has quite a bit of experience with React, a tool like this I could see getting in my way. I don't see this being particularly helpful, maybe for prototyping for designers. It looks like a solution looking for a problem to me, honestly. Anyway, at least it is cool, and shows off your skill! Thanks for sharing.

anonymouse008 4y ago

Holy cannoli this is amazing!! I have no better words than Mike Markkula's point 3 of Apple's marketing philosophy for you: Point No. 3: Impute “People DO judge a book by its cover. We may have the best product, the highest quality, the most useful software etc.; if we present them in a slipshod manner, they will be perceived as slipshod; if we present them in a creative, professional manner, we will impute the desired qualities.” You have a stellar product - spend every waking moment polishing it. You already nailed point 1 and 2, that's why they're not included!

tmcw 4y ago

> "Aspect is built using Aspect" That is extremely impressive.

spyremeown 4y ago
Agreed. Bootstrapping your code with your own code shows a lot of self-reliance and belief in the product.

pavlov 4y ago

Good luck, looks great already! I spent years of my life on the problem of generating useful multi-platform code from a GUI tool and integrating it into designer and developer workflows. Before giving up I made React Studio (https://reactstudio.com https://reactstudio.com) which is owned by my co-founders now. It's insanely difficult. Nobody's needs are exactly the same, and nobody can agree even on the basics of how a web app is structured: where does CSS go, how do you update your global data, etc. The abstractions I had to build to handle that then increased the learning curve to such levels that it became more like a CAD tool where you'd practically need to train teams into a new way of thinking for them to become productive. Having traction with a few customers never seemed to translate into something scalable. (Maybe with an actual sales team an enterprise strategy could have worked.) My original version of the product was a mobile-only UI tool that generated native code for iOS and Android. In retrospect that was a better product than trying to expand into full-blown web apps. In native, a button is a button and a tab bar is a tab bar (with small differences between UIKit and Android); in web anything can be anything, and it's a point of pride to reinvent the basics constantly, so a tool must somehow adapt to the shifting tides of how CSS must look this year.

deleted 4y ago
[deleted]
tscepo 4y ago
Yeah I can learn a lot from React Studio—I think a lot about keeping the learning curve down for growth, so I'm glad you pointed that out. I'm focusing on enterprise sales next and actively looking for people to help with that, so again I think you're right. Thanks for the feedback!
- pavlov 4y ago
  You're welcome, and I hope you crack this — the industry is stuck in a local maximum with tools based on what are essentially 1970s concepts (unstructured code-as-text and unstructured vector graphics). Two more random thoughts on this topic... I've long felt there's an important role missing in our industry. Architects don't draw a bunch of façade sketches, ask people if they look good, and then send them to construction engineers to figure out what the beige box in the drawing might actually mean. But that's how a lot of software is made. The problem is that we only have designers and programmers. The construction industry has many kind of design engineering roles in the middle, and they have specialized tools. In my mind, the missing role is something like an interaction architect. Someone who emphatically is not a graphic designer nor a front-end developer, but an expert on the structure of applications, how UX affordances translate into maintainable and accessible UI structures, etc. (This is the kind of role I hoped to enable with React Studio, but it was a failure and I'm too burned out from the experience to ever try again, probably.) The second thing I wanted to note is a warning example. I worked a couple of years at Facebook, and they had an internal React GUI design tool that was one of the best I've ever seen. Yet it was discontinued last year. The replacement was basically "We'll somehow make Figma do this eventually", which disappointed the people who had come to depend on the internal tool. Facebook/Meta is known for having some of the best internal tools in the industry, and spending a lot of resources to make those tools better. Why didn't it work out? My guess is that the team required to build this complexity was too large and projected usage was too low to justify development... But it's a worrying sign that even Facebook couldn't make this kind of tooling work. There was a captive audience of users who could have been required to adopt the software if the benefits were large enough. But it just didn't seem to cross the treshold from "interesting, very cool achievement" to "compelling, we'll fall behind if we don't use this."

epberry 4y ago

I just want to say that I love Aspect. I have 3 projects on here, 2 of which are live: https://everettberry.com/ https://everettberry.com/ and https://prcvlabs.org/ https://prcvlabs.org/.

dimgl 4y ago

I like the ambition. Great project. Best of luck to you. I see big things coming your way.

etchalon 4y ago

This is an absolutely awesome thing. Great job!

cercatrova 4y ago

Any thoughts on Framer? They seem to do the design aspect as well as the site-building aspect. https://www.framer.com https://www.framer.com https://www.framer.com/sites https://www.framer.com/sites

jesushax 4y ago

Bravo. Soon, developing point-and-click, drag-and-drop apps will be almost as easy as it was in 1998 with Visual Basic 6. I (mostly) jest, but yeah, this is marvelous. I'm developing a small React app this weekend, I'll use this and make sure to report any bugs or issues along the way. Thanks a lot for making something that makes other people (me!) excited!

code_witch_sam 4y ago
or winforms and C#! tbf, building a ui with an absolutely-positioned, pixel-bound presentation engine was AWFUL without a designer. anyone work with Win32 APIs back in the day? 60 lines of code just to open a window without even drawing anything on it! building a ui in code is a lot easier with flow layout and a good component library
- CRConrad 4y ago
  https://wiki.freepascal.org/Overview_of_Free_Pascal_and_Lazarus https://wiki.freepascal.org/Overview_of_Free_Pascal_and_Laza...
forgotmypw17 4y ago
VB6 is awesome, and I wish it could remain in use. Unfortunately, being proprietary and closed, it was and continues to be at the mercy of its owner.
- CRConrad 4y ago
  https://wiki.freepascal.org/Overview_of_Free_Pascal_and_Lazarus https://wiki.freepascal.org/Overview_of_Free_Pascal_and_Laza...

animal_spirits 4y ago

This looks really interesting! I like seeing more domain specific IDEs coming out

PhillyG 4y ago

Would this make learning React easier?

pyrossh 4y ago

Hi many years ago I built something similar for a game framework called libgdx. https://github.com/pyrossh/gdx-studio https://github.com/pyrossh/gdx-studio Looks cool. But to get it completely working it takes a lot of time and effort. See overlap2d as well. These days I just prefer writing plain code as I feel the generated code is not what I want.

nathanganser 4y ago

flutterflow.io is another tool like this :)

abdouls 4y ago

Wow, this looks absolutely nice! It looks clean and neat as well!