How to effectively use GrapeJs with ReactJs

How to effectively use GrapeJs with ReactJs

Feb 15, 2021

GrapesJS is a free and open-source web builder framework used for building web templates without coding. It combines different tools and features with the goal to help you (or users of your application) build HTML templates without any knowledge of coding.

Features:

Drag & Drop Built-in Blocks:

GrapesJS comes with a set of built-in blocks, in this way you’re able to build your templates faster. If the default setting is not enough you can always add your own Custom Blocks.

Responsive Design

GrapesJS gives you all the necessary tools you need to optimize your templates to look awesome on any device. In this way, you’re able to provide various viewing experiences. In case more device options are required, you can easily add them to the editor.

Layer Manager

You can nest components as much as you can but when the structure begins to grow the Layer Manager comes very handy. It allows you to manage and rearrange your elements extremely fast, focusing always on the architecture of your structure.

Using GrapesJS plugin in a React application:

GrapesJS offers some predefined plugins that offer customised screens for editing. Here we are going to use the Web page plugin for our React application. It can be downloaded here.

We will be using Microsoft Visual Code as our code editor. Node.js is required in our editor. Download the latest LTS version. Create a new folder in your local directory. Open Visual Code and select the folder that you have created by going to File -> Open Folder. This will be your working directory.

Steps to create a React application:

1. Open a terminal in Visual Code by pressing Ctrl + `. Make sure that the terminal displays the path of your working directory. Here type the following npx create-react-app my-app. Wait for some time for the installation. This will create a new React application in a folder named ‘my-app’

2. React files and dependencies will be created in your working directory. Remove the following marked files in the src folder of your React application.

3.Edit the App.js and index.js files as shown below

Now a basic React application has been installed and configured.

Steps to integrate GrapesJS plugin in React Application:

1. In your terminal, change the current directory to my-app folder by using the command cd my-app

2. Install the GrapesJS dependencies by using the command npm i grapesjs

3. Install the GrapesJS Preset Webpage plugin by using the command npm i grapesjs-preset-webpage

4. In App.js file, type the following code and save it

5. Now we can start the application by typing npm start in the terminal. Make sure that PORT 3000 is free in your system.

6. The React application with Grapesjs configured will now be launched in your default web browser.

We have successfully integrated the GrapesJS Preset Web Page plugin in our React application. The white area is called the canvas. It is the area where we can drag and drop the given blocks and generate HTML code.

GrapesJS