What is a Retool Custom Component?

A Custom Component is a self-contained UI element built with HTML, CSS, and JavaScript that runs inside a Retool application as a native component. It extends Retool's built-in component library to support UI patterns, interactions, or visualizations that standard components do not cover. Custom Components are fully integrated with the rest of the Retool app through bidirectional data bindings and event triggers, so they behave like any other component on the canvas.

How do Custom Components work?

Each Custom Component runs inside a sandboxed iFrame, which isolates its code and dependencies from the Retool runtime. Communication between the component and the app happens through Retool's model: the component reads data passed in via props and writes updates back using modelUpdate. This means a Custom Component can display live query data, respond to user input, and trigger queries in the app, all without leaving the Retool environment.

Properties exposed through the component's manifest appear in the Retool inspector panel, making them configurable without touching the underlying code.

What is a Custom Component Library?

Individual components can be grouped into a Custom Component Library, versioned, and deployed across multiple Retool apps within an organisation. This allows teams to build a shared set of components that remain consistent and maintainable as apps scale. Libraries are deployed through Retool's CLI and follow an immutable versioning model, so production apps are never broken by in-progress changes.

When should you use a Custom Component?

Custom Components are most useful when a workflow requires something Retool's native components cannot provide: a rich text editor, a complex data visualisation, a drag-and-drop interface, or any UI element dependent on a third-party JavaScript library. They are also the right choice when the same specialised component needs to be reused across multiple apps in a consistent way.

They add build and maintenance overhead compared to native components, so they are best reserved for cases where the native library genuinely falls short.

Example

A content operations team managing assets inside a Retool app needed structured rich-text input, something Retool's native text area could not provide. Stackdrop built a Custom Component wrapping Editor.js, a block-based editor that outputs clean JSON instead of HTML. The component binds directly to a database query, so content is saved and retrieved without any manual parsing or cleanup. The team configures formatting options through the Retool inspector without touching the component code.

FAQ

Do Custom Components require a separate framework?

No. They are built with standard web technologies: HTML, CSS, and JavaScript. Any npm-compatible library can be loaded inside the component.

Can Custom Components interact with Retool queries?

Yes. Through the model binding system, a Custom Component can read query results and trigger new queries based on user interaction.

Where can I find existing Custom Components to use or reference?

Stackdrop publishes open-source components built for real internal tool workflows, which you can find in our Custom Components Library.

Retool also maintains an official custom component library on GitHub.