Show HN: GrapesJS – Open source tool for building templates easily(grapesjs.com)
grapesjs.com
Show HN: GrapesJS – Open source tool for building templates easily
http://grapesjs.com/
9 comments
'- 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.
'- 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.
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.
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.
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/
+ 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 :)
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.
I view these as prototyping tools for management.
Although personally I think Sketch is even easier to use for complex workflows.
Although personally I think Sketch is even easier to use for complex workflows.
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'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.
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
According to the drawn structure those nested divs are totally valid
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.