In this article, we’ll explore how to implement GrapesJS for JavaScript-based blogging platforms like those built with React or Next.js.

While WordPress is a popular choice for blogging, you might prefer having full control over your site, allowing you to create and manage features tailored to your specific needs. If you're looking to build a blogging site without relying on WordPress, you'll need a robust WYSIWYG editor for writing blog posts.

TinyMCE has been a popular choice for this, but GrapesJS is now gaining attention for its content editing capabilities. While editors like TinyMCE and CKEditor are primarily text editors that can be used for blogging, GrapesJS stands out as an open-source WYSIWYG editor with drag-and-drop functionality. It’s not just for blog posts—it’s also great for building static web pages.

GrapesJS is an open-source, multi-purpose web builder framework that combines various tools and features to help users create HTML templates without needing coding knowledge. It’s an excellent alternative to traditional WYSIWYG editors, which are suitable for content editing but lack the ability to easily create full HTML structures.

How Does It Work?

Using GrapesJS is straightforward. It has a simple layout with various features for creating content, such as text, images, columns, multi-columns, and grids. As you build your content, GrapesJS automatically converts it into plain HTML and CSS code.

Now, let me show you how to effectively use this tool for your blogging site. Since proper documentation can be hard to find, I’ll provide detailed instructions here. Let’s get started!

Installation

Install GrapesJS by using command

npm i grapesjs

To add features install block-basics and preset-webpage by following commands.

npm i grapesjs-preset-webpage grapesjs-blocks-basic

import React, { forwardRef, useEffect } from'react';
import grapesjs from'grapesjs';
import gjspresetwebpage from'grapesjs-preset-webpage';
import gjsblockbasic from'grapesjs-blocks-basic';
import'grapesjs/dist/css/grapes.min.css';


constGrapesjsEditor = forwardRef(functionGrapesjsEditor(props, ref) {
  useEffect(() => {
    const editor = grapesjs.init({
      container: '#gjs',
      width: 'auto',
      plugins: [
        gjspresetwebpage,
        gjsblockbasic,
      ],
      fromElement: true,
      storageManager: false,
    });
    if (ref) {
      ref.current = editor;
    }
  }, [ref, props]);

  return<div id="gjs" />;
});

exportdefaultGrapesjsEditor;

Explanation

Here we have use forwardRef because we are going to call this component inside our main components where our main form is exists. If you call the ref in component then this component should not have any parent component. So we have to use it as individual component.

For example,

// May throw error due to Editor doesn't come under any parent component
<div><GrapeJSEditor ref={editoref} /></div>

// So use it as individual component
<GrapeJSEditor ref={editor ref} />

For calling this component use this

import { useRef } from'react';
const editorRef = useRef(null);

<GrapesjsEditor ref={editorRef} />

Props - Edit available content

If you wants to edit the available content that you already have then pass it into the props. Its like edit your article/blogpost or any content.

// Pass you available content through props to main editor like this
<GrapesEditor ref={editorRef} blogdata={blogdata} />

const GrapesjsEditor = forwardRef(function GrapesjsEditor(props, ref) {
  useEffect(() => {
        const editor = grapesjs.init({
         ....
        });
        editor.setComponents(props ? props.blogdata : '')
    },[ref, props]);
    
  return<div id="gjs" />;
});

export default GrapesjsEditor;

Add new fonts

Adding extra fonts in this editor can be a bit challenging, as it doesn’t currently support adding custom fonts directly to its default list. To work around this, we’ll need to make a few adjustments. Specifically, we can create an additional typography block to include the custom font options we need beyond the default set. This approach allows us to integrate new fonts and font settings seamlessly.

const editor = grapesjs.init({
     ....
      canvas: {
        styles: [
          'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'
        ],
      },
    });
editor.on('load', () => {
      const styleManager = editor.StyleManager;
      let typographySector = styleManager.getSector('Typography');
      if (!typographySector) {
        styleManager.addSector('Typography', {
          name: 'Typography',
          open: true,
          buildProps: ['font-family', 'font-size', 'font-weight', 'color'],
        });
      }
      let fontProperty = styleManager.getProperty('Typography', 'font-family');
      let list = [];
      fontProperty.set('list', list);
      list = [
        fontProperty.addOption({ value: "'Lato', sans-serif", name: 'Lato' }),
      ];
      fontProperty.set('list', list);
      styleManager.render();
    });

 const customCSS = `
      body {
          font-family: "Lato", sans-serif;
          line-height: 1.5;
      }
    `
 editor.addStyle(customCSS)

Note: Make sure you call the font apis (like google fonts links in head section) on your main site to get the result.