Code Editor

With Gridbox, you've the complete control over the HTML, CSS and JavaScript by editing the the code for pixel-perfect customization.

To open the code editor - click on the Code tab.

Every operation that you might perform within the visual builder or by the left inspectors is generating clean, battle-tested code.

Code Mode

Using Code Editor you can edit and integrate the webpages all the time: add custom .css rules or modify elements' classes is matter of seconds, and the effects are displayed in real time in the canvas. Above all you can even create multiple js files and integrate them with your HTML.

Note: When you open CSS / JS / JSON files, it will directly open the code editor

Code Editor Toolbar

Code Editor Toolbar

Split Preview Mode

If you want preview the changes as you code, you can always use the toggle split preview button from the top right in the Code Editor Toolbar to open the Preview screen in the split mode.

Toggle Split Preview

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 SVG Icons

If you would like to use SVG icons from the code editor, from the top left in the code editor toolbar click on leaf icon, this will open the SVG icons gallery. Nearly 300+ SVG icons are available for use, you can even search them and use it in your projects.

Importing Icons from SVG Icons Gallery