App editor

Learn about Retool's App editor and start building apps.

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

  • Canvas - Arrange components to build your app's interface
  • Toolbar - Configure app settings
  • Left panel - Visualize and browse component, query, and app state
  • Bottom panel - Write code to query and transform data
  • Right panel - Configure and create components

App editorApp editor

📘

When you use the App editor, you're in creator mode. Users without edit permissions (e.g., end-users who don't edit apps) interact with your apps in user mode.

Canvas

The canvas is the main area of your Retool app and is where you build the interface. You arrange componentsComponents - Drag-and-drop UI presets your users interact with to read and write data. They function similar to React components as they have properties and internal state. by dragging them from the Create tab of the right panel. Components snap to the 12-column grid and can be placed in two specific sections, known as frames.

The canvasThe canvas

12-column grid

Both frames on the canvas use a 12-column grid that fills your viewport with fixed-height rows. The grid has a maximum width of 1560px and you can view it at any time by holding down Cmd/Ctrl.

As you arrange components in either frame, their position and size snaps to this grid.

Frames

The canvas is split into two sections in which you can add and arrange components: the Header frame and Main frame. The majority of your components should be placed in the Main frame.

Each frame automatically grows as you add or resize components by adding more rows to the grid.

Header frame

The Header frame allows you to build a custom header for your application. You can drag any component into it. A typical use for the Header frame is to contain a Navigation component that links to web pages or other Retool apps.

The Header frame is always visible in creator mode. It is not visible in user mode if it doesn't contain any components. Your users only sees your custom header in user mode, not a Retool-branded header. To return to your app homepage, click on the Powered by Retool button.

Header frame in user mode previewHeader frame in user mode preview

Main frame

The Main frame is the core section of your application. This frame is where you place and arrange the majority of your app's components and in which most interactions take place.

Arrange components

📘

Components are fully interactive in creator mode. Hold Cmd/Ctrl when selecting or moving a component without interacting with it.

Drag-and-drop components to rearrange them on the canvas. Components cannot overlap so, as you move components around, the layout of your app automatically updates and adjusts. All components have a default size (e.g., 2 columns x 5 rows) and built-in spacing.

Resize components

Most components can be resized to fit a custom area—select a component and then drag from a corner or edge. Certain components, such as Container or Text Area, have a fixed sizes that expand to automatically grow with their content. You can set their Overflow setting to Scroll or Hidden using the Inspect tab of the right panel to control this behavior.

👍

You can fine-tune the position of selected components using keyboard arrow keys.

You can configure containers to dynamically adjust their size based on their contents. Set the component's Height to Hug Contents in the component's Layout settings, available in the Inspect tab of the right panel.

Group components together

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.

Hide or disable components

Set a component's Hidden or Disabled setting to true to hide or disable it. These values can also evaluate to true based on a truthy valueTruthy value - A value that is considered true when evaluated in a Boolean context. Any value is considered "truthy". No value, or one that evaluates as false, is considered "falsy".. For example, you can use the state of one component to toggle the Hidden property of another component. Checkbox can be used to toggle the visibility of another component when checked. To do this, set Hidden to {{ checkbox1.value }} on the component you want to hide . This evaluates to true when the checkbox is checked, and false when unchecked.

You can also use event handlersEvent handlers - Trigger queries, control components, and perform other actions in response to specified user interactions. if you need to control components based on user actions. For example, you could use a Button to show or hide a Text Area component.

📘

Hidden components don't take up space on the canvas by default. You can enable Maintain space when hidden to preserve the component's layout regardless of visibility. This can maintain fixed positioning of components, regardless of visibility.

Duplicate components

You can duplicate existing components by holding Alt and dragging them to a new position. You can also copy and paste selected components using Cmd/Ctrl+C and Cmd/Ctrl+V.

Toolbar

The toolbar is the row of options to configure your app, displayed at the top of the App editor.

ToolbarToolbar

Some available options include:

  • Set the name and description of your app, or write app documentation.
  • Toggle the visibility of panels.
  • Change zoom size.
  • Select the current environment.
  • Access the App actions menu.
  • Share the app with others and preview in viewer mode.

You can toggle the visibility of the panels from the toolbar to provide more space to work in the canvas.

App actions

The ••• menu contains various actions and settings for your app.

App actionsApp actions

Some available options include:

Share and preview your app

Click Share to access available sharing options. You can share apps with other editors in your organization or invite new members to join. You can also share a viewer link that launches your app in user mode, or use the provided IFRAME snippet to embed your Retool app in another page.

Share and preview an appShare and preview an app

Click Preview to test your app in user mode. If you use release management, you can also preview specific versions of apps.

Left panel

The left panel contains the Explorer and State tabs, and provides 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 tree gives you a nested view of all components in your app. You can select components and rename, switch, or delete them from the tree.

You can also view and select components that are not currently visible, such as those in 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.

The structure maps to how you specify values in your app. For example, {{ query1.data.createdAt }} would return an array of createdAt data from query1.

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 is commonly referred to as the Inspector. It contains all the available settings for the selected component and is where you set values, update component names, and create event handlers. The Inspector organizes settings into different sections, such as Basic and Interaction. These settings and sections change automatically as you select different components.

Create

The Create tab contains a library of all available components and modules. You use this tab to add components to your app; drag-and-drop a component from this tab to the canvas. It organizes components into sections and you can enter a search term to quickly find a component you need.

🚧

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

You can also use the Create tab to add modules—reusable groups of components and queries that you can embed into other apps.

Bottom panel

The bottom panel is where you write code to interact with connected resources. You can perform API requests, query databases, transform or manipulate data with JavaScript, and configure temporary state.

📘

The bottom panel displays queries or temporary state in your app if the Explorer tab in the left panel is not currently visible.

The bottom panel also contains a database browser to explore tables and columns in a connected resource.

General

The General tab contains the query editor. 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., PUT requests or delete record queries) are initially set to be manually triggered.

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.

Desktop and mobile layouts

Retool apps support desktop and mobile layouts. You can optionally show or hide components on either layout by toggling the Responsive settings for each component. The mobile layout also uses a narrower 12-column grid to accommodate the smaller size.

Use the Desktop and Mobile buttons in the top bar to toggle between layout views. Components you add appear only in the layout you're currently viewing. For example, if you add a component while viewing the mobile layout, it does not appear in the desktop layout until you enable it. You can also customize the arrangement of components for each layout separately—repositioning a component in the desktop layout does not alter its position for the mobile layout.

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.

Supported browsers

Retool officially supports the latest stable releases of the following desktop web browsers:

Editing apps in alternative browsers, mobile devices, or beta and nightly builds, is not officially supported.


Did this page help you?