# Overview

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

<figure><img src="/files/yh7zXJpVOUrNx5JmMqBq" 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="/files/QPIKvM2wtrPevOzkZQIL" alt=""><figcaption></figcaption></figure>

### Builder Toolbar

![Editor Toolbar](/files/7hzN0tW4K1DWdkBVpfSe)

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="/files/BWtJmfHqLCM9BT5RhsPI" 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](/files/ZBlsDk1aAGpxtkoPUFPS)

### 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](/files/HyTS4zhEjBAKOmxirLbh)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gridbox.io/gridbox-editor/introduction-to-gridbox-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.