GuidesReferenceComponentsIntegrationsCommunity
Sign inBook a demoStart for free

App editor

Learn about Retool's web app editor.

The App editor is the interface you use to build Retool apps. It is made up of these primary areas:

  • Canvas: Arrange components to build your app's interface.
  • Navbar: Configure, preview, share and manage your app.
  • Left panel: Explore components, queries, transformers, and constants.
  • Bottom panel: Create and edit queries, transformers, temporary states, and analytics events.
  • Right panel: Create and edit components.
  • Status bar: Select the app environment, releases, runtime, and debug apps.

App editor

Canvas

The canvas is where you build the interface for your app. You drag and drop components from the right panel.

The canvas contains three frames in which you can place components:

  • Main: The main area of the app that contains most components.
  • Header: The horizontal area at the top of the Main frame that remains visible.
  • Sidebar: The vertical area to the left of the Main frame that remains visible.

The Header and Sidebar frames are optional areas that are primarily designed for navigation.

Main frame

The Main frame is the primary area of your app. This is where you place and arrange the majority of your app's components and where most interactions take place.

The Main frame is always present and cannot be disabled.

Header frame

The Header frame allows you to build a header for your app. Once enabled, it initially contains a Navigation component to create a horizontal navigation menu.

Header frame in user mode preview

Sidebar frame

📘

The Sidebar frame is available on Retool Cloud and on Self-hosted Retool versions 2.106 and later.

The Sidebar frame is primarily for building navigation into your apps. On first use, it initially contains the following components:

Creating the Sidebar frame

You can drag any components into the Sidebar frame in much the same way as the Header and Main frames. As the Sidebar frame is designed to appear vertically, it has specific size and layout constraints:

  • Fixed 240px width.
  • Positioned to the left of the Main frame.
  • Rendered below the Header frame (if visible).

The Sidebar frame is also optimized for mobile. It is hidden by default when viewed on a mobile device and is accessible using a menu button that is automatically included. When pressed, the Sidebar frame slides into view.

Grid layout

Canvas frames use a 12-column grid layout. As you arrange or resize components, the grid becomes visible and component edges snap into position. Each frame automatically grows as you add or resize components by adding more rows to the grid.

All frames use the same fixed-height rows to ensure consistent vertical arrangement. The Main and Header frames dynamically adjust column width based on the size of the viewport, with a maximum width of 1560px. The Sidebar uses a single-column grid only so you cannot place components horizontally next to each other.

Retool provides flexible components to group other components together, such as Container and Form. These components extend the 12-column grid layout so you can drag components directly into a container in the same way as directly on the canvas. This creates a group of nested components. All components can be nested in this way.

Navbar

The navbar is where you customize the editor environment and configure high-level app settings. From here you can:

  • Access the Retool navigation menu to browse apps and access other areas of Retool.
  • Toggle the visibility of panels to provide more space when working in the canvas.
  • Change zoom size to increase or decrease the canvas size.
  • Toggle between desktop and mobile layouts.
  • Set the name and description of your app.
  • Write app documentation for users.
  • Search and execute actions from the Command Palette.
  • Access the App actions menu to configure app settings.
  • Preview and share apps with users.

App actions

The ••• menu contains various actions and settings for your app. Some available options include:

Left panel

The left panel contains the Explorer and State tabs. They provide you with a visualization of the contents of your app.

Explorer tab

The Explorer tab allows you to view and interact with the components and code used in your app.

The Components section contains a hierarchical tree from which you can select, rename, switch, or delete components. You can view and select components regardless of visibility including those within multiview containers, such as Tabbed Container component views. Selecting a component makes it visible and, where necessary, switches a container's view to make it active.

The Code section contains all of your app's queries, transformers, and temporary state. Selecting an item automatically displays the bottom panel for you to make changes.

State tab

The State tab displays the current state of all code, components, and global parameters for your app. It organizes information into Components and Code sections that you can use to explore values across your Retool app, such as query data or component settings.

Right panel

The right panel contains the Inspect and Create tabs. This is the panel you most interact with when building apps.

Inspect

The Inspect tab (commonly known as the Inspector) contains all available settings to configure component properties. It is where you set values, update component names, create event handlers, etc.

The Inspector organizes settings into different sections, such as Content, Interaction, and Appearance. As some components have many configurable properties, the Inspector groups some optional and less frequently used settings into subsections to reduce clutter. For instance, prefix and suffix text or icons appear in the Add-ons settings.

Create

The Create tab is where you browse components and modules, then drag them onto the canvas.

The Components tab groups components by type and you can filter the list by entering a search term.

🚧

The Deprecated section contains older components that have been deprecated. You can automatically upgrade most deprecated components currently in use.

The Modules tab contains a list of all modules; reusable groups of components and queries that you can embed into other apps.

Bottom panel

The bottom panel is where you write code for your app, such as:

The bottom panel also includes a schema browser to explore supported resources, such as databases and GraphQL APIs.

Query sections

The bottom panel contains sections for General, Response, and Advanced settings when editing queries.

General

The General tab is where you write and configure general settings for a query. Queries can typically run automatically when inputs change or run only when manually triggered.

You can write SQL queries using either SQL mode for reading data or GUI mode to write data using an interactive query builder. You can also configure query event handlers that trigger when a query runs or fails to run successfully.

To protect your data, queries that perform write or delete operations (e.g., POST API requests or GUI mode SQL queries) are set to manually triggered by default.

Response

The Response tab allows you to configure actions and conditions once a query is run. You can configure notifications or customize failure conditions.

Advanced

The Advanced tab expands on the previous tab's settings. You can configure confirmation requests, timeouts, and disable queries under certain conditions. If you configure a query to run automatically on input change, you can specify which inputs to watch. This triggers the query only when a relevant input changes.

All components appear on the desktop layout by default. The mobile layout is enabled when you configure at least one component to show on mobile. Apps automatically switch to the mobile layout when the viewport width is less than 600px wide.

Status bar

The status bar contains options to:

Updated 11 days ago