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

[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

[DavidSporer]

We're using GrapesJs as our email editor for Passcreator. Most changes were simply styling and a couple of changes regarding to the column blocks of emails. We still need to revamp it since we didn't spend too much time integrating it last year but it's working quite well.

[tasham16]

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

@loganvolkers do you have a coded example of how you integrated the web components with grapesjs?

[ThatoLesetla]

Yes I do, I’ll have to upload it on GitHub then I’ll send It to you. I was working on a website builder so it appeared to be a great framework to use

On Thu, 03 Oct 2019 at 22:23, tasham16 [email protected] wrote:

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

[image: 2019-03-06 18_22_40-] https://user-images.githubusercontent.com/1157086/53927888-0e620b80-403d-11e9-9fe8-f0cbc1366b13.png

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

[image: image] https://user-images.githubusercontent.com/1157086/53928211-21291000-403e-11e9-8458-8ec81e22ff02.png

@loganvolkers https://github.com/loganvolkers do you have a coded example of how you integrated the web components with grapesjs?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/artf/grapesjs/issues/1798?email_source=notifications&email_token=AK2F6JKLLSQTQMOBCUQZGUDQMZIF3A5CNFSM4GXRC75KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAJPHVA#issuecomment-538112980, or mute the thread https://github.com/notifications/unsubscribe-auth/AK2F6JM5F4NG6P7U37IU2N3QMZIF3ANCNFSM4GXRC75A .

[ThatoLesetla]

I’m was also struggling with saving the content on the database. Is it possible to chat on WhatsApp?

On Thu, 03 Oct 2019 at 22:54, Thato Lesetla [email protected] wrote:

Yes I do, I’ll have to upload it on GitHub then I’ll send It to you. I was working on a website builder so it appeared to be a great framework to use

On Thu, 03 Oct 2019 at 22:23, tasham16 [email protected] wrote:

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

[image: 2019-03-06 18_22_40-] https://user-images.githubusercontent.com/1157086/53927888-0e620b80-403d-11e9-9fe8-f0cbc1366b13.png

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

[image: image] https://user-images.githubusercontent.com/1157086/53928211-21291000-403e-11e9-8458-8ec81e22ff02.png

@loganvolkers https://github.com/loganvolkers do you have a coded example of how you integrated the web components with grapesjs?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/artf/grapesjs/issues/1798?email_source=notifications&email_token=AK2F6JKLLSQTQMOBCUQZGUDQMZIF3A5CNFSM4GXRC75KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAJPHVA#issuecomment-538112980, or mute the thread https://github.com/notifications/unsubscribe-auth/AK2F6JM5F4NG6P7U37IU2N3QMZIF3ANCNFSM4GXRC75A .

[tasham16]

Yes I do, I’ll have to upload it on GitHub then I’ll send It to you. I was working on a website builder so it appeared to be a great framework to use … On Thu, 03 Oct 2019 at 22:23, tasham16 @.***> wrote: 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 [image: 2019-03-06 18_22_40-] https://user-images.githubusercontent.com/1157086/53927888-0e620b80-403d-11e9-9fe8-f0cbc1366b13.png 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 [image: image] https://user-images.githubusercontent.com/1157086/53928211-21291000-403e-11e9-8458-8ec81e22ff02.png @loganvolkers https://github.com/loganvolkers do you have a coded example of how you integrated the web components with grapesjs? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1798?email_source=notifications&email_token=AK2F6JKLLSQTQMOBCUQZGUDQMZIF3A5CNFSM4GXRC75KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAJPHVA#issuecomment-538112980>, or mute the thread https://github.com/notifications/unsubscribe-auth/AK2F6JM5F4NG6P7U37IU2N3QMZIF3ANCNFSM4GXRC75A .

@ThatoLesetla I am doing something similar! Yes please let me know if you upload the code.

[rlopzc]

@loganvolkers man that looks amazing!

Do you have an example or the code uploaded about grapejs + web-components?

[tasham16]

@ThatoLesetla any updates?

[pvbergen]

I can add our use case to this issue: https://www.drupal.org/project/pagedesigner

We have created a Drupal 8 module based on grapesjs for visual editing of pages. We utilize grapesjs as the frontend and wrote a custom interface to Drupals backend. This allows us to layout individual nodes with the WYSIWYG interface provided by grapesjs and store the components and traits in a structured tree.

Here's a screenshot of one our demo pages: We customized the css quite a bit, but the js of grapes is untouched.

I had a talk end of October at DrupalCon Amsterdam (Making Drupal as easy to us as Squarespace) and people were very impressed. Lot's of that is thanks to the great work @artf and all the other contributors provide for grapesjs. Thanks very much!

[artf]

Thanks @pvbergen for sharing the use case and making your module available for others. Great talk and the integration seems quite solid 👏

[Jogai]

We're sending more than 1.5 million emails each week to more than 300K subscribers in 20 lists of subscribers (its not spam, they subscribed, maybe after a bit encouragement from us). Our system uses a template to generate a prefilled newsletter which is rendered in grapesjs. Users drag stuff around and then send it.

[GoodPHP]

We're creating websites builder projects. We often use GrapesJS like editor for pages or like editor for newsletter.

We provide services on GrapesJS: https://devfuture.pro/grapesjs-development/

Some examples:

GrapesJS new design GIT: https://github.com/GoodPHP/GrapesJS-devfuture Demo: https://devfuture.pro/live/new-design-grapesjs/

GrapesJS Multiple Pages

[HansSchouten]

Thanks for the awesome work on creating GrapesJS!

In my web projects I love to have the power of PHP frameworks like Laravel to create complex custom dynamic components, but want to offer my clients the ease of managing pages using a pagebuilder. That is why I am developing PHPageBuilder, which allows to add GrapesJS to any PHP project. With Laravel Pagebuilder specifically for using GrapesJS in any Laravel project.

[artf]

@HansSchouten truly amazing, and thanks for the open-source libraries

[amodliszewski]

At Simple LMS we have decided to use GrapesJS as page editor for our clients. We have also created additional integration with our built-in file library, allowing to pick images that are available on website. We also did changed layout a bit.

But there is a lot to do with it, we are still missing some easy to use components and integration with our video library for video component.

[BerkeAras]

Using it in experiencedCMS. An intelligent Content Management System with an Artificial Intelligence.