
Show HN: GrapesJS – Open source tool for building templates easily - artf
http://grapesjs.com/
======
spangry
Pretty slick! I like the fact that it's open-source and client-side js. Can
definitely see how this could integrate with online IDEs like Ace.

A few bits of feedback (although perhaps you just haven't got around to
implementing these yet):

\- On the canvas, is there some way to make it obvious why boxes are
relatively positioned a particular way? For instance, when I add a new box
next to the iPhone picture, it's not visually obvious why there is fairly
sizable top padding. Maybe light grey shading to represent padding and such?

\- Is there any reason why you wouldn't merge the 'select' tool and the 'move
elements' tool into the single button (and make it the default selection)?

\- Any possibility of multi or group select, for quick deletion of multiple
elements?

\- A 'new blank canvass' button might be handy.

Anyhow, this is some great work. I often just want to put together a very
basic web interface for some personal project, and I think your tool is at
exactly the right level of simplicity/complexity for that.

~~~
artf
'\- On the canvas, is there some way to make it obvious why boxes are
relatively positioned a particular way? For instance, when I add a new box
next to the iPhone picture, it's not visually obvious why there is fairly
sizable top padding. Maybe light grey shading to represent padding and such?'
\- Like this, I'll try to figure it out how to implement it

'\- Is there any reason why you wouldn't merge the 'select' tool and the 'move
elements' tool into the single button (and make it the default selection)?'
'\- A 'new blank canvas' button might be handy' \- Honestly the only reason is
to avoid accidental move during selection, but with the API it will be
possible to add custom commands to your own editors

'\- Any possibility of multi or group select, for quick deletion of multiple
elements?' \- Well, it was already in my todo list, so I hope to implement it
soon :)

Thanks spangry, I glad you like it.

------
thenomad
OK, really blunt question for the OP - what exactly does this do?

It looks like a visual web design editor a la Bootstrap Studio et al, but you
mention it's specifically for templates.

I'm a little confused, and the landing page tells me very little about what
it's for.

~~~
artf
Yeah, I understand that it could be confusing for someone, but for now I
suggest you to check readme file on Github and I'll try my best, for next
release, to make the site a little bit more understandable. Thanks

------
artf
There is still a lot of work to do, but it took me quite a while to bring out
what you see now, so I'm looking for some feedback.

~~~
Rinum
Currently I use the browser's dev tools and that allows me to pretty much do
the same thing as this tool (I've got the CSS properties memorized at this
point). I probably won't use this, but kudos to you for putting in all that
work! I did find your tool intuitive to use, nice job. An awesome feature to
have is the ability to resize (and specify the size of) the template window so
we could test responsive design and different device sizes.

~~~
artf
Thanks Rinum. I agree with you, for already experienced developer browser's
dev tools are already enough, but with the possibility to be integrated with
other applications it could be used inside some CMS for more powerful template
editing.

------
jarcane
It is an irony to me that after years of developers looking down on GUI tools
for building websites, to the extent that many of the biggest names have been
discontinued or struggle to maintain profitability, there is now this sudden
explosion in GUI layout tools for websites. This is at least the third or
fourth one I've seen on HN in the last week.

~~~
true_religion
I view these as prototyping tools for management.

Although personally I think Sketch is even easier to use for complex
workflows.

------
fiatjaf
That must have been a hell lot of work.

~~~
brianwawok
My thoughts too. Kudos for the open source!

------
lazers
I'd like to see support for Viewport units - vh, vw, vmin, vmax. Really cool
tool but I just dont see myself ever using anything but a text editor.

------
CommanderData
I like it! There are no or a lack of drag and drop editors on the web, what I
mean is using true drag and drop with absolute positioning, granted it would
also require a script to render. What frameworks and libraries are you using
on this project?

~~~
artf
Mainly is made up of Backbone, Codemirror, Keymaster, Spectrum and RequireJs.
Thanks for remind me of putting this information on readme file

------
jessedhillon
I would like it if you'd put a video on the landing page, to show mobile users
what it can do and how it works.

~~~
eecks
Yeah you need a video that is a sped up visual of someone constructing a
template

------
ivan_ah
Not sure what I was expecting, but the generate source doesn't look all that
useful:

    
    
        <div id="c59">
          <div id="c60">
            <div id="c61">
              <div id="c62">
                <div id="c63">GrapesJS
    

reminds me of source when you export html from google docs...

~~~
artf
According to the drawn structure those nested divs are totally valid

