7 ms·

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

178 points by ipselon 7y ago

hardwaresofton 7y ago
> 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.
- rickyc091 7y ago
  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.
  - reflectiv 7y ago
    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.
    - ipselon 7y ago
      Here is the timelapse video: https://youtu.be/5b2MAk95W8s https://youtu.be/5b2MAk95W8s
- azimuth11 7y ago
  This is a good idea. It would also help sell people if the example was changing or adding something to a non-trivial layout.
- ipselon 7y ago
  I'm recording the video now. It will be available in two or three hours. Thanks for the advice
  - hardwaresofton 7y ago
    No problem -- Looking forward to taking another look at the project!
- ipselon 7y ago
  Here is the timelapse video: https://youtu.be/5b2MAk95W8s https://youtu.be/5b2MAk95W8s
  - hardwaresofton 7y ago
    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/jpuri/react-draft-wysiwyg - https://github.com/BuilderIO/builder https://github.com/BuilderIO/builder - https://github.com/blocks/blocks https://github.com/blocks/blocks - https://github.com/artf/grapesjs https://github.com/artf/grapesjs
    - verdverm 7y ago
      Builder is not actually open source Blocks is alpha Grapes is ok, but the repo maintainer is not the greatest
      - jhowell 7y ago
        What in your opinion is wrong with the Grapes maintainer? The comment seems like an indictment of some sort without obvious evidence.
        verdverm 7y ago
        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.
    - mattferderer 7y ago
mywacaday 7y ago
Logo reminds me of the Sony Walkman logo https://images.app.goo.gl/XnhVcCpKWzaXebwo7 https://images.app.goo.gl/XnhVcCpKWzaXebwo7
Sharma 7y ago
https://divjoy.com/ 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)
- ipselon 7y ago
  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.
visarga 7y ago
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.
- ipselon 7y ago
  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.
- karatestomp 7y ago
  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.
  - antonkm 7y ago
    Why not: .center { display: flex; justify-content: center; align-items: center; } ?
    - karatestomp 7y ago
      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.
      - 7y ago
rckoepke 7y ago
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.
- ipselon 7y ago
  Thank you, I'm glad to hear the product came in handy.
abinaya_b 7y ago
This is pretty neat, I would love to use it.
abinaya_codes 7y ago
Can't wait to use it, thanks for doing this.
verdverm 7y ago
GPLv3... guess we'll have to pass on it
- ipselon 7y ago
  Why? You can use it to develop apps without any restrictions.
  - verdverm 7y ago
    Corp lawyers have said no GPLv3 for tools like this before
    - dentemple 7y ago
      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).
  - chii 7y ago
    I would offer a commercial licence for a fee. It should come with some level of support, and use this to fund further development.
zahreeley 7y ago
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.
trenchgun 7y ago
This does seem promising. I am doing a school project with react & nodejs - I will try using this and see how it goes.
potench 7y ago
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 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?
- ipselon 7y ago
  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.
ReD_CoDE 7y ago
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_guide/getting_started/interface.html https://animation-nodes-manual.readthedocs.io/en/latest/user... [2] https://github.com/IfcXtreme/IfcXtreme/issues/2#issuecomment-591817832 https://github.com/IfcXtreme/IfcXtreme/issues/2#issuecomment...

178 points by ipselon 7y ago

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

rickyc091 7y ago
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.
- reflectiv 7y ago
  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.
  - ipselon 7y ago
    Here is the timelapse video: https://youtu.be/5b2MAk95W8s https://youtu.be/5b2MAk95W8s
azimuth11 7y ago
This is a good idea. It would also help sell people if the example was changing or adding something to a non-trivial layout.
ipselon 7y ago
I'm recording the video now. It will be available in two or three hours. Thanks for the advice
- hardwaresofton 7y ago
  No problem -- Looking forward to taking another look at the project!
ipselon 7y ago
Here is the timelapse video: https://youtu.be/5b2MAk95W8s https://youtu.be/5b2MAk95W8s
- hardwaresofton 7y ago
  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/jpuri/react-draft-wysiwyg - https://github.com/BuilderIO/builder https://github.com/BuilderIO/builder - https://github.com/blocks/blocks https://github.com/blocks/blocks - https://github.com/artf/grapesjs https://github.com/artf/grapesjs
  - verdverm 7y ago
    Builder is not actually open source Blocks is alpha Grapes is ok, but the repo maintainer is not the greatest
    - jhowell 7y ago
      What in your opinion is wrong with the Grapes maintainer? The comment seems like an indictment of some sort without obvious evidence.
      - verdverm 7y ago
        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.
  - mattferderer 7y ago

mywacaday 7y ago

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

Sharma 7y ago

https://divjoy.com/ 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)

ipselon 7y ago
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.

visarga 7y ago

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.

ipselon 7y ago
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.
karatestomp 7y ago
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.
- antonkm 7y ago
  Why not: .center { display: flex; justify-content: center; align-items: center; } ?
  - karatestomp 7y ago
    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.
    - 7y ago

rckoepke 7y ago

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.

ipselon 7y ago
Thank you, I'm glad to hear the product came in handy.

abinaya_b 7y ago

This is pretty neat, I would love to use it.

abinaya_codes 7y ago

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

verdverm 7y ago

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

ipselon 7y ago
Why? You can use it to develop apps without any restrictions.
- verdverm 7y ago
  Corp lawyers have said no GPLv3 for tools like this before
  - dentemple 7y ago
    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).
- chii 7y ago
  I would offer a commercial licence for a fee. It should come with some level of support, and use this to fund further development.

zahreeley 7y ago

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.

trenchgun 7y ago

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

potench 7y ago

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 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?

ipselon 7y ago
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.

ReD_CoDE 7y ago

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_guide/getting_started/interface.html https://animation-nodes-manual.readthedocs.io/en/latest/user... [2] https://github.com/IfcXtreme/IfcXtreme/issues/2#issuecomment-591817832 https://github.com/IfcXtreme/IfcXtreme/issues/2#issuecomment...