GrapesJS out in the wild

[chrisedington]

Hi,

I wanted to check out some examples of how people are using GrapesJS and how they may have extended it or customized it to their needs.

Would be cool if anyone with a public facing (I guess even a screenshot) site commented on this issue to build a list of current uses of this great extension!

[arthuralmeidap]

Unfortunately, I can disclosure the app built on top of GrapesJS, but I have been working on an UI tool to build E-mail marketing. We have a lot of customizations/integrations to improve the existing greatness of GrapesJS like creating a custom Asset Manager; Social blocks (to add social medias to the email);

[tristanMatthias]

I'm using in Origami CMS!

[artf]

@tristanMatthias wow! seems quite promising 👏

[tristanMatthias]

Thanks @artf! I need a lot of help 😅

[noogen]

Still a WIP, I'm using it to build new form components: https://niiknow.github.io/grapesjs-components-farmer/

Mainly focus on getting unique Name field, which are important for Form submission. Also implement doTjs for templating, so I can work on supporting additional CSS framework with initial support of Bootstrap4.

[artf]

@noogen great, thanks for sharing

[loganvolkers]

We use GrapesJS to power our CMS at http://saasquatch.com

Widgets

• GrapesJS powers the editing of the content in our in-app javascript widget
• We have customized most of the toolbars, removed most of the default components, and have it made up of only custom web components
• Plugged in https://cloudinary.com/ for asset management
• It works pretty great with Web Components and https://stenciljs.com/ ❤️
• Recommendation: Use GrapesJS with Web Components

Emails

• We also use it for HTML email editing, but find that it isn't great (because HTML emails are a nightmare to get right, not directly a fault of GrapesJS....) We're looking to switch to GrapesJS + MJML or https://beefree.io/ to make the end-user experience more bearable.
• Recommendation: Avoid GrapesJS for plain HTML email templates

[pedroclayman]

Hey @loganvolkers, I know it's been years since your comment, but I was wondering - which solution did you go for for the email editor use case? Was it beefree.io, grapesjs+MJML or something else? How did it work out? Thank you

[loganvolkers]

Hey @loganvolkers, I know it's been years since your comment, but I was wondering - which solution did you go for for the email editor use case? Was it beefree.io, grapesjs+MJML or something else? How did it work out? Thank you

We're still on GrapesJS for emails.

I wish that MJML had more momentum. Unfortunately I don't even have a recommendation for which email builder to use:

• Builders that can import HTML and use the HTML as the persisted source of truth are walkways flakey and struggle with markup (e.g. GrapesJS)
• Builders that provide higher level components as the persisted source of truth (e.g. BeeFree) lock you into their component format for all time.

On the web there is the web components standard in all browsers to help you escape the lock in. We wrote saasquatch/raisins and migrated seamlessly from Grapes because of that standard technology for components.

There is no standard system for email components, despite some hope that MJML could become a defacto standard.

So, when you're picking an email editor, you're picking flakiness in editing (e.g. Grapes) or infinite vendor lock in (e.g. BeeFree).

Good luck with the choice and let me know if you can escape that trade-off

[Jogai]

Just discovered EmailBuilderJs. No mjml stuff tough...

[artf]

Amazing work @loganvolkers thanks for pointing out your use cases

[gabrigcl]

I'm using grapesjs as the core of our online ebook creator SaiteBooker: www.saitebooker.com.br. It's still in development and this public version is a prototype.

[artf]

@gabrigcl fantastic use case 👏

[trafalmejo]

Hi Guys,

I am using Grapesjs to help people to create GUIs to control interactive installations:
OSCAR create responsive and beauty GUIs to control your installations

[lcsdms]

We use GrapesJS to power our CMS at http://saasquatch.com

Widgets

• GrapesJS powers the editing of the content in our in-app javascript widget
• We have customized most of the toolbars, removed most of the default components, and have it made up of only custom web components
• Plugged in https://cloudinary.com/ for asset management
• It works pretty great with Web Components and https://stenciljs.com/ ❤️
• Recommendation: Use GrapesJS with Web Components

Emails

• We also use it for HTML email editing, but find that it isn't great (because HTML emails are a nightmare to get right, not directly a fault of GrapesJS....) We're looking to switch to GrapesJS + MJML or https://beefree.io/ to make the end-user experience more bearable.
• Recommendation: Avoid GrapesJS for plain HTML email templates

Looks like there's a new one for MJML available: https://grapesjs.com/demo-mjml.html (https://github.com/artf/grapesjs-mjml)

[edvinasba1]

@froderf May we see some screenshots or maybe a demo?

[robhoward]

We're upgrading to GrapesJS for our Landing Page and Email designers in DailyStory.

We made quite a few changes, mostly to turn-off or disable certain functionality while also writing all new components from the ground-up so we could control the editing experience (we limit what you can/cannot do in the designer), e.g. where blocks and components can be placed.

And, all the landing page components are built around Bootstrap. Just keeps things super-simple for our customers.

We then had to start from scratch and write another set of components / blocks from the ground up for email templating with tables to work in an email-friendly way while controlling what could/could not be done in the editor. We needed different types of components for different situations, e.g. a non-editable/removable layout container table vs. a draggable content section table.

