Dynamically render Retool components using Javascript

For complex UI's there are often valid use cases for dynamically rendering components without a priori knowledge of the data inputs used to define how a screen should appear. In React development, this would usually be accomplished through the use of render functions (e.g., React's render()).

Without the ability to add/remove Retool components to the document dynamically, the alternative in some cases is to tightly couple the UI to all possible data inputs, and render but conditionally show/hide components as appropriate. This method is more cumbersome/sometimes impractical if there is high cardinality of the inputs.

Retool does a great job of making components that exist on the canvas scriptable, but to add an API like retool.render(<RetoolEditableTextArea .../>) would dramatically open the possibilities for creating dynamic UI's.

Today Retool offers ListView's which go part of the way towards dynamic rendering, but only partially, missing full flexibility of declaritively rendering components. JSON Schema Form component is good for very basic forms, but falls short of complex UI and non-form UI's. Finally the Custom component is helpful for custom uses, but is not consistent with Retool UI's and adds additional overhead/constraints by it's implementation in an iframe.

In summary, the (large) feature request is for an API to create Retool components using Javascript. Per this, this is not available today. TIA.

Hi @alm! Thank you for such a thoughtful request. I created a ticket for this so we know what features to start with if/when we tackle a Retool API.

In the meantime, dynamically hiding/showing components, using a custom component or using a List View are your best (though not great) bets.

I'll keep this thread updated accordingly!