GuidesComponentsIntegrationsCommunity
Sign InTry Now

App Anatomy

Understanding the app editor and how to build apps

Suggest Edits

The 3 Panels

At the top of your app, you have toggle access to the 3 panels. Each panel serves a different purpose, and are all crucial to building in Retool.

These panels can be opened or closed in the top center of the editor UIThese panels can be opened or closed in the top center of the editor UI

These panels can be opened or closed in the top center of the editor UI

  1. Inspector Panel (right)
  2. Query Editor (bottom)
  3. Model Browser (left)

Using the context of this sample app in Editor mode, let’s take a look at each panel!

Component inspector (that users getPeople) to the right, getPeople query to the bottom, and getPeople query info to the leftComponent inspector (that users getPeople) to the right, getPeople query to the bottom, and getPeople query info to the left

Component inspector (that users getPeople) to the right, getPeople query to the bottom, and getPeople query info to the left

Inspector Panel (right)

The right panel, called the Inspector Panel contains all the settings for the selected component. You can also switch to the "Components" tab of this panel which lets you can browse all the available components and drag them onto your canvas.

The settings in the Inspector will vary depending on the component.

Example of the Inspector panelExample of the Inspector panel

Example of the Inspector panel

Query Editor (bottom)

The Query Editor allows you to create queries, which are the only way to exchange (create, read, update, destroy) data from your database or REST API with Retool.

We’ll dig deeper into this panel an upcoming section, don’t worry.

Example of the Query EditorExample of the Query Editor

Example of the Query Editor

Model Browser (left)

The Model Browser is useful for visualizing the data inside components, as well as the data returned by queries and transformers. If you’re ever unsure about what your query or component is actually returning, expand it out in the Model Browser! Here are some of its key features:

  1. It shows the structure and shape of entire data object, which will give you a good idea of how to grab the data you’re looking for.
Example of the `getUsers` query expanded out in the Model BrowserExample of the `getUsers` query expanded out in the Model Browser

Example of the getUsers query expanded out in the Model Browser

  1. At the top of this panel, you can manage and create temporary state objects (docs here).
Example of the Temporary State section of the Model BrowserExample of the Temporary State section of the Model Browser

Example of the Temporary State section of the Model Browser

  1. At the bottom of this panel, you have access to Globals, including current_user which gives you access to information about the logged-in user currently using the app. Some docs on current_user here.
Example of the globals section of the Model BrowserExample of the globals section of the Model Browser

Example of the globals section of the Model Browser

  1. Next to each item’s (components, queries, etc) name, there’s a blue, hover-able dependency icon that shows the connected components/queries.
Example of the dependency icons available in the Model BrowserExample of the dependency icons available in the Model Browser

Example of the dependency icons available in the Model Browser

Updated 4 months ago

Did this page help you?