GrapesJS editor

Visual Builder

The Visual Builder edits pages, layouts, templates, email templates, and forms. It stores HTML, CSS, and project data for each supported resource.

Editable Resources

Pages

Create a page, save it as draft, open the builder, design content, save, preview, and publish. Published pages render public builder output.

Layouts

Layouts use slots such as header, navbar, footer, mobile menu, and blog-specific areas. Active layouts render globally or in the assigned public view.

Templates

Reusable templates can be designed once, inserted into builder-supported resources, or created by importing full HTML files. Imported files exclude the head section and can strip or keep body-level asset tags.

Email Templates & Forms

Email templates and form layouts use builder editing flows with controls tailored to their module purpose.

Builder Interface Features

Searchable Blocks

The left pane includes search. Typing narrows blocks to matching elements. The clear button restores the full list.

Settings Pane

Shortcode values and related properties are editable in the settings pane so admins do not need to edit raw HTML.

Shortcode Tokens

Shortcode tokens are selectable, movable, removable, copyable, hoverable, and editable on the canvas.

Conditional Containers

User condition blocks allow elements to be dropped inside login-state or role-based wrappers.

Templates Modal

Reusable templates can be inserted from the template modal into supported builder resources.

Save Before Publish

Publish and activate actions save the current builder content first, then publish, reducing accidental lost changes.

Font Awesome Toolbar

The builder top bar uses Font Awesome icons for devices, undo/redo, transform handles, templates, media, code, settings, save, publish, and view actions.

Canvas Fit, Zoom & Pan

The bottom bar includes canvas zoom from 40% upward, step buttons, reset, and fit controls. Fit centers content at the top, and panning gives extra room around the canvas.

UI Scaling

A separate UI scale control adjusts the surrounding editor chrome without changing page content scale.

Canvas Backgrounds

The bottom bar includes selectable viewport background colors, including the dark control theme and white, to preview contrast around the page.

Collapsible Panes

Left and right panes can stay pinned or collapse from the bottom bar to give more canvas space.

Layer Controls

The Layers pane supports selection, parent selection, delete, drag ordering, and one-step move up/down buttons.

Transform Handles

Transform handles scale and pan with the canvas. Undo history is recorded after handle release rather than during every movement.

Media URL Handling

Site media URLs can be normalized to relative or absolute form, and media library files can be selected from supported source fields.

Material Icon Stability

Material Symbols and Material Icons inside canvas content are protected from being converted into editable ligature text.

Bootstrap Support

The canvas loads Bootstrap CSS and JavaScript so Bootstrap components render closer to the final frontend output.

Template HTML Import

Import Location

Open /control/templates and use the Import HTML form beside the template creation actions.

Accepted Files

Upload .html or .htm files up to the configured upload limit. The imported template is saved as a draft and opened in Visual Builder.

Head Exclusion

The uploaded file's <head> section is never imported into template content. This prevents duplicate metadata, page titles, base tags, and global assets from entering reusable template output.

Body Tag Policy

Choose whether to strip or keep body-level <script>, <meta>, <title>, <base>, and <link> tags. Strip is the safer default.

Style Handling

Body-level style blocks are extracted into the template CSS field so imported visual styling remains editable from the builder.

Recommended Workflow

Import the HTML, inspect it in Visual Builder, replace external media with Media Library files where needed, save, then publish when ready.

Current Dynamic Blocks

Blog

  • Blog Grid block.
  • Featured Post block.
  • Blog Grid Shortcode token.
  • Featured Post Shortcode token.

Forms

  • Active forms appear as shortcode blocks.
  • Form field tokens are available inside the form builder.
  • Forms can be embedded in pages/layouts.

Users

  • Login and registration form tokens.
  • Account data tokens.
  • Custom profile field tokens.
  • Logged-in, logged-out, and role condition blocks.

Media

  • Media Gallery block.
  • Gallery output supports media type, count, columns, gap, and crop options.