We also integrated our own file manager.

We're launching our landing page editor to our customers in 2 weeks (still putting the finishing touches on it). We're planning to launch our updates to the email editor in late July. We started both these projects about 9 months ago (worked on them on-and-off). I'll share some screen shots of the email editor later.

Great project @artf

[artf]

Amazing work @robhoward thanks for sharing

[ibtissammoufid]

@BerkeAras unfortunately, I have to work with Angular to build a page builder, and since it would be difficult to start from scratch, I thought GrapesJs would be a good starting point, do you know any better options, thanks a lot for your answer!

[Jogai]

It may not be a beginner task, but you should be able to integrate it into an angular environment. That said, this is the wrong issue to have this discussion.

[anlumo]

My project has finally been released, so I can show it off now:

It's part of our tabletop RPG battlemap editor DungeonFog and used for creating notes and adventure books for game masters. The idea is that you can print them to PDF from the browser, so it's kinda like a simpler InDesign.

[artf]

Awsome project @anlumo and thanks also for being an active contributor on GrapesJS, I hope to continue seeing you here :)

[annus97]

Hello everyone, we want to build a page builder using Garpejs and angular, has anyone ever used it with angular? I'm a beginner and I would appreciate some guidelines or recommendations, thanks!

Check this article @ibtissammoufid: https://esketchers.com/integration-of-grapesjs-with-angular/

[Mambatukaa]

@anlumo Hello Sir 👋 . I'm trying to make a page structure on grapesjs. Could you share with me how to add pagination in DungeonFog's GM-notes?

[anlumo]

@anlumo Hello Sir 👋 . I'm trying to make a page structure on grapesjs. Could you share with me how to add pagination in DungeonFog's GM-notes?

Unfortunately, CSS doesn't allow for controlled pagination (it's not designed for print), so this is all a big hack.

Every page is a div sized according to the paper size (directly in millimeters) and the wrapper only allows page elements in it. The CSS disables all print margins and replaces them with regular CSS padding.

It's not possible to overflow text from one element to another in CSS, so page wrapping has to be done manually by the user.

Additionally, there's a bug in Chrome concerning page margins, which I reported here. It's still open after about 1.5 years.

[Jogai]

Guys, this belongs in an issue on its own, not here at least

[ronaldohoch]

I am very happy to be able to show you our version of GrapesJs, I have been working to adapt GrapesJs with my colleague @gustavohleal for over a year and it is already being used by approximately 100 customers. Let's release it little by little to the others ^^

We have two versions of grapesJs, Landing Page version and Email Marketing version using mjml, In addition to a css work to customize the editor, we work developing plugins, traits and custom styles as well, in addition to reporting many bugs and opening several discussions as well. and of course, helping the community whenever possible!

Thank you, @artf and the community ♥

[GoodPHP]

Discover newly preset for GrapesJS. White colors with full functionality for webpage / newslatter.

Whitener

Download / Demo:
https://gjs.market/products/whitener-preset-grapesjs

[Mambatukaa]

@anlumo Hello Sir 👋 . I'm trying to make a page structure on grapesjs. Could you share with me how to add pagination in DungeonFog's GM-notes?

Unfortunately, CSS doesn't allow for controlled pagination (it's not designed for print), so this is all a big hack.

Every page is a div sized according to the paper size (directly in millimeters) and the wrapper only allows page elements in it. The CSS disables all print margins and replaces them with regular CSS padding.

It's not possible to overflow text from one element to another in CSS, so page wrapping has to be done manually by the user.

Additionally, there's a bug in Chrome concerning page margins, which I reported here. It's still open after about 1.5 years.

Could you share with me that GM-notes source code. I want to customize grapesjs like yours. But I don't know how to customize like that.

[GoodPHP]

Marketplace for plugins / presets on GrapesJS

Website:
https://gjs.market

There are any users able to post feature for community.

[aclarembeau]

We're using it too on our website: https://www.touchlead.app/
We use it to allow users building custom branded emails in our marketing automation tool

[toiyabe]

I'm using GrapesJS as our page and template builder with our open source CMS called Cosmos (see also the Git repo). The product uses GrapesJS, CKEditor 5, VS Code (Monaco), Filerobot image editor, and Filepond together.

I have to say GrapesJS is really a wonderful thing. Works really well and the documentation is super helpful.

Our rendition of GrapesJS automatically supports Bootstrap 4 and 5, and Tailwind--more UI frameworks to follow. The way it works is that it detects what UI is being used and automatically loads the plugin(s) for it.

I'm also starting to add my own custom components as well. I have a video and screenshot below.

Demonstration video: https://www.youtube.com/watch?v=mVGPlbnbC5c

[artf]

well done @toiyabe 👏

[GJSDocs]

Hi everyone 👋

Created GJSDocs — a lightweight document builder layer built on top of GrapesJS that focuses specifically on:

template-based document editing
dynamic variables (e.g. {{name}}, {{price}})
SaaS integration use cases (invoices, contracts, emails)
faster setup of document systems inside products
integration with crm (Airtable, HubSpot, Google Sheets, Salesforce, Stripe, Zapier, and Rest API)

Live demo: https://gjsdocs.com/