Introduction to Gridbox Editor

The Editor allows you to build your site structure, design the look and feel, add content and custom code to create fully functioning websites, landing pages and prototypes.

Use the below links to get started

  1. Code Mode

  2. Gallery

The Gridbox Editor consists of the main canvas as well as a set of toolbars and panels. In this guide, we give you a glimpse of each of the following:

  1. Design Mode

  2. Code Mode

Design Mode

Gridbox Editor - Design mode

By default when you open the editor - it will be in design mode. You can instantly switch between design and code mode.

In design mode:

  1. You can drag and drop components from the left sidebar (components tab) into the canvas

  2. Edit content on the canvas

  3. Add / Modify image elements

  4. Change the style of the particular selected element in the canvas like Background Colors, Fonts, Gradients, Sizes, etc...

Code Mode

Gridbox Editor - Code mode

Gridbox Code editor is powered by Microsoft VS Code. If you're familiar with VS Code then using our code editor will be super easy. With our Code editor, you can edit the full HTML document without any constraints. Whatever you work will be automatically in sync with Design mode and vice versa.

When you switch to code mode you can

  1. Edit the .html, .css, .js, .json files

  2. Import external libraries from cdnjs.com (eg: charts.js, d3js, jQuery,Vue, React etc...)

In Code mode, you will see the files panel opened by default, where you can work with multiple files.