Import external React apps

Import React apps created elsewhere into Retool.

You can import React apps from other sources for further development and refinement in Retool. Learn more about how it works.

Export source app

To begin migrating your app to Retool, first generate a .zip file of your React app code. The process to do so differs depending on where your code is stored. The following tabs include examples that describe how to generate a .zip file of React code from different sources.

The .zip file must be 50 MB or smaller, with individual files no larger than 1 MB each.

Lovable

1. Connect your project to GitHub.
2. Once in GitHub, navigate to your new project's repository.
3. Click the green Code button on the project page.
4. Click Download ZIP.

Replit

1. Open your Replit project.
2. Open the Library panel using the icon to the right of the Publish button.
3. Click the three vertical dots in the Library panel.
4. Click Download as zip.

Claude

Ask Claude generate a .zip of your app's code. Claude will provide the specific command that you need to run.

Migrate app to Retool

Use the following steps to import the .zip file of React code to Retool:

The process of migrating an app to Retool can take several minutes. Once you begin the process, be sure to regularly return to the app editor to check if you need to take any action.

1. From the apps landing page, click Create > App.
2. In the Chat tab, click Import your react app to expand the file picker, then select your .zip file. The agent automatically starts the import process and spends several minutes exploring your code and creating a plan.
3. A Connect Resources UI helps you connect your data. For each data source the agent detects, you can choose one of the following:
   • Connect to an existing resource: Select from one of the suggested resources already configured in your organization.
   • Create a new resource: Select one of Retool's native integrations if one is available, or use a generic integration to connect a REST or GraphQL resource.
   • Use mock data: Skip the connection for now and connect the real resource later.
4. Click Confirm selections to proceed with the app generation. The agent continues generating your new app.

Once complete, explore your app. Your connected resources can be found in the Data tab. To swap any mock data for live resources, type @ to search for and reference the resource you want to connect.

How it works

The import process migrates apps in two parts:

• The React frontend: The agent migrates the visual frontend of your app. Apps that are built on the same core stack as Retool allow component architecture, routing, and styling to carry over with high similarity to the original app. Migrated apps are not identical, because your source app and Retool's architecture may have different dependencies. For example, an icon referenced from lucide-react that isn't available in Retool's version is substituted with the closest available alternative.
• Backend integrations: The agent maps each external data source in your app, such as databases, file storage, or software integrations, to a resource. The code that calls those resources is then translated into functions. For example, Supabase query builder calls in your source app become SQL functions in your Retool app.

Resource mapping

When the agent scans your code, it identifies every external data source the app interacts with and maps each one to the closest resource. The mapping decision that the agent makes depends on the kind of data. The table below describes the most common categories.

Resource category	Examples	Mapping pathway
SQL databases	Postgres, MySQL, Supabase	Native integrations are available for major SQL databases. If a native integration is not available, you can create a new PostgreSQL resource.
Non-SQL databases	MongoDB, DynamoDB	Native integrations are available for major non-SQL databases, including MongoDB and DynamoDB.
File storage	S3, GCS	Native integrations are available for S3 and GCS.
SaaS applications	Stripe, Jira, Salesforce	Native integrations are available for many high-usage SaaS tools.
Custom applications	Internal tools, private services	If the data source uses REST or GraphQL, use a generic integration. If that isn't possible, the agent uses mock data as a fallback.
Generic/protocol	REST API, GraphQL	Generic integrations provide the structure for connecting to REST and GraphQL data sources.

The import is never blocked by an unmatched resource. If the agent can't find a fit, your app will use mock data so the app remains usable, and you can connect the real resource later without re-importing.