How to Build Internal Tools 10x Faster on Retool


Stop wrestling with UI libraries, hacking together data sources, and figuring out access controls. All internal tools are made from the same building blocks: tables, buttons, forms, etc. Instead of building internal tools from scratch, we'll show you how to use the Retool visual programming IDE so you can ship apps 10x faster and save hundreds of hours.

8 min
24 Jun, 2021


Sign in or register to post your comment.

AI Generated Video Summary

ReTool is a fast way to build applications without custom front-end code, reducing development time and cost. It offers on-premise deployment, security features, and integration with SAM and SSO providers. With ReTool, you can quickly build CRUD apps with a drag and drop interface, search functionality, and database interaction. JavaScript can be used throughout ReTool for dynamic functionality.

1. Introduction to ReTool

Short description:

ReTool is a fast way to build applications without custom front-end code. It unites existing back-end systems, databases, and APIs. With a visual UI builder and maintained React components, it reduces development time and cost. Engineers, analysts, and IT generalists can quickly create apps without being a bottleneck.

All right. So ReTool is a fast way to build applications, but it's really meant for developers. And the core idea behind ReTool is that it eliminates the need to write custom front-end code. So we allow developers to quickly build these tools and hand them off to various stakeholders.

And so just at a glance of ReTool, we help unite existing back-end systems, databases and APIs, so you all can pull in data from those different data sources and visualize them in one place. And we provide a visual UI builder that is drag-and-drop, and we actually maintain all of those React components, so you don't need to maintain React boilerplate and the JavaScript libraries that come with that. And we're enterprise-grade, so we are able to connect to existing data sources. We're not a system of record, we are just that front-end layer on top of your data sources. We provide built-in access controls, audit logs, and even allow our customers to deploy on-prem.

So the benefits of retool. Things that used to take six to 18 months now take only two to eight weeks. Requirements now can be completely visual. You don't need a designer, PM, engineering manager to scope out weeks of work. You can just have an engineer and a stakeholder in the same room. It reduces the total cost of ownership without having to maintain, obviously, all of those React libraries and legacy front-ends, and it also enables teams to work faster. So instead of engineering being the bottleneck, you could have engineers, analysts, IT generalists, anyone that really has a knowledge of web frameworks and how API requests and JSON works, anyone with relative technical knowledge can go ahead and spin up some quick apps. And so what that really does is it takes your engineers and allows them to focus on the hardest problems of your business.

2. Retool Features and App Building

Short description:

Retool offers on-premise deployment, handles security aspects, integrates with SAM and SSO providers, and provides robust on-prem deployment options. It allows you to build a fully functional CRUD app with a drag and drop interface, a component library, and a query builder. A classic use case is a customer support tool, where you can search for a customer, view their profile, and activate or deactivate their account. Retool enables pulling data from various sources, such as Postgres, and displaying it in tables. JavaScript can be used throughout Retool, allowing for dynamic functionality.

So a lot of these logos that you see here, they actually deploy retool on-premise. What that means is it's just a Docker image that you pull on into your VPC and run in your own environment. And so for a lot of our enterprise customers, these are some of our features that make retool especially appealing out of the box. We actually handle already a lot of the security aspects. We integrate with SAM and SSO providers, even provide get syncing to manage collaborations on retail applications, and as well as, robust kind of on prem deployment options as well.

So I'll hand it off to Austin for a quick demo. Awesome. Thanks, Anthony. Great. So Anthony just gave us a great 30,000 foot view of retool, but I'm going to show you what it looks like to actually build a fully functional CRUD app and retool in just a few minutes. So you can kind of think of retool as drag and drop react. There's a component library on the right, as well as an inspector for props of a component. And at the bottom is a query builder, where you can actually write a little bit of code to pull data from your data sources wherever it lives, whether it's custom GS, GraphQL, REST, or any of our other third party integrations.

So a classic use case for retools, maybe a customer support tool, maybe you want to be able to search for a given customer, select their profile, and then activate or deactivate their account. It's a pretty simple app, so we can build it in just a few minutes. So we already have a table component, I can grab a text component, so we know what we're looking at. Everything in here just renders as markdown. I can also grab a text input so we can search for a given user. And then what we're going to do next is actually pull in data from our data sources to populate this table. So if I go to the bottom, I can hit this Postgres database, I can see in this list of tables, we have a user's table. So I'll just write a simple select query to pull data from that table. So I'll just say select all from users, order by ID. And when I save and run this query, all of these tables and components and retool are actually just JavaScript variables. So now that the data property of query one has the results of that query. So if I select this table, you can see in this data property, it's currently just a hard coded list of JavaScript objects. But in Retool, you can write JavaScript anywhere in Retool too, by using these double curly brace notation. So within these curly braces, I'll just say, query one dot data. And you can see now I've pulled in the results of that query. And maybe I just want to hide a couple of these columns here. Cool.

