In 1996, Bill Gates authored an article titled “Content is King” to demonstrate how the internet can evolve as “a marketplace of ideas, experiences, and products-a marketplace of content.” His arguments now, after almost 3 decades, are still pertinent. Content creation has evolved significantly and quickly in the last couple of decades thanks to digitalization and the dynamic approaches introduced by marketers. Besides, coping with the fast-evolving associated market scenarios is not an easy task as well, unless content managers find an easy and elegant way of creating content.
CKEditor is one of the most common tools used by content editors when it comes to content editing. But if editors want to do something more than content editing, they must look for an alternative. This is where GrapesJS comes in as a great competitor. GrapesJS allows users to edit content and play with the HTML structure.
What is GrapesJS?
GrapesJS is a free, open-source web builder framework that helps intuitively build and customize every part of your page/HTML template with its visual editor. To do so, you do not need any prior knowledge of coding. With its advanced drag and drop-enabled builder, you can create complex pages/HTML in no time.
In GrapesJS, a block is a reusable piece of HTML that you can use, e.g., buttons, images, forms, and frames. GrapesJS was initially designed to be used inside the Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors but those WYSIWYG editors were good for content editing but inappropriate for creating HTML structures. Instead of creating an application, they decided to make an extensible framework that anyone could use for any purpose.
GrapesJS is suitable for someone who wants to use its available functionality. But, if you wish to customize GrapesJS according to your requirements, you should consider the following points before using it.
Things to consider before leveraging GarpesJS
- Flexibility of default layout: If you are using the default structure of GrapesJS mentioned on their boilerplate, you cannot set the custom layout for your editor. So, to avoid this issue, you need to create your structure/blocks for Panel Manager, Canvas Manager, Style Manager, Trait Manager, Layer Manager, and Block Manager.
Refer the code below to create custom structure/layout:
- Adding block manager for better responsive components: The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, button, or an entire section with videos, forms, and iframes. GrapesJS block manager has a limited component library restricting the component level property customization, and these components are also nonresponsive. The component is a base element of the template. It might be something simple and atomic like an image or a text box, but also as complex as a card created with different components. If you want to create an advanced version of GrapesJS, you may customize the current block manager as per your needs.
Here is the code to create custom component for block manager:
- Use of MJML plugin for responsive email templates: MJML is an open-source framework/markup language designed to reduce the pain of coding responsive emails. It has its own rich standard components library, which speeds up your development time and lightens your email codebase.
https://www.npmjs.com/package/grapesjs-mjml
Here is the plugin that enables the usage of MJML components inside the GrapesJS environment.
- Custom style manager for better CSS support: Sometimes you need more than the available defaults. GrapesJS built-in style manager (default) UI is a lightweight component with its built-in properties. The defaults cover the most common styling properties, but writing your custom style manager UI is advisable if you need more advanced control over styling.
Here is a quick guide on how you can write your custom style manager:
Final Thoughts
Overall, GrapesJS is a powerful tool to create an HTML-like structure for Newsletters, Native Mobile/Desktop Applications, PDSs, etc., with its easy drag and drop functionality. With a plugin like MJML for GrapesJS, you can make your content (Newsletters) responsive. It is the only existing web builder with a BSD license. Try the above methods to create something extraordinary and share your experience with us. Happy coding!
Follow the below link for a quick start guide.
https://grapesjs.com/docs/#quick-start
