Making A Page Builder: init()

Page builders are very powerful tools for building web pages without code. We can build web pages with special blocks from the page builder. As a junior-programmer, paying money for other page builder isn’t useful. Therefore, I will make my own page builder in this article series. Let’s go!

Photo by Christopher Gower on Unsplash

Step 1: Choose your dependencies!

Making a page builder from zero is a very terrible idea. More time, more tears, and more neck pain… This scenario is more terrible than a horror movie.

• Page Builder Framework: GrapesJS
• UI Framework: VueJS

GrapesJS and VueJS are more powerful frameworks and very enough for my page builder.

Step 2: Downloading!

In this step, I need to download these frameworks.

GrapesJS

CDNs

• https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js
• https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css

or with npm

• npm i grapesjs

VueJS

For development version

<!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Step 3: First setup!

In this step, we will initialize our project with GrapesJS.

index.html

<div id="gjs">
  <h1>Hello World Component!</h1>
</div>

app.js

const editor = grapesjs.init({
  // Indicate where to init the editor. You can also pass an HTMLElement
  container: '#gjs',
  // Get the content for the canvas directly from the element
  // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
  fromElement: true,
  // Size of the editor
  height: '300px',
  width: 'auto',
  // Disable the storage manager for the moment
  storageManager: false,
  // Avoid any default panel
  panels: { defaults: [] },
});

I will continue this article……