Update and debug custom components
Learn how to update and debug custom components in Retool.
When developing custom components, Retool recommends you use the retool-ccl utility's dev function (dev mode). Dev mode updates your component in Retool as you make edits, which means you don't have to constantly deploy new versions and update your app in Retool. Each developer (identified by the access key supplied at npx retool-ccl login) has their own dev revision of the component library.
Dev mode
Run the following command to use dev mode. The first time you run this command for a library it creates your dev version in Retool.
npx retool-ccl dev
This command continues to run and watch for file changes. Whenever you save your component files, they're automatically reflected in your Retool app.
When you're ready to publish an app with a custom component, be sure to change your app to use a published version of the component instead of a dev version.
The dev mode branch to use is determined by the creator of the access token being used to authenticate with retool-ccl. For example, if user admin@yourdomain.com uses an access token they created to sign in with retool-ccl, each time they use dev mode it will create/update the dev mode version on the admin@.yourdomain.com branch.
Multiple developers can safely use dev mode with the same library concurrently by using separate dev mode branches. Ensure that each developer has their own unique access token to work on the same library at the same time and prevent overwriting other changes.
Once you create a dev version, you can use it in a Retool app for testing during development of a custom component. You can also switch between any published or dev version from ••• App settings > Custom Components. Each dev version is listed with the access token creator's email address.
Update your component
To update your component, run npx retool-ccl dev, and then navigate to your app's Custom Component settings to change the version back to dev. When you're finished, follow the same steps to deploy your component and pin the app to the latest version.
To delete a library, sign in to your Retool organization and navigate to Settings > Custom Component Libraries. Removing a custom component library deletes all components in the library from your app.
Debug your components
As you build a custom component, you may need to troubleshoot issues that arise. When using dev mode, Retool includes source maps for your components, so you can use your browser's step-by-step debugging tools to debug any issues that come up.