# App editor

In PocketBlocks, the app editor is where you assemble components, create javascript functions to interact with PocketBase data, and publish your apps. It consists of five areas:

1. Toolbar
2. Canvas
3. Data browser
4. Query editor
5. Component and property pane

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

## Toolbar

The Toolbar is made up of a topbar and a left sidebar.

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

On the topbar, you can configure your app as follows:

* Change the app name
* Export to a JSON file
* Control the visibility of other areas
* Share your app
* Preview and deploy your app
* Check the history versions

On the left sidebar, some options are available as follows:

* Show or hide the **Data browser**
* Set canvas size and app theme
* Manage scripts and CSS style
* Start tutorial for app editor
* Show keyboard shortcuts

## Canvas

The canvas at the center of the editor is where you design and see the overall UI. Drag and drop components onto the canvas, bind them with data and event handlers, and assemble them to build a pleasing and powerful app.

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

Check out [Design app UI](/build-apps/design-app-ui.md) for UI layout practices.

## Data browser

The data browser on the left pane contains **Queries**, **Components** and **Globals** sections. Here you can inspect the data in a tree structure. For example, to check the returned data of a specific query or component, find its node in belonging section and click<img src="/files/KPPj9wySJ4EIwmOB9yR3" alt="" data-size="line">to expand.

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

## Query editor

The query editor lay at the bottom consists of two sections: query list (with **Queries** and **Metadata** tabs) on the left, and query settings (with **General**, **Notification** and **Advanced** tabs) on the right. Create queries to interact with Pocketbase API here.

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

You can access the Pocketbase sdk through the **window\.pb** object.

## Component and property pane

The component and property pane is located on the right of the window. Drag components onto the canvas from the **Insert** tab and edit the properties of the components in the **Properties** tab.

![](/files/LneDK2DLQuyg9gmAAFfU) ![](/files/pKC6pPcZuGOgKXMOXZJM)

When a component is selected on the canvas, the **Properties** tab will be activated automatically and display properties of that component.


---

# 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://pocketblocks.pedroza.dev/build-apps/app-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.