# Preview

The Preview function is a tool provided by our app builder that allows you to visualize and test your app's appearance and functionality before publishing it.

## Launching Preview Mode

To enter the Preview function,  locate the top right corner of the App Builder. You will find a prominent **Preview** button. In the Preview mode, you can see how your app looks like, interact with your app and explore its functionality. This helps you identify and address any inconsistencies, UI issues, or functional bugs in your app before publishing it.

<figure><img src="/files/qytMBqiQ4SIiFvGIg8fm" alt=""><figcaption><p>Preview</p></figcaption></figure>

## Debug Panel

On the far right of the preview screen, you'll find a bug icon. Click on the icon to open up the debug panel. Debug panel has 5 tabs, presenting action histories or the current variable value.

<figure><img src="/files/JPG2LfzHErA2m7j9QLtw" alt=""><figcaption></figcaption></figure>

The **Log** tab displays all interactions that have happened -- including the event's Event Payload and the action's Transformed Parameter -- so you can check if your events are sending the correct values. In this example, after I enter "fe" in the input element and press "enter", I can see the search query "fe" passed to set sql parameter action, with the field "search" set as "fe." The content above the arrow is the event **Press Enter** and the content below the arrow is the action  **api\_set\_sql\_parameter** that the event triggers.

<div align="left"><figure><img src="/files/KGIkf159UmBI5otabgaO" alt=""><figcaption></figcaption></figure></div>

The **Element** tab lists all the elements and their relation. When you hover on an element, it will be highlighted in the preview.&#x20;

The **Page** tab lists all the page data that you defined in [Data Store](/app-builder/app-construction/data-store.md), page level. You can see the variable's value by clicking its name.

The **App** tab lists all the app data that you defined in [Data Store](/app-builder/app-construction/data-store.md), app level. You can see the variable's value by clicking its name.

The **Data Node** tab lists all the Data Node in the app. By clicking Data Node's name, you can see a table to preview the data store in the Data Node.


---

# 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/preview.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.