Blogs arrow How to effectively use GrapeJs with ReactJs

How to effectively use GrapeJs with ReactJs

line

Feb 15, 2021

s3bugket

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:

s3bugket

Responsive Design

Layer Manager

s3bugket

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’

vs-create

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.

vs-index

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

vs-appjs
vs-indexjs

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

vs-npm

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

vs-powershell

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

vs-grapejs

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

vs-npm-start

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

vs-port

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

vs-canvas

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.

srinvasan.pic

WRITTEN BY

Baskar Srinivasan

naveen-pic

REVIEWED BY

Naveen Lingam

More Blogs

line