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.
Gridbox Editor with Preview
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 Designer vice versa. Also you can instantly preview the changes as you code.
With our code editor
  1. 1.
    Edit the .html, .css, .js, .json files
  2. 2.
    Use pre-built code Bootstrap, Bulma HTML snippets / CSS & Javascript snippets
  3. 3.
    Import external libraries from cdnjs.com (eg: charts.js, d3js, jQuery,Vue, React etc...)

Import External Libraries

Sometimes you want to use external libraries like chartsjs, d3js, jQuery, AlphineJs, ... From the top left in the code editor toolbar click on the cube icon. This will open the Import Libraries popup. With Import libraries, you can instantly search & import your favorite CSS & JavaScript libraries from ​CDNjs
Import external libraries using CDNjs

Import Google Fonts

With Gridbox, you can import Google Fonts effortlessly without going to external URL.
  1. 1.
    From the code editor toolbar, click on the A icon
  2. 2.
    Choose the fonts you want to import
  3. 3.
    You can select multiple fonts if you want to
  4. 4.
    Click on copy and paste it under the <head> tag.
  5. 5.
    That's it.
Import Google Fonts
With Gallery, you can do the following
  1. 1.
    Upload and use the uploaded images
  2. 2.
    Use high quality stock free images from Pexels.com
  3. 3.
    Use 2500+ svg icons
  4. 4.
    Copy SVG backgrounds from Hero Patterns
Using Gallery

Using Preview

Preview screen allows you to instantly preview all the changes as you code. Also you can test the responsiveness of the design. We've three different preview modes
  1. 1.
    Full screen
  2. 2.
    Vertical Split View
  3. 3.
    Horizontal Split View
Using Preview

Using Design Mode

You can always use the code editor if you want to, but if you want to drag & drop HTML components and edit content directly without touching code you can make use of Design mode.
To open Designer.
  1. 1.
    Open any .html file
  2. 2.
    From code editor toolbar under right side -> click on the Design button
  3. 3.
    This will open the designer.
Opening Design mode from Toolbar
Last modified 1mo ago