GrapesJS – Free and Open Source Web Builder Framework | Hacker News Reader

GrapesJS – Free and Open Source Web Builder Framework

grapesjs.com

187 pointsquickthrower252 comments

I'm impressed by this builder. It is without any doubt an awesome technical achievement. However, I don't picture who will be using it in this form:

a) It feels too advanced for non-technical users. Flex properties, CSS classes, weird px/vh units, etc.. It just seems very hard to understand for non-technical users.

b) For technical users it just feels... clumsy. It is hard to pinpoint the box you want to change, it is hard to move things around, it is hard to find the property you want, etc.. I can't imagine myself using this editor over any of the several awesome "css toolkits" and their pre-made templates/widgets (bootstrap, bulma, uikit, etc.).

Does anyone here have experience on a project done with this editor (or something similar) where the client ended up actually using and appreciating it?

I don't think you deserve downvotes for asking this question.

The technical/non-technical dichotomy is generally too simple. In creative fields, there's a substantial number of users who fall in the middle; technically oriented but not into programming. Think of 3D modeling tools: you need a definite technology-oriented mindset to master the concepts in something like Maya or Blender — yet these users usually steer clear of writing scripts or plugins themselves.

In web development, the field is more muddled because so much of what you might want to create will require custom programming (much more so than in 3D animation). But even on a professional level, there is clear demand for people who are experts in CSS and HTML but not necessarily JavaScript or back-end. Visual tools can be a good entry into this world and can also be very efficient in the hand of freelance designers, although IMO they're quite far off from being useful for professional teams (primarily because the tools are not adaptable to team workflows and tooling, of which there's a veritable jungle in the front-end world).

There's a giant market for these tools. It's a common misconception that "technical user" means someone who deals with code but that's just a narrow subset.

Have you seen Photoshop these days? Or illustrator, indesign, after effects, or any other graphics and layout tools? They're not exactly simple and require the same kind of technical skills as coding up some HTML. Visual products are usually best created using visual tools and the success of Squarespace, Wix and Webflow seems to show that this trend is only increasing for websites.

> There's a giant market for these tools.