3. Adding Search and Database Interaction

Short description:

We can quickly add search functionality to the app by using a text input component. The value property of the text input dynamically updates as the user types. By adding a simple where clause and using JavaScript, we can enhance the search experience. Additionally, we can write back to the database by using a button and a query. The app can be tested in end user mode to simulate the experience for non-developers. Overall, the app allows for easy searching and updating of data.

So we can add search pretty quickly as well, you can see this text input is called text input one. And if I open the left panel, you can see the entire state of your Retool app as JSON. So this text input has a value property, which you can see dynamically updates as I type a value into the search bar.

So I can add a simple where clause to account for that text input. So I can just say, for first name is like text input one dot value. And since everything in Retool and these double curly braces is just JavaScript, I can add a couple wildcards to the beginning and end to give us a better search experience. So I can save that. I can see if I change it to be I also return Roberto, Elizabeth, etc. Cool.

And the final step, let's say we want to write back to our database, right to activate one of these counts. So I can drag a button, title that activate. And in this on click fan handler, I'll just have to write another query. So I can hit new query. Whenever you want to write back to your database, you expose a nice gooey style interface. So I can say the user's table. I want to update and existing record. I want to filter by the ID, which I can see that table one has a selected row property that I can pull into here. So I can say I'll mark active as true. And I just want to refresh the data in the table when that query succeeds. So I'll wire this button up to query two. And then I can go into the end user mode to see what this app would look like for the engineers who aren't actually building the tool themselves. And they can interact with the app as you would expect. So you can see here, maybe I want to search for Ben. Click on this user and then hit activate. You can see we've just written back to our database there.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk

Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
In the early years of Node.js, diagnostics and debugging were considerable pain points. Modern versions of Node have improved considerably in these areas. Features like async stack traces, heap snapshots, and CPU profiling no longer require third party modules or modifications to application source code. This talk explores the various diagnostic features that have recently been built into Node.
You can check the slides for Colin's talk

JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
Native ESM support for Node.js was a chance for the Node.js project to release official support for enhancing the module loading experience, to enable use cases such as on the fly transpilation, module stubbing, support for loading modules from HTTP, and monitoring.
While CommonJS has support for all this, it was never officially supported and was done by hacking into the Node.js runtime code. ESM has fixed all this. We will look at the architecture of ESM loading in Node.js, and discuss the loader API that supports enhancing it. We will also look into advanced features such as loader chaining and off thread execution.
JSNation Live 2021JSNation Live 2021
19 min
Multithreaded Logging with Pino
Almost every developer thinks that adding one more log line would not decrease the performance of their server... until logging becomes the biggest bottleneck for their systems! We created one of the fastest JSON loggers for Node.js: pino. One of our key decisions was to remove all "transport" to another process (or infrastructure): it reduced both CPU and memory consumption, removing any bottleneck from logging. However, this created friction and lowered the developer experience of using Pino and in-process transports is the most asked feature our user.
In the upcoming version 7, we will solve this problem and increase throughput at the same time: we are introducing pino.transport() to start a worker thread that you can use to transfer your logs safely to other destinations, without sacrificing neither performance nor the developer experience.

Workshops on related topic

Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.
: intermediate
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
Workshop Free
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:
- User authentication - Managing user interactions, returning session / refresh JWTs
- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents
- A quick intro to core authentication concepts
- Coding
- Why passwordless matters
- IDE for your choice
- Node 18 or higher
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
Workshop Free
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.

React Summit 2022React Summit 2022
165 min
GraphQL - From Zero to Hero in 3 hours
How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.
All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.
In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.
If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
Workshop Free
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:
- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (
- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow ( 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
Node Congress 2021Node Congress 2021
245 min
Building Serverless Applications on AWS with TypeScript
This workshop teaches you the basics of serverless application development with TypeScript. We'll start with a simple Lambda function, set up the project and the infrastructure-as-a-code (AWS CDK), and learn how to organize, test, and debug a more complex serverless application.
Table of contents:
        - How to set up a serverless project with TypeScript and CDK
        - How to write a testable Lambda function with hexagonal architecture
        - How to connect a function to a DynamoDB table
        - How to create a serverless API
        - How to debug and test a serverless function
        - How to organize and grow a serverless application
Materials referred to in the workshop:,HYgVepLIpfxrK4EQNclQ9w
DynamoDB blog Alex DeBrie:
Excellent book for the DynamoDB: