# Overview

The App Builder consists of a left toolbar, canvas, top bar, right configuration bar, and an interactions panel at bottom.

<figure><img src="/files/8ajvjbzcIE4OLgJ7X1A6" alt=""><figcaption></figcaption></figure>

## Left Tool Panel

The left panel contains three tool tabs: **Navigator**, **Element**, **Data Node** and several advanced tool tabs **Data Store**, **Theme**, **Media Files**, **App Configuration**, **Plugin Store.**

1. **Navigator tab:** Under the Navigation tab, you’ll see a list of all pages in your app, where you can switch between pages or add new page.\
   Below page list, there is also an Element tree for current page. From the hierarchy, you can select elements by clicking on them and rearrange elements by dragging and dropping.\
   \
   ![](/files/6VTvCCcSk4l4EYbI5g4L)

2. **Elements tab:** Under Elements tab, you’ll be able to create new pages, elements, and data nodes by dragging and dropping from the panel to the canvas. \
   ![](/files/BE9QpnTsPPHuLdNWahod)

3. **Data tab:** The Data tab will list all of your data nodes. There are three kinds of Data Node: [Table](/app-builder/app-construction/table.md), [Query](/app-builder/app-construction/query.md), and others. \
   ![](/files/du3j6IM48IYQv0bX6OpQ)

4. **Data Store:**  [Data Store](/app-builder/app-construction/data-store.md) is where you store and manage variable data. You can view, declare, and manage data using in this app.

5. **Theme tab:** [Theme](/app-builder/theme.md) lets you choose and change color themes for your app. You'll find "color" and "color on" for each option, which represents the main color and text color on top, respectively. For example, with the below theme, a button will have a default blue color with white text on top.\
   ![](/files/P41KwBrdwY9dAySzs42p)

6. **Media Files**: Where you view access media files in [Resources](/acho-studio/resources.md)

7. **App Configuration**: [App Configuration](/app-builder/app-construction/app-configuration.md) provide app level settings.

8. **Plugin Store**: [Plugin Store](/app-builder/app-construction/plugin-store.md)

## Canvas

The canvas is your window into the structure of your app. In the canvas you will design your app’s interface.&#x20;

## Topbar

The toolbar is where you’ll find [App User Management](/app-builder/app-user-management.md), [Version Control](/app-builder/version-control.md), [Preview](/app-builder/preview.md), and [Publish](/app-builder/publish.md) options. You’ll also be able to rename your app by clicking it.

## Interactions panel

The Interactions panel is where you will define your [Interactions](/app-builder/app-construction/interactions.md). When an element is selected, you'll be able to add actions to its supported events.

## Right Configuration Panel

The right panel is for the configuration for the current selected page or element, including properties, CSS styles, etc.&#x20;

![](/files/v2j6r2y1HkFFiAsO9ExG)


---

# 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.acho.io/app-builder/overview.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.