Show HN: GrapesJS – Open source tool for building templates easily | Hacker News Reader

Show HN: GrapesJS – Open source tool for building templates easily

grapesjs.com

74 pointsartf25 comments

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.

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

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.

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

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.

I love what you are doing. I really think the way we build websites today is fucked up, so I see you are trying to move things forward, but we need something more along the lines of:

+ http://playground.webflow.com/

Thank you bucaran, I really appreciate you like it. Anyway, Webflow is one of most powerful website builder I've ever seen and when I discovered it I thought there is no reason to continue to develop GrapesJS, but I've also seen that there were no similar free/oss solutions that could be maybe integrated with other applications. Anyway for the next release (beta) I would like to integrate Breakpoint Manager (for media queries) and something that would let GrapesJS manage classes, this will be very similar to webflow concept :)

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.

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.

Ability to change/rename ids from within the UI would be nice.

Thanks arihant, great advice

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.

Just because they're launched doesn't mean they're actually used. I find it hard to believe any web developer would use one of these tools.

It's true jarcane, but which one of those are open source? I always seen something similar but with paid plans

I view these as prototyping tools for management.

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

That must have been a hell lot of work.

My thoughts too. Kudos for the open source!

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.

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?

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

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.

Thanks for the advice, I should definitely improve the site.

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

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

According to the drawn structure those nested divs are totally valid

Reply on news.ycombinator.com