GrapesJs

Visual Builder for your content

Why look and feel of the web application is misaligned in comparison to its original designs? In many cases, it happens when the dev/design team used the wrong tools to implement their design system. In this post, I would like to introduce to you GrapesJs, a visual builder for your content.

Live example

Reusable components

Below you can see real example of using GrapesJs as a real-time visual builder for landing pages. On the left side you can find various components categorised accordingly in Layout and Content sections.

Design system and logic of the components

Here you can see a classic flow for the column component designed in Figma. Why is it so important from the dev point of view?

For instance; when we change the flex-direction (direction of the items in the row) from row to column (it means that all elements will float vertically instead of horizontally) then the CSS properties like align-items will have to change accordingly to justify-content and vice versa. Why? So we can still manipulate with the same styles like the alignment of the items horizontally or vertically.

Let's break it down

Our visual builder allows users to change the horizontal alignment of the elements inside the column component. In order to achieve that functionality, we use CSS property of align-items in flexbox.

Once we decide to change the orientation of the elements from column to row you can observe that align-items does not align elements horizontally anymore.

In order to achieve the the same effect we have to add another CSS property (justify-content).

In our editor we see one button. However, behind the scenes the logic has changed.