# Overview

Builder is desgined to be simple, minimal and contextual. Here's how it breaks down:

<figure><img src="https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2FxZRceXC5T7Yd1RZacfgB%2Fscreenshot-1.JPG?alt=media&#x26;token=81ae1244-e9f0-403a-ab0b-8c8df341d835" alt=""><figcaption><p>Gridbox Editor</p></figcaption></figure>

### Canvas

The major area you see in the builder is called canvas it's where you'll not only see a preview of the site (mostly live, JavaScript is disabled) you're building, but also what you'll use to drag, move and arrange your elements as well as access the pre-built Gridbox blocks

<figure><img src="https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2FooCsc1uTAnoFdEnVHKQG%2Fcanvas-area.JPG?alt=media&#x26;token=f4c9836e-3f2e-472a-a0b1-c37c8f6d90b4" alt=""><figcaption></figcaption></figure>

### Builder Toolbar

![Editor Toolbar](https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2FR9fQYCmnDuzVEs07NPHK%2Fv13-editor-toolbar.png?alt=media\&token=ca194ea5-8e71-47b5-bdca-da8752e23f98)

From top, you can see the following options&#x20;

1. In the left, you can see logo & project title&#x20;
2. In the middle, you can see three buttons -> Design, Code, Preview
3. In the right, you can see three buttons -> Save, Download, Publish&#x20;

Let us see each of these options in detail.&#x20;

### Design Mode

By default, when you create any site you will be design mode. With Design mode, you can add pre-built blocks, change design and content without touching a single line of code.&#x20;

In Design mode, JavaScript & button clicks are disabled by default.  You can click on preview to see the real time changes.&#x20;

<figure><img src="https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2FxzbzTyEbXMgNeOnnD3nC%2Fdesign-mode.JPG?alt=media&#x26;token=d1422bd3-2693-4f46-8c21-6bda5f6ddf51" alt=""><figcaption><p>Design Mode</p></figcaption></figure>

### Code Mode

With Gridbox, you can create a site without code, however if you're looking for further customization then you can use code editor to edit HTML, CSS or add external JavaScript libraries.&#x20;

![Code Mode](https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2FxHVS7KV1ptot7mLUG47o%2FScreenshot%202022-06-29%20at%2016-17-17%20Gridbox%20-%20Simplest%20Visual%20Interface%20Builder.png?alt=media\&token=9546a73e-88c4-4d4f-95b9-eb67f109e131)

### Preview

With preview, you can the see live version of your landing page or site. You can also test the responsiveness with mobile and tablet resolutions.&#x20;

![Preview Page](https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2F08s3mlrq5JXgUB0qpp4C%2FScreenshot%202022-06-29%20at%2016-17-36%20Gridbox%20-%20Simplest%20Visual%20Interface%20Builder.png?alt=media\&token=4c886a6c-d827-4363-ba03-7bf42569c9a8)