Show HN: A front-end visual development tool for React applications | Hacker News Reader

Show HN: A front-end visual development tool for React applications

github.com

178 pointsipselon39 comments

https://divjoy.com/ did a great job of providing reactjs(and extras) and was free for initial few months. Definitely refer to that for more inspiration on design and capabilities. May be provide some templates(pre-built) of few types(like the one you have it as part of tutorial)

The Webcodesk online version is designed to demonstrate the components and how they can be combined in an application. The components themselves can be created in the local version - it is Open Source.

> The best way to tell about Webcodesk is to let you try it in action.

> So instead of an introduction, I would recommend you to complete the tutorial in the online version of Webcodesk. Click on the link below.

Please put a GIF of your tool in action on your github page instead of this message.

I agree with this. I scrolled through the github page, then I went to the main homepage, scrolled through that and closed the tab. I wanted to see what it actually did before investing more time reading about it and seeing how it works.

Same.

Asking people to upfront invest their time into something without first selling them on that thing is a big no no.

Yes even/especially for tech projects and libraries.

...and I am even this guys target audience, a React developer who makes a living with it.

Here is the timelapse video: https://youtu.be/5b2MAk95W8s

This is a good idea. It would also help sell people if the example was changing or adding something to a non-trivial layout.

I'm recording the video now. It will be available in two or three hours. Thanks for the advice

No problem -- Looking forward to taking another look at the project!

Here is the timelapse video: https://youtu.be/5b2MAk95W8s

Glad you got through making the video, but maybe it was a little unclear what I meant -- a short ~15 second GIF of moving about the app (not an introduction, but when you're being productive with it) would do much more to draw people in.

By all means though, embed the video onto the page -- it's at least a start. IMO it's not really reasonable to expect busy devs to sit through 1 minute of silent sped-up introductory content.

Here are some examples of what I mean (I searched "wysiwyg react" and "page builder react" on github and picked some good examples):

- https://github.com/jpuri/react-draft-wysiwyg

- https://github.com/BuilderIO/builder

- https://github.com/blocks/blocks

- https://github.com/artf/grapesjs

Builder is not actually open source

Blocks is alpha

Grapes is ok, but the repo maintainer is not the greatest

What in your opinion is wrong with the Grapes maintainer? The comment seems like an indictment of some sort without obvious evidence.

Take a look at how the issues are managed. Each time he replies, he immediately closes the issue without seeing of it is actually resolved, and then he had a lockbox which locks the conversations.

Not to go off topic but I find animated GIFs great for 5 second things & frustrating for things over 5 seconds. Videos tend to be easier to pause, fast forward, rewind & skip ahead.

I say this only because it seems to be a trend in some software dev circles where people post 15-30 second instructional animated GIFs to demonstrate something. It's incredibly frustrating to watch. If you miss something you're stuck either downloading the GIF into an editor or having to watch the whole thing again.

You can create GIFs of your product in action using this handy tool: https://www.screentogif.com/

On Linux there is peek for quick screen to gif/mp4 recordings: https://github.com/phw/peek

The concept of this looks pretty powerful - the timelapse video on Youtube did a good job of showing me what I wanted to see. Devil's always in the details, of course, but at the very least, it seems like this could speed up the creation of rough drafts. I'm excited to try it out this week.

Thank you, I'm glad to hear the product came in handy.

Very cool. A few years ago at NFL we built a CMS similar to this for managing sites and apps. It was called Component Builder and similarly you could cobble together pages of components (and deeply nest them however far you wanted) and configure each component and persist the final outcome in a database. The frontend was not open-sourced, but the backend was: https://github.com/nfl/gold

Your project appears to be generating a static SPA, but if you wanted to consider making this a full-fledged CMS you could look into using gold or something similar.

graphql really shines on the CMS side where your Component schemas practically write the cms UI for you. Your cms UI can leverage introspection to make for a really intuitive and efficient experience - especially considering that your atomic component library will grow very large over time.

I like how you split up component types (atoms, layouts, functions) and nest that under the app component types (pages, templates, flows) Is this done in code or are you using proptypes or some schema to manage the organization?

All components are written for this demo only. You can install Webcodesk locally and write any components and functions - Webcodesk will parse the code. Please find the User Guide in the GitHub repo.

Wow, I like it. Also maybe this [1] gives you some new ideas

And I'm thinking of a data modeler [2] in this way too

[1] https://animation-nodes-manual.readthedocs.io/en/latest/user...

[2] https://github.com/IfcXtreme/IfcXtreme/issues/2#issuecomment...

I like the idea but I stumbled on a classical CSS problem: wasn't able to center an icon. There were few alignment options, but I might have missed them, maybe they were in another place than I looked.

The tutorial project uses a limited number of components. The purpose of the tutorial was to show how to work with the components, as well as Webcodesk features. But you can create components and add properties only in the local version of Webcodesk.

Confession time: if I'm doing something quick and disposable in raw HTML I still just throw in a <center> tag, because I can't be bothered to screw with CSS centering when I need something to just work, and right now.

Why not: .center { display: flex; justify-content: center; align-items: center; } ?

Because I learned <center> like 20 years ago and it still works, while some of that I've only been exposed to in the last couple years (multiple "this is the right way to center" notions have come and gone since trusty ol' <center> became "bad") and I'd have much lower confidence it'd look the same in my browser as another.

[EDIT] I'm talking about situations like "we need an ugly informational page here for an hour" and all or some part of it would look better centered, or if I'm throwing up a placeholder page on a personal site. Those kinds of things, I'm not gonna google "what's the correct 2020 CSS to do what <center> does" and end up with a bunch of caveats and gotchas when I could just <center> and move on with my life.

The year is 2047, the ugly informational page is now a sprawling social network platform and is still in production.

And the latest browsers have finally finished implementing the 3D parallaxing layout system which has finally overtaken the other 6 layout systems. It takes a few more lines but it guarantees the compositing for AR is consistent regardless of surface. Meanwhile the center tag actually still just works.

CSS is a set of concepts. CSS contains a set of layout models, such as flexbox. You need to learn a layout model. There is no other way. I like Flexbox. It's easy to center in Flexbox.

Logo reminds me of the Sony Walkman logo https://images.app.goo.gl/XnhVcCpKWzaXebwo7

This does seem promising. I am doing a school project with react & nodejs - I will try using this and see how it goes.

Can't wait to use it, thanks for doing this.

Little intro please ?

The best way to tell about Webcodesk is to let you try it in action.

So instead of an introduction, I would recommend you to complete the tutorial in the online version of Webcodesk. Click on the link below.

GPLv3... guess we'll have to pass on it

Why? You can use it to develop apps without any restrictions.

Corp lawyers have said no GPLv3 for tools like this before

Unless the engineer in question isn't responding to emails, then your company can use the same strategy with GPLv3 code as they would with any propriety code: Pay for a license.

Or does your company not use any propriety tools at all? (It's alright if they don't; being 100% reliant on permissive open-source licenses is a nice achievement in-and-of-itself).

I would offer a commercial licence for a fee. It should come with some level of support, and use this to fund further development.

Reply on news.ycombinator.com