> For the complete documentation index, see [llms.txt](https://docs.gridbox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridbox.io/gridbox-editor/introduction-to-gridbox-editor.md).
# Overview
Builder is desgined to be simple, minimal and contextual. Here's how it breaks down:
Gridbox Editor
### 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
### Builder Toolbar
From top, you can see the following options
1. In the left, you can see logo & project title
2. In the middle, you can see three buttons -> Design, Code, Preview
3. In the right, you can see three buttons -> Save, Download, Publish
Let us see each of these options in detail.
### 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.
In Design mode, JavaScript & button clicks are disabled by default. You can click on preview to see the real time changes.
Design Mode
### 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.
### 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.
