
Show HN: A front-end visual development tool for React applications - ipselon
https://github.com/webcodesk/webcodesk-srv
======
Sharma
[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
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.

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

~~~
ipselon
Here is the timelapse video:
[https://youtu.be/5b2MAk95W8s](https://youtu.be/5b2MAk95W8s)

~~~
hardwaresofton
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
Builder is not actually open source

Blocks is alpha

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

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

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

------
rckoepke
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
Thank you, I'm glad to hear the product came in handy.

------
potench
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
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
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...](https://animation-nodes-
manual.readthedocs.io/en/latest/user_guide/getting_started/interface.html)

[2]
[https://github.com/IfcXtreme/IfcXtreme/issues/2#issuecomment...](https://github.com/IfcXtreme/IfcXtreme/issues/2#issuecomment-591817832)

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

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

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

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

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

------
mywacaday
Logo reminds me of the Sony Walkman logo
[https://images.app.goo.gl/XnhVcCpKWzaXebwo7](https://images.app.goo.gl/XnhVcCpKWzaXebwo7)

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

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

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

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

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

~~~
verdverm
Corp lawyers have said no GPLv3 for tools like this before

~~~
dentemple
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).

