Modules

Modules let you reuse groups of components and queries between Retool applications.

Quickstart

  1. On the Retool Apps page press Create new → Create a module

Create a module from the home screenCreate a module from the home screen

  1. Define Inputs and Outputs for your module. Inputs are values that can be passed into the module from a parent application. Outputs are how parent applications can read data from a module’s internals.

  2. Drag your modules into applications the same way you’d grab regular components.

Working with Modules

View all settings—inputs/outputs configuration, usage of your module—in the left-hand panel:

Inputs

Modules have two types of inputs: data and query.

Data Inputs

Data inputs let you specify any kind of input (ex: string, number, boolean, etc.), including double curly braces {{ }} like most other inputs inside Retool. Not all apps will have inputs to provide. Configure default values for your data inputs by clicking on the edit icon:

Query inputs

Query inputs are how applications using modules can pass in queries that the module can then trigger. When you create a query input, Retool will create a dummy query where you can configure additional properties (e.g. transformer, onSuccess) for the query that application(s) will pass in. When a query input is renamed, the created dummy query is also renamed.

Testing

You can test various module inputs directly in the module by clicking on the module container. When doing so, the right-hand inspector panel will show what you would see in a parent application when clicking on a module.

You can test different values for your data and query inputs here. Hitting the “Reset” button will reset all of these test values to the empty state.

Outputs

Module outputs let you expose data from inside your module to the containing application.

An app using the above module can refer to the module’s output the same way you might refer to a component or query property:

Sizing your module

Set the dimensions of your module by resizing the blue container. The size will be the default size of the module when you drag your module onto the canvas in an application. Just like resizing a regular Container component, all components inside the Module container will also resize.

Permissions

Users that have access to an application will automatically have access to all modules used in that application. Editors with "Use" access to a module will be able to add the module to applications.

📘

Please send us feedback!

We’re planning on adding more restrictive permissions in the future. If you have ideas on how you’d like Modules permissions to work, drop us a note at [email protected]

Create a module from an app

Convert an existing application to a module by clicking the “Export to module” button:

Duplicate a container to a module by clicking on the “Turn component into module”

Duplicate a selection to a module by clicking “Duplicate to module”

Importing and Exporting

Modules can be imported and exported in your organization like regular applications. If an app containing modules is imported, and the modules are missing for any reason, the missing modules will automatically be created.

FAQ

Does using modules impact performance?

There shouldn’t be a significant performance impact from using modules. It should be almost equivalent to building the same app without modules.

What are some of the biggest use cases for using modules?

A few common use cases for modules:

  • Filter component sets: date ranges, selects, and other related components for filtering data in tables or charts across apps
  • Forms: sharing forms between apps
  • Bug reports: allowing app users to submit bug reports in multiple apps (from BoldTech.dev)

How are you using modules? Let us know via our forums!

Will Retool support a “hug contents” mode for module container sizing like other components have?

Yes, we plan on adding this functionality.

Do modules lose functionality when converted from an application vs. being constructed from a blank slate? E.g. I have a module that was converted prior that does not allow me to drag and drop components into a container that came from the pre-converted app.

No modules converted from an application should be identical to modules created from scratch. If you run into any bugs, let our support team know through Intercom!

Is there a way to listen to components within a module from a parent app? For example, I have a table that exists in a module and I want my parent app to listen for a “row click” on that table.

Yes! In the module, add a “Query” type input. In the module’s table, add an event handler to trigger this input query on row click. In the parent app, you can now pass any query into this module input you just created. The parent app query will now be run on click for the module’s table.

Can you make REST API calls within a module?

Yes – you can create any query that you’d normally create in Retool within a module. An example would be populating a select component in a module with the results of a query (say, a user statuses table in your Postgres database).

Releases are not enabled in Modules yet, are there any plans on when this feature will be released?

No concrete timeline yet but it’s planned!

How is permissions inheritance handled with modules? Does importing a module into an app automatically grant access to it?

Users with access to an app will have read/use access to every module inside that app automatically, but not write access. They won’t see the module on the home page or be able to edit it unless they have write permissions to that module.


Did this page help you?