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.

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!

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.

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.

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.

2. At the top of this panel, you can manage and create temporary state objects (docs here).

3. 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.

4. Next to each item’s (components, queries, etc) name, there’s a blue, hover-able dependency icon that shows the connected components/queries.