Skip to main content

Reusing Code in Retool

A core aspect of business software is the ability to modularize and reuse code. Companies reuse code to improve collaboration across teams, reduce tech debt and duplicate code, and ease developer onboarding. Retool provides a suite of features to share frontend components and backend queries.

Modules​

A Module is a reusable set of components and queries that can be dragged and dropped into an app. See our documentation for a complete guide to creating, using, and sharing modules.

Common modules:

  • Navigation bar across apps in the same use case or team
  • Search bar and filters
  • Help, contact, feedback, or documentation modals

Query Library​

The Query Library lets you create, run, and share queries across your organization and between Retool apps. See our documentation for a complete guide to creating, using, and sharing queries in the Query Library.

Common queries in the Query Library:

  • Queries to get standard user information
  • Queries to generate auth tokens
  • Queries to join commonly used data sources

JavaScript (JS)​

We encourage reusing JS within an application by removing JS written inline in your components and putting them into JS Queries. This makes your queries easier to debug and reusable across multiple components. See our documentation for JS best practices.

Common reusable JS queries:

  • Conditional show/hide logic
  • Mapping or filtering an array
  • Reordering data

Custom CSS, JavaScript, and JavaScript libraries​

You can add custom CSS at the app or org level. You can also add custom JS functions or JS libraries at the app or org level.

Common reusable CSS/JS:

  • Custom JS functions for your business used across multiple apps
  • CSS that follows your company’s design standards like font and padding
  • Open source libraries imported from CDNJS like new fonts, chart.js, and animate.css