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 :https://grapesjs.com/docs/#download

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.


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GrapesJS Custom Components</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.2/css/grapes.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.2/grapes.min.js"></script>
</head>
<body>
  <div id="gjs"></div>
</body>
</html>

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


xxxxxxxxxx
<script>
    const editor = grapesjs.init({
        container: "#editor",
        fromElement: true,
        width : "auto",
        storageManager: false,

    });
</script>

Final Code look like this


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grape JS Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.2/css/grapes.min.css">
    <link rel="stylesheet" href="css/main.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.2/grapes.min.js"></script>
</head>
<body>
    <div id="editor">
        <p>Testing Editor using Grape JS library</p>
    </div>
    <div id="blocks"></div>

<script>
    const editor = grapesjs.init({
        container: "#editor",
        fromElement: true,
        width : "auto",
        storageManager: false,

    });
</script>
</body>
</html>

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.


xxxxxxxxxx
 <script src="https://unpkg.com/[email protected]/dist/index.js"></script>

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.


xxxxxxxxxx
// Initialize GrapesJS
const editor = grapesjs.init({
    container: '#gjs',
    plugins: ['gjs-preset-webpage'],
    allowScripts: 1,
  });
  
  // Define the custom Button component
  editor.BlockManager.add('my-heading', {
    label: 'Heading',
    category: 'Basic',
    content: '<h1 class="heading">Heading</h1>',
  });
editor.BlockManager.add('my-button', {
  label: 'Button',
  category: 'Basic',
  content: '<button class="btn">Button</button>',
});

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

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


xxxxxxxxxx
const editor = grapesjs.init({
    ... // other grapejs config
    allowScripts: 1,
});

Note: JS script disabled by default and this code will enable them. Source : https://stackoverflow.com/a/59958791

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


xxxxxxxxxx
  // Define custom components
editor.BlockManager.add('my-button', {
    label: 'Button',
    category: 'Basic',
    content: `
      <button class="custom-button">Button</button>
      <style>
        .custom-button {
          /* Custom CSS styles for the button */
          background-color: #fca311;
          color: #fff;
          padding: 10px 20px;
          border-radius: 4px;
          border: none;
          cursor: pointer;
        }
      </style>
      <script type="text/template">
      <script>
        document.addEventListener('DOMContentLoaded', function() {
          // Custom JavaScript code for the button
          const button = document.querySelector('.custom-button');
          button.addEventListener('click', function() {
            alert('Button clicked!');
          });
        });
      </script>
      </script>
    `,
  });

That's all.