Skip to main content

Web 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.
  • 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 left panel.

The canvas contains 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.
  • Drawer: A slide-out container on the right side of the Main frame.

The Header and Sidebar frames are optional areas that are primarily designed for navigation. The Drawer frame is also optional, and is useful for displaying forms and granular data.

Canvas max width

To adjust the maximum width of the canvas, click the gear icon on the left and update Set max canvas width. By default, the maximum width is 1560px. This setting accepts pixel and percentage values, or you can set it to none so that the app uses 100% of the viewport. On desktops, regardless of the value, an 800px minimum is enforced.

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

note

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:

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.

Drawer frame

The Drawer frame adds a slide-out container to the right side of your app. It's commonly used to display forms, or detailed data for a particular item, user, or product.

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.

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.
  • 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 several tabs for working with components, writing code, managing releases, and changing app settings.

Add tab

The Add tab allows you search for and add components to your app. You can also add modules.

Component tree tab

The Component tree tab 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.

Code tab

The Code tab contains all of your app's resource queries, JavaScript, transformers, and variables. Selecting an item in the list opens a code editor where you can make changes. When a query is selected, there are three additional tabs displayed in the code editor.

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.

Releases and history tab

The Releases and history tab allows you to view and create releases. You can also view your app's history, and revert to previous versions.

App settings tab

The App settings tab allows you to change general settings like your app's theme, or the max canvas width. There are additional sections for:

  • Custom CSS
  • Preloaded JavaScript
  • Libraries
  • URL parameters
  • Custom shortcuts

Right panel

The right panel contains component settings. This is the panel you most interact with when building apps. It is where you set values, update component names, create event handlers, etc.

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

Status bar

The status bar contains options to: