If you are in the Web design field you will definitely knew how much it hard to create a static website using HTML, CSS and JS. You have to create, code & customize HTML, CSS, JS files again and again for every pages. It's will waste your energy and time. Also if you are completed one project and now you going to start new web design project, you leave that code beside the old web design file and starts to write new code. It's too much for a Web designer right. In this tutorial I introduce you GrapesJS (opensource drag and drop web builder framework . Utilize this GrapesJS for Beginners guide and gain some knowledge in drag and drop webpage building.
GrapesJS for Beginners
Most of the web designers, programmers have an idea to create their own drag and drop UI designer. But when they are trying to build one, it take up to years. Most of the people have that much patience. So eventually they fed up and loose their interest in drag and drop web page builder. But there is one solution available for this problem. GrapesJS – a opensource webpage builder framework. It's mainly created to use inside the CMS to create custom templates. But you can add this editor in any HTML web page and you can use the drag and drop builder in your local computer inside web browser.
How to Use GrapesJS for the first time
Setup and Use GrapesJS on Your HTML Page
First, create a HTML file with basic HTML 5 boilerplate with the help of code editor like VS code. Then add the latest version of grape.min.css file and grapes.min.js file in your HTML page header.
You can find the latest version of Grapes JS from the documentation page.
Note: The icons in GrapesJS 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. All you have to do just change the version number in the CDN URLs.
You can find the latest GrapesJS version information in download page.
Now add div tag with id=”gjs” after body tag. GrapesJS Editor should appear in this div tag.
<!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>To initialize the editor, add the following JavaScript code before/body tag. .
<script>
const editor = grapesjs.init({
container: "#editor",
fromElement: true,
width : "auto",
storageManager: false,
});
</script>Your Final Code will look like this
<!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>Final Output
Open this HTML file in your web browser. You will get output like this one.
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.
<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.
// 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({“.
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
// 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.
I hope this article will help you to start your journey with GrapesJS. Please build a good and easy to use drag and drop web designer tools for designers and consumers using GrapesJS. Also don not forget to check out other articles like Windows CMD Commands for Programmers.
