How to Setup and Use GrapesJS on Your HTML Page

How to Setup and Use GrapesJS on Your HTML Page

Every time you try to create a new website design, it take lots and lots off time. After sometimes when you start new web design project, you leave that code beside the old web design file and starts to write new code. So you waste your energy and time again and again. Most of the programmers have the idea to create their own drag and drop UI designer. But If they are trying to build own one, it take up to years. So they have to use opensource webpage builder framework like GrapesJS. Its mainly created to use inside the CMS to create custom templates. But you can this editor in your local computer.

How to Use GrapesJS for the first time

Using the VS code editor, create a HTML file with basic HTML boilerplate and add latest version of grape.min.css file and grapes.min.js file in header.

You can find the latest version of Grapesjs from the documentation page :

Note: The icons in Editor window should disappear, when you are using old version of grape.min.css file and grapes.min.js. I faced this problem. So use the latest version. Just change the version number in the CDN URLs.

grapesjs version

Add div tag with id="gjs" after body tag. Editor should appear in this div tag.

Add the following JavaScript code before /body tag. It will initialize the editor.

Final Code look like this

Open this HTML file in your browser. You will get output like this one.

grapesjs UI

Just try to change the content and export the code.

How to add Custom Components in GrapesJS

If you want to add custom components in "Open Blocks", then you have to use "preset-webpage" plugin.

Add the "grapesjs preset webpage" JS library inside the head tag.

Put the following code inside the script tag or create a new js file with the following code and link that file in your HTML page.


If you want to view JavaScript code when you click "View Code" button,

Add the code "allowScripts: 1," inside "const editor = grapesjs.init({".

Note: JS script disabled by default and this code will enable them. Source :

Then create a custom component with css, js like this one

That's all.