4 ms·
Show HN: GrapesJS – Open source tool for building templates easily
- artf 11y agoThere 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.
- bucaran 11y agoI 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/
- artf 11y agoThank 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 :)
- Rinum 11y agoCurrently 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 11y agoThanks 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.
- arihant 11y agoAbility to change/rename ids from within the UI would be nice.
- artf 11y agoThanks arihant, great advice
- fiatjaf 11y agoThat must have been a hell lot of work.
- brianwawok 11y agoMy thoughts too. Kudos for the open source!
- jarcane 11y agoIt 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.
- artf 11y agoIt's true jarcane, but which one of those are open source? I always seen something similar but with paid plans
- sergiotapia 11y agoJust 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.
- true_religion 11y agoI view these as prototyping tools for management. Although personally I think Sketch is even easier to use for complex workflows.
- true_religion 11y agoI view these as prototyping tools for management. Although personally I think Sketch is even easier to use for complex workflows.
- thenomad 11y agoOK, 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 11y agoYeah, 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
- CommanderData 11y agoI 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 11y agoMainly is made up of Backbone, Codemirror, Keymaster, Spectrum and RequireJs. Thanks for remind me of putting this information on readme file
- lazers 11y agoI'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.
- spangry 11y agoPretty 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 11y ago'- 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.
- jessedhillon 11y agoI 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.
- ivan_ah 11y agoNot 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 11y agoAccording to the drawn structure those nested divs are totally valid