Retool CSS & Custom Component Code Generator

Joey Karczewski
June 11, 2021

As an internal tools platform, Retool is uncontested in its ability to speed up building personalized applications. Nevertheless, outside of the Retool Enterprise plans, custom styling with CSS can prove a trickier task. Precious minutes can be lost searching for classes and writing code: enter, our handy CSS Generator Tool. 

You can check it out https://practicemode.retool.com/embedded/public/d7fc8c5d-062a-441f-baf9-cb6f8c5e5210

This app allows you to rapidly generate lines of custom code to improve the design of your app, letting you preview the result in the app itself, before copying it over to whatever you are working on. App-ception, if you will. The tool itself is open-source, and a project we continue to develop as we discover fun new ways of customising the UI, but in the meantime we have made it available to the Retool community in the hope that it might help some developers save time on their projects, or even discover a new way of making things work. 

To use the app, all you need to do is to set up the formatting how you’d like to see it, preview just to check, change any associated component names to those in your project, and sandwich it into style tags [add where].

Here’s a quick run-through:

Example: if you’d like to make your table [“table1”] grow on hover you’ll head to section (you guessed it) ‘Tables -> grow on hover’. 

It should look something like this: 

._retool-table3:hover{ -webkit-transform: scale(1.2)!important}

._retool-table3{ transition: 0.3s ease-in-out!important}

Copy and paste this into the value box of a text element placed somewhere on your project (it will hide automatically), making sure it’s inside style tags: 

Like this: 

<style>._retool-table3:hover{ -webkit-transform: scale(1.2)!important} </style>

and change “table3” to your target table name: “table1”

and hey presto!

As of now, this is the CSS functions that are available in the Generator app:

  • Retool Canvas Color
  • Max Width Background
  • Basic Font Changes
  • Basic Font Color
  • Font Size
  • Font Hover
  • Image Size
  • Image Rotation
  • Image Hover Grow
  • Change Images on Button
  • Table Hover
  • Table Opacity on Hover
  • Table BG Color
  • Header & Footer Color
  • Custom Table Theme(s)
  • World Choropleth Custom Component
  • Page Dividers

Particularly notable features may include the World Chloropleth Custom Component, which we hacked when looking for a way to present geographical data in an easy-to-read format. Perhaps this could help developers looking to add a location-focused graphic to their app. 

Page dividers could be helpful to those looking to improve the UX of their app by creating space and breaks between sections. 

Finally, Custom Table Themes allow you to brand your app, making it feel a little more like home - if you’re that way inclined. It’s always great to bring a little colour to your internal processes!

As an open-source piece of work, we are open to contributions! If you know of any CSS function that we should add, let us know and we can add it - we’re all for keeping Retool as low-code as possible, and hope that tools like these can facilitate in making this developer work more accessible to everyone. 

If you’re a total beginner to CSS in Retool, and are looking at how to build CSS into your app, you might want to start here, in the Retool documentation for ‘How to Write Custom CSS in Retool’ - here.

Happy customizing!