Skip to main content

App IDE

Learn about Retool's IDE for app development.

The App IDE 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 IDE

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.
  • Split Pane: A resizable canvas adjacent to the Main frame.
  • Modal: A window displayed over your app.

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

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.

You can open the Drawer frame using event handlers on components like Button, Table, List View, etc.

Split Pane frame​

The Split Pane frame adds a resizable canvas adjacent to the main frame. It can be used to display a detail view relative to the main frame or split the app for multitasking.

You can open the Split Pane frame using event handlers on components like Button, Table, List View, etc.

The modal frame adds a popup window to your app. You might use this frame to display information to users before they access your app, or to complete authentication using the Auth Login component.

You can open the Modal frame using event handlers on components like Button, Table, List View, etc.

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

The Code search tab is currently rolling out to cloud-hosted Retool organizations and will be available shortly.

The Code search tab includes various options for searching through code in your apps. You can search within JavaScript, queries, event handlers, properties, custom CSS, URL parameters, etc. You can also configure case matching or use regular expressions to refine your searches.

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.

State tab​

The State tab contains details on each component, query, transformer, variable, global object, and frame in your app. You can see more details from the sidebar by selecting individual objects. For example, component state contains its current value and all its properties.

The bottom of the window also shows the queries that a component depends on, and vice versa, which can be useful for identifying dependencies in your app.

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, the Add-ons section contains settings for prefix and suffix text.

Status bar​

The status bar contains options to: