I have talked about no-code and low-code scenes and mentioned Retool in Day 16, Day 18, and Day 19’s newsletter. You can tell I am a fan.

If this is your first time hearing about Retool, it is a low-code platform to build data-driven internal tools. However, I see the potential to use it to build consumer-facing apps. After using it to build two projects, I have a few tricks up my sleeve that I would like to share with you.

I will rebuild the Google Fonts website from scratch. It will have these core features:

• List all fonts via Google Fonts API; list font family name and number of styles
• Live preview the font, type custom string to preview the font, change preview font size
• Search fonts by name

Step 1, get the data in from Google Font API.

First, you need to get a Google Fonts API key and use it to construct the request URL:

<https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY>

Then create a new RESTQuery inside of Retool; I named the query google_fonts for easy reference later on:

1_add google fonts data source.mp4

Step 2, create a table with the RESTQuery as the data source.

The table is the most direct way to showcase data in Retool. Note I used google_fonts.data.items instead of google_fonts.data because a table’s source data needs to be an array:

2.1_use table to display data.mp4

Step 3, show # of styles in each font family.

There isn’t direct property in the data; however, I can transform the “variants” property to get the number of styles by mapping it to its length {{self.length}}:

3_show number of styles.mp4

Step 4, add a font live preview