I'm sure it sells and people would pay for it. What I'm not so sure about is whether it actually works (in the sense that people end up using it and creating sensible pages they're proud to own). This is why I asked for some anecdata about happy clients.

> Have you seen Photoshop these days? Or illustrator, indesign, after effects, or any other graphics and layout tools?

I haven't seen any layout tool that felt anywhere nearly as good and/or practical to use as photoshop is for editing graphics or InDesign is to prepare documents/flyers/etc. The problem of the modern web is that a well-built page should work from a cellphone all the way up to big desktop screens. IMHO this is an unsolved problem for all GUI tools still.

Lastly, "technical user" doesn't need to mean "deals with code", except when "dealing with code" is the most efficient approach to reach a professional result. Just like CAD people use their program's built-in console all the time, I would argue that producing professional websites pretty much requires fiddling with html/css (and even some javascript) nowadays.

It works given the success of the companies I quoted. People dont keep paying and using tools that dont work.

Websites are just a different kind of complexity in a constantly changing environment that hasn't had good tools so far, especially if that tool itself is a webapp, which I think only further creates demand for these kind of projects to exist and get better.

All of your examples have huge collections of templates and employ lots of wizard-guided steps that land you to a pretty generated page to get started. These are much easier to use than the "power-editor" showcased here.

How do you know that people actually care about the "power-editor" and aren't just paying for that (and domain registration, hosting, maintenance)?

Have you seen Webflow? https://webflow.com/designer

Designers and agencies building sites is their main customer base.

Well, this has been a surprise for me. I must concede that Webflow feels much better than GrapesJS, both in general polish and in functionality. I do see a class of power users (agencies, designers) using that now.

Let's hope that GrapesJS can reach that level of utility and polish someday. Kudos to the authors and my best wishes for Graphes' future!

It looks like a free/open source version of Webflow, which has a good amount of users (Webflow caters to designers, marketers), so I definitely think it fills a need. It's basically today's version of Frontpage/Dreamweaver. I'd use it to hack together something quickly before refining it in code.

It seems to sit somewhere near Dreamweaver did in the before-times. That had a big following among people who didn't want to code but were up for learning a fiddly, slightly technical tool that was at least broadly wysiwyg.

I literally thought about this idea a few days ago and haven't found anything for Bulma.css so I created a quick mockup on codepen [0]. But I see this is much more advanced.

Do you use a frontend framework like Bootstrap or Foundation or is it a custom implementation?

The reason why I'm asking is that basically we want to prototype the layout with an existing framework, export it and then extend it later in the backend.

This tool is perfect if you want to create a single page or a html email, but if you want to build the whole frontend for a big app or site, you want to use an existing framework that's widely supported (if of course you want to use a framework)...

Great job otherwise! I see myself using it for specific projects

[0] https://codepen.io/yulian/full/rRNxJx (still work in progress)

Check out PineGrow (Offline) and Webflow (Partly data-driven) too, it's quite impressive what they can do.

I've built a site builder 5 years ago for a client using Semantic UI, it was a great choice for data-driven sites but hard for custom sites (which pinegrow and webflow are more suited for).

Many site-builders these days grow their own framework to ensure a lock-in effect, you can't move the site off the platform because it takes too much work to re-bind the data and functionality (Especially eCommerce).

As far as I've seen, these tools are indeed useful. But you are right about the lock-in. I think this is perfect for non-developers (of small budgets), allows them to create a "basic" website, but sometimes you just require another framework.

O/T but I hate how code pen won't render content if the browser doesn't send a referrer.

Your link doesn't work for me, and stuff like examples on plotly site don't work...

    CodePen requires a referrer to render this. Your browser isn't sending one.

Why should it need a referrer!

Here is CodePen's justification for requiring a referrer:

https://blog.codepen.io/2017/10/05/regarding-referer-headers...

They don't say why exactly though.

That actually interests me, do you have a Github?

Background is that I am building a flexible frontend solution for databases with Bulma, and would like to configure it via YAML/JSON, but of course a drag-n-drop solution would make some things much easier.

Yes: https://github.com/ioulian

I'm planning to put this app on github once I refactor JS. I hope I'll finish it in the next few weeks. (don't wait it to be as advanced as the Grape one, but it'll contain all bulma components and classes).

I'll also add an export function as HTML. Maybe a json export would be lovely too.

Please dump it to your github right now. I have seen too many projects that never got cleaned up and simply died.

You can find it here: https://github.com/ioulian/bulma-layout-builder

I've refactored the application, I plan to add the full class list there and components.

Cool, thanks!

I’m working on something pretty similar to what you describe (exports full app, integrates with bulma components). Don’t want to self-promote here, but happy to give you access to the alpha. Email in profile.

Posted about this project little over a year ago. Nice to see it getting some attention again. I noticed that the author also created a hosted service based off the project similar to Wix which is awesome so he doesn't have to depend on donations.

Worth mentioning that this project has a HUGE test suite: https://github.com/artf/grapesjs/tree/dev/test/specs

Also worth mentioning... his github avatar is hilarious: https://avatars2.githubusercontent.com/u/11614725?s=400&v=4

The website says "Featured on YCombinator" which might lead people to believe this was a YC funded project. Is it? If not, I believe there are rules against using their branding in that way.

That said, this is a nice tool. I was going to ask how it differentiated from WebFlow, but it is open source. It is nice to see more tools in this area.

I've seen this here at least once before, but agree that an appearance on HN should not be used to imply a YC endorsement.

They probably meant Featured on HN.

I'd love something like this that I can build into a CMS backend. I haven't dug too deeply here but my primary requirement is along the lines of:

"Can I massively lock things down, remove features and simplify things to the absolute bear minimum?"

I always want to provide "just enough" functionality in this area to do the job. Any more results in training and support costs and gives content editors more footgun ammunition.

>"Can I massively lock things down, remove features and simplify things to the absolute bear minimum?"

I feel like a CMS generally gets too complicated after the first three or four bears, but if you only have one bear protecting your datums it may get lonely and eat them out of boredom; I'd recommend two as the bear minimum.

Thanks. I really must figure out how to get comment reply notifications on HN. That was I might have spotted this in time before my comment was locked for editing.

Did you find the solution?

Small plug for an OSS project my coworker started: Colonel Kurtz: a Block-based content editor. It's absolutely not a "batteries-included" sort of thing but if you're looking for more of a lower-level library with which to build out a custom block-based editor then this is right up your alley.

https://github.com/vigetlabs/colonel-kurtz

I looked through the getting started page.It seems to be completely customizable from the beginning since you build it from the ground up and add the compoments that you need. https://grapesjs.com/docs/getting-started.html

The text on this page is the most invisible I’ve seen for at least a couple of years. It’s both unreasonably light (#606c71) and absurdly thin (Quicksand 300, which is actually more like a 100 weight). Completely unsuitable for body text—I’d say it’s unsuitable for anything below about 50px at any colour, and you wouldn’t catch me using it there, either.

This is great! I am seriously considering using this. My company does email marketing, and most of our staff who do email have limited tech skills (which with email is ok we teach them to keep it simple, obviously dont need js or anything). But I always notice mistakes in putting correct url params, styling quirks, syntax/order problems. I'm seriously considering using this and building custom components to give super use-case specific email newsletter elements - and ONLY those options. And I like the concept of storing simple plain text -> json -> template, so we can integrate into our existing analytics & eventually build out more tracking & automation into the process(copy -> approvals -> html email).

My biggest concern just from reading docs is styling. I see a custom CSS parser.

My question is if you have real test usage for actual widely deployed html email? Like very minimal email specific styling, inline styles, render testing etc.

Any tips or things you've learned if you have real html email examples? I am seriously considering diving in and trying this out and bumping this project up higher on my 'value creation' list!

Good luck with this, it looks great! Thanks for making it.

Some feedback on the demo:

- There are no tooltips for the little buttons in the blue border-tab on the top right of the selected element. I hate clicking things to find out what they do.

- The first thing I tried to do to adjust the height of the selected box was to drag the bottom border. I wish that would have worked.

- When I adjusted the height in the properties panel to the right, I tried to press the keyboard-up arrow. That should work, just like in chrome devtools.

- When I clicked the up arrow inside the property input to move the height off of `auto`, the first place it went was to 0px. Instead, I think it should have calculated the current height and used that as the starting point.

Sorry I didn't take the time to enter all of these on GitHub.

The icons used to illustrate the different flex properties are great. I find the naming in pure CSS super unintuitive e.g. align-content, justify-content, align-self, flex-start.

Are you talking about the {1,1/2,1/3,3/7} Section icons? Or is there something else that I missed?

Awesome, but there's no grid support (yet). I'm currently using:

    nav, header, article, section, form, div, q {
      display: grid;
    }

For my current project and it works really well. Would love to play with Grapes in future though.

That is a neat line of CSS that you have there.

Not sure about how you use 'q' with grid.

I find it is better to learn the elements than the interface to a web builder or a framework. Grid is a game changer and I am not interested in anything that does not use it. Only with grid can you make maintainable HTML and have separation of concerns. Once these things matter to you then the old ways, no matter how 'easy' due to a framework or other hack just don't cut it an more.

I've found that flexbox is even more flexible (no pun intended) for making grids.

One of the things I like most about CSS grid is being able to rearrange template areas for responsive design. Using flexbox inside a grid template area gives us the best of both worlds.

Aah, I hadn't tested grid since it was introduced - yeah, it's definitely the best of both! I wish the support was higher than 87% though, but it's certainly coming :-)

Flexbox is designed for a single axis with optional wrapping. Grid is designed for 2-axis control. If you don't need that then flexbox will usually be faster and easier.

like the idea but not impressed with the demo, it is hard to move things around where I want them. I want the ui to let me position components to any position I'd like, and then translate the layout into clean html/css for me.

Boy, have I got just the product for you! [0] Oh, wait, you said, "clean html/css". /s

[0] https://www.adobe.com/products/dreamweaver.html

I agree. I have found that the best use-case is to import existing HTML emails and then modify/add, as opposed to building them directly in the editor.

Any association with https://github.com/unlayer/react-email-editor

They same to use the same code.

I feel like the UI is very similar to Webflow, which in some way is similar to Photoshop... I quite like that! Is there any library with components like that?

This is pretty cool. Is there something like this for building "slides" like powerpoint decks?

I've used www.slides.com to make and show (pretty simple) presentations, and it's quick and easy for just that.

I've seen pb.goandmake.app but haven't tried it yet. There are probably others...

Does this have some kind of YAML/JSON serialization format so the result could be exported?

Curious, did webflow clone this project and turn it into a business? UI is very similar.

Webflow has been around since earlier than 2016, it may be the other way round.

https://github.com/artf/grapesjs/commit/69cfec68bd5202a1fbc3...

Reply on news.ycombinator.com