Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: A Visual IDE for React

dev.aspect.app

Post reply on HN
Print view View original

51–60 of 148 posts

Re: Show HN: A Visual IDE for React

#51

Post by robenkleene »

echopom wrote: post #20

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…

At face value this seems like it could apply to a bunch of different categories (e.g., another text editor, another todo list, another chat app, etc...)? Yes, most new software in every category fails, but every once in awhile one succeeds, and that's how we make progress. The failures along the way just seem like a necessary byproduct of progress.

Re: Show HN: A Visual IDE for React

#53

Post by can16358p »

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.

Re: Show HN: A Visual IDE for React

#54

Post by csmeyer »

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.

Re: Show HN: A Visual IDE for React

#55

Post by macray »

can16358p wrote: post #53

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.

https://previewjs.com/ does that

Re: Show HN: A Visual IDE for React

#56

Post by tscepo »

can16358p wrote: post #53

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.

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.

Re: Show HN: A Visual IDE for React

#57

Post by realharo »

can16358p wrote: post #53

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.

Something like 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-i..., https://developer.android.com/jetpack/compose/tooling#previe...)

Re: Show HN: A Visual IDE for React

#58

Post by danielvaughn »

phtrivier wrote: post #15

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…

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.

Re: Show HN: A Visual IDE for React

#59

Post by trenchgun »

macray wrote: post #55
can16358p wrote: post #53

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.

https://previewjs.com/ does that

Looks great!

Re: Show HN: A Visual IDE for React

#60

Post by tscepo »

csmeyer wrote: post #54

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.

Will make these changes in a few minutes, thanks for the heads up!
Post reply on HN