Creating Retool in Retool (with template)

In this UI inspiration piece, we created Retool-ception. Retool, built on Retool. Check it out! Newsletter members can download the template too.
Creating Retool in Retool (with template)

We’re not entirely sure if the Retool community is ready for this… but we’re doing it anyway. In the next of our Retool UI-inspiration series (where we use Retool to replicate well-known UIs we like) we created the ultimate Retool UI dupe - it’s Retool. On Retool. No guts, no glory.

Here’s what it looks like:

Don’t believe us that this isn’t just… Retool? Have a play around and see for yourself.

And, if you’re feeling really daring, members of our newsletter can download the JSON to blow their minds in edit mode too.

💥
Interested in testing it out in your environment? TheToolbox newsletter members can download the typescript for free and import it directly into Retool to use immediately.Subscribe to The Toolbox for free to skip the tutorial and download the JSON at the end of this article ⬇️

Once you’ve got your head around the Retool-ception, keep reading for some key UI pattern takeaways from this most monumental UI endeavor yet.

Key disclaimer: Yes, this was Stefan, and no, he cannot be stopped.

Closable Notification Containers

Why not have notifications in your Retool apps? Using the Retool style of container you can set up notifications for your users that alert them to new features, important announcements and updates, that can quickly be closed away when read. This is particularly useful for the Home pages of multi-page dashboards.

Notifications within internal applications for users to catch up on updates, announcements and features etc

In Retool, (real Retool, not Retool on Retool) you can natively perform this use experience by using the setHidden event handler and the close button. You can use a listview with a setHidden event handler on each container to surface and hide notifications that might be relevant to the end user.

setHidden event handler dashboard in Retool

Minimalistic and well-styled listviews

We bet you didn’t think that our app menu was a built in a listview! The Listview is a little neglected as a component: we often find that, since listviews take longer to configure, people don’t fully stylize them and their Listviews end up looking like clunky cards rather than tidy lists.

Listview app menu in Retool

In this app we used all kinds of stylistic tricks to hide the fact that this list is made of a list view component - download the app to find out how! Listviews can be more flexible than tables, since you can use any component within them and there can be more options for editability. Plus, a well-styled Listview can look very beautiful too.

Configuring List View Component in Retool

Subtle user feedback: container hovers

One of our favorite things to do when developing in Retool is to use design patterns that are 99% invisible but still highly effective in guiding the user experience. In the top right-hand corner you can see the outline change on hover. There’s a reason Retool uses this: this kind of subtle feedback helps users understand the UI intuitively without needing instructions or feeling overwhelmed with repetitive buttons or text. They might realize something is clickable that wasn’t obvious before or notice a button better.

Retool UI buttons showing hover effect with subtle border color change for Web app, Mobile app, Resource, Workflow, and Form options.

To achieve this, we can write a short snippet in the button’s ‘border’ styling, to change the border color on hover.

Code snippet showing conditional border color change in Retool using 'hovered' attribute: cont.hovered ? '#c7c7c7' : '#E0E0E0'

The ‘hovered’ attribute can be so useful in Retool apps and deserves much more usage: drop shadows on containers and buttons, background color changes, and more.

Interested in playing around with how we did this in your own environment? Members can download the Toolscript below to import it directly into their Retool environment.

In the rest of this UI inspiration series, we recreate some of our favorite application UI's, like Steam, Reddit, YouTube. Make sure to check them out!

💥
At Bold Tech, we specialize in building great internal tools, fast. We are obsessed with building apps that make your teams happier and more productive. In our blog, you can learn all about how to build better business software for more satisfied employees, or get in contact to chat to us about what you're looking to build.

Download the sample toolscript

The Toolbox newsletter members can download the JSON and import it directly into their Retool environment to test it out ⬇️⬇️⬇️

Read the full story

Sign up now to read the full story and get access to all posts for subscribers only.

Subscribe
Already have an account? Sign in

Your hub for internal tools.

Powered by Bold Tech, internal tool experts.

Find your tool
tools.dev

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to tools.dev.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.