# Intro to the Builder

{% hint style="info" %}
The Builder is the part of Savvy where the Micro-products come to life. At first sight, it might seem a little bit overwhelming, but after taking the tour through our docs, you'll find yourself at home.
{% endhint %}

## We can divide the builder into four main areas:

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2Fv4h0xANYKXPCmBpPGsQy%2FGroup%2028.png?alt=media\&token=c507c7e4-0184-453f-927f-70fa4f981d6c)

## 1. The Top Bar

Some things you can do on this bar:

* Save the flow, and take a look at the versions' history.
* Change from edit mode to preview or interact mode.
* Select full, tablet, or mobile view.

For more details on the Top Bar go here:

{% content-ref url="../reference/the-builder-ui/top-bar" %}
[top-bar](https://trysavvy.gitbook.io/savvy/reference/the-builder-ui/top-bar)
{% endcontent-ref %}

## 2. The Left Sidebar

More things you can do, but on this bar:

* Create new Pages, Components, Global Components, Computed Fields, and Data Outputs.
* View and move all the components in the pages.
* Manage Computed Fields and Data Outputs.

For more details on the Left Sidebar go here:

{% content-ref url="../reference/the-builder-ui/left-sidebar" %}
[left-sidebar](https://trysavvy.gitbook.io/savvy/reference/the-builder-ui/left-sidebar)
{% endcontent-ref %}

## 3. The Preview Pane

In this pane, all your work comes to life. Some things you can do here:

* View how the design is going page by page.
* Select components you want to change or move around.
* Also create, duplicate or delete components.

For more details on The Preview Pane go here:

{% content-ref url="../reference/the-builder-ui/the-preview-pane" %}
[the-preview-pane](https://trysavvy.gitbook.io/savvy/reference/the-builder-ui/the-preview-pane)
{% endcontent-ref %}

## 4. The Right Sidebar

Some things you can do on this other bar:

* Style your Pages, Components, and the whole Flow!
* Manage content and settings of everything.
* Leave comments on flows in the building process.
* Manage triggers and view analytics.

For more details on the Right Sidebar go here:

{% content-ref url="../reference/the-builder-ui/right-sidebar" %}
[right-sidebar](https://trysavvy.gitbook.io/savvy/reference/the-builder-ui/right-sidebar)
{% endcontent-ref %}
