Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GrapesJS out in the wild #1798

Closed
chrisedington opened this issue Feb 14, 2019 · 48 comments
Closed

GrapesJS out in the wild #1798

chrisedington opened this issue Feb 14, 2019 · 48 comments

Comments

@chrisedington
Copy link

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!

@artf artf pinned this issue Feb 16, 2019
@arthuralmeidap
Copy link
Contributor

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
Copy link

I'm using in Origami CMS!

@artf
Copy link
Member

artf commented Feb 21, 2019

@tristanMatthias wow! seems quite promising 👏

@tristanMatthias
Copy link

Thanks @artf! I need a lot of help 😅

@noogen
Copy link

noogen commented Mar 2, 2019

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
Copy link
Member

artf commented Mar 3, 2019

@noogen great, thanks for sharing

@loganvolkers
Copy link
Contributor

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

2019-03-06 18_22_40-

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

@artf
Copy link
Member

artf commented Mar 9, 2019

Amazing work @loganvolkers thanks for pointing out your use cases

@gabrigcl
Copy link
Contributor

gabrigcl commented Apr 12, 2019

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
Copy link
Member

artf commented Apr 13, 2019

@gabrigcl fantastic use case 👏

@trafalmejo
Copy link

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
Copy link

lcsdms commented May 26, 2019

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

2019-03-06 18_22_40-

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

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

@edvinasba1
Copy link

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

@robhoward
Copy link

robhoward commented Jun 19, 2019

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.

image

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.

image

We also integrated our own file manager.

image

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
Copy link
Member

artf commented Jun 20, 2019

Amazing work @robhoward thanks for sharing

@DavidSporer
Copy link

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.
image

@GrapesJS GrapesJS deleted a comment from ThatoLesetla Aug 25, 2019
@tasham16
Copy link

tasham16 commented Oct 3, 2019

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

2019-03-06 18_22_40-

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

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

@ThatoLesetla
Copy link

ThatoLesetla commented Oct 3, 2019 via email

@ThatoLesetla
Copy link

ThatoLesetla commented Oct 3, 2019 via email

@tasham16
Copy link

tasham16 commented Oct 4, 2019

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
Copy link

rlopzc commented Oct 9, 2019

@loganvolkers man that looks amazing!

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

@tasham16
Copy link

@ThatoLesetla any updates?

@pvbergen
Copy link

pvbergen commented Nov 28, 2019

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:
image
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
Copy link
Member

artf commented Nov 28, 2019

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

@Jogai
Copy link

Jogai commented Feb 7, 2020

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
Copy link

GoodPHP commented Mar 25, 2020

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
Copy link

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.

PHPageBuilder

@artf
Copy link
Member

artf commented Apr 28, 2020

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

@amodliszewski
Copy link

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.

Zrzut ekranu 2020-05-6 o 12 52 13

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.

Zrzut ekranu 2020-05-6 o 12 51 57

@BerkeAras
Copy link
Contributor

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

@ChrisB9
Copy link

ChrisB9 commented Aug 23, 2020

I am currently developing a Page-Builder for the CMS/PIM pimcore.org inspired by @HansSchouten
https://github.com/ChrisB9/PimcorePageBuilderBundle
It is still in early development but already working

image

@GrapesJS GrapesJS deleted a comment from rajubushanam Aug 27, 2020
@fzerman
Copy link

fzerman commented Dec 31, 2020

I am developing a page builder for my web builder project.
Screenshot from 2020-12-31 13-43-37

I will add my custom managers and a package index repo like a hub. Thanks for this framework.

@millord
Copy link

millord commented Feb 13, 2021

Hello guys!!

How are you doing the integration with the cms. In my case I would do it with ghost or sanity. Where I can find how to integrate it? In the Storage Manager section?

@ibtissammoufid
Copy link

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!

@BerkeAras
Copy link
Contributor

@ibtissammoufid As a beginner, I would not start using angular with GrapesJS. Angular is very complex, GrapesJS can be very complex – not very beginner friendly!

@BerkeAras
Copy link
Contributor

But there is a Medium Blog-Post about integrating GrapesJS in Angular, but unfortunately not in english (in spanish). Try to translate it: https://medium.com/@camiloht23/integración-de-grapesjs-con-angular-11ebf3bb80c5

@ibtissammoufid
Copy link

@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
Copy link

Jogai commented Mar 11, 2021

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.

@GrapesJS GrapesJS deleted a comment from Rakshitha-1996 Mar 23, 2021
@anlumo
Copy link
Contributor

anlumo commented Jul 29, 2021

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

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
Copy link
Member

artf commented Jul 31, 2021

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

@annus97
Copy link

annus97 commented May 17, 2022

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
Copy link

@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
Copy link
Contributor

anlumo commented Oct 21, 2022

@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
Copy link

Jogai commented Oct 22, 2022

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

@ronaldohoch
Copy link

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 ♥

image

image

image

@GoodPHP
Copy link

GoodPHP commented Oct 24, 2022

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

Whitener

Whitener

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

@Mambatukaa
Copy link

@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
Copy link

GoodPHP commented Nov 21, 2022

Marketplace for plugins / presets on GrapesJS

Website:
https://gjs.market

There are any users able to post feature for community.

@GrapesJS GrapesJS locked and limited conversation to collaborators Jul 26, 2023
@artf artf converted this issue into discussion #5255 Jul 26, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests