Second Story: Customize GrapesJS Editor

GrapesJS is very flexible so it makes easy to customize it as we want.

In this I will try to customize it from default to our own way.

You can find the code in this section from Github

Default Example

Customize GrapesJS

If you wan to watch video insted of reading

Let us creating the Layout i.e., SideNav, Main Content, Top Nav.

I am using Bootstrap 5 and Bootstrap Icons, so go ahead and add the library in index.html

And create layout

Add styling

This should look a like

Layout prepared

Now let’s add GrapesJS in this.

There are some keypoints which we should understand first to make it works like

• Blocks Manager
• Style Manager
• Trait Manager
• Selector Manager
• etc

To understand more please go to

So now add selectors in our HTML for the same.

Let us create 3 Tab from bootstrap documentation and it will look a like.

Bootstrap Tab for GrapesJS

Now add selector for grapesjs components in tabs.

• for blocks I used first tab so add <div id=”blocks”></div>
• for selector/layer I used second tab so add <div id=”layers-container”></div>
• for style manager I used third tab so add <div id=”styles-container”></div>
• for canvas Iused <div id=”editor”></div> in main content
• for panels I used main content nav-bar <div class=”container-fluid”><div class=”panel__devices”></div><div class=”panel__basic-actions”></div></div>

Final HTML will look like

Now let move to JS and add script to load GrapesJS there.

We have 3 commands for now in side nav

• to show border of the component
• to show design in desktop
• to show design in mobile

and final CSS

That’s it for now. See in you next story.