GrapesJS content editor

I’ve been looking for a solution to go with the system I’m building in Wappler which gives the site owner a good way of editing content pages. Most of the site is data driven but there are some pages which are general content (like About Us or Contact Us) so I want to give them a good and easy editor for these pages.

I’ve found grapesjs.com which looks perfect. Has anyone got any experience of this and should it be straighforward using it within my Wappler project?

Think you meant grapesjs.com. Looks like an open source version of Webflow to me. I can’t see much difference to the current Wappler editor apart from some more pre made blocks.

Thanks @max_gb. I’ve corrected my original post.

I’m not looking for something instead of Wappler, it’s for site admins to edit their own content in an easy and powerful way. Think of it like Wordpress. I build the framework and all the dynamic content, they manage the data and also edit standard pages like About Us using something like grapesjs.com.

I see now, I believe a lightweight or headless CMS is your best option. (Database-free versions are available). Something like directus.io which I’ve used before is a good contender.

Yep, I’ve already looked into that and strapi.io but they don’t seem to have the page building features that grapesjs.com seems to have. I don’t want it for the general data management, I want it specifically for building pages with normal content.

Do you want your users to be able to create fresh new html pages? Or you just want them to be able to change content and design preexisting pages?

Both ideally. I want to give them an area in admin where they can edit existing pages but also create new ones. The page content will sit in the database but they won’t know how to use html or bootstrap or anything like that so something simple to enable them to put content onto the page.

This looks ideal on first glance:
https://grapesjs.com/demo.html

And have you figured out how it would play with app connect? Or are we speaking just pure barebone html with no relation or interaction with other parts of your wappler app? In other words will they be able to edit wappler pages?

This would effectively be separate but just use the same database.

In the old days I would create an area in the admin and use TinyMCE for the page content but that was before Bootstrap and responsive design so now I want something that can handle that.

Ok. Now I understand what your use case is. I don’t have an answer for you right now as I’ve never used this library, but I will have a look at it and see If I can make it work within wappler :slight_smile:

Edit: Regarding your edit. The first thing I noticed is that grapesjs is not compatible with bootstrap. At least not out of the box.

1 Like

I’ve been checking it high level and I don’t see why it wouldn’t work.

The tricky part is loading and storing content from database. This is documented here: https://grapesjs.com/docs/modules/Storage.html
It seems you would need to create a server connect endpoint to receive the html and store it and another one to load it into the editor.

Also if you want to use bootstrap you need to use a third party plugin as it doesn’t support it out of the box.

1 Like

Superb. Thanks @JonL, very much appreciated. I shall investigate further and have a go at implementing it. I am desperate to not have to install something like Wordpress just for the handful of ‘static’ pages which will need editing from time to time by the site admins.

1 Like

@sitestreet Did you endup integrating grapesjs for your client’s static html self-service?

I was wondering why didn’t opt for webflow to your clients?

@Akayy - no, I’ve not progressed with GrapesJS… yet. I will, I’m sure, but haven’t had time. I have one particular project which I think will benefit from it but I’ve not quite reached that stage of the development.

1 Like