Code Editor

Gridbox lets you work visually, while easily accessing the HTML/CSS/JS source for fast, pixel-perfect customizations.

To open the code editor - click on the (</>) icon from the left bar.

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

Click on the CODE icon on the left side to open the Code editor.

Using Code Editor you can edit and integrate the webpage 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 you can create multiple js files and integrate them.

Opening Files / Pages

Code Editor Split View

New Gridbox Code Editor

Now you can switch between vertical view (default) and horizontal view or split view.

Responsive Preview

Full Screen Mode

You can toggle between full screen code editor to regular split view. From the top right side - click on the full screen icon to toggle.

Full Screen Mode

Tidy Code

Gridbox automatically makes your code well-formatted, however you can manually do that with tidy code option from the top right side of the code editor.

Tidy Code

Keyboard Shortcuts

Shortcut

Action

Ctrl + Alt + N

New Page/File

Ctrl + S

Save Current Page

Ctrl + F

Find

Ctrl + G

Find next

Shift + Ctrl + G

Find previous

Ctrl + Shift + R

Find and Replace

Ctrl + A

Select All

Ctrl + Z

Undo last change

Ctrl + Y

Redo the last undone change

Ctrl + Home

Move cursor to the start of the document

Ctrl + End

Move cursor to the end of the document

Alt + Left Arrow

Move cursor to the start of the line

Alt + Right Arrow

Move cursor to the end of the line

Home

Move to the start of the text on the line, or if we are already there, go to the actual start of the line (including whitespace)

Shift + Tab

Auto-indent the current line or selection

Ctrl + D

Delete line under the cursor

Esc

Close Active Popups and Panels

Ctrl + ?

Help Docs

Ctrl + Shift + ?

Keyboard Shortcuts