Compare apps and classic apps
A conceptual overview of how apps and classic apps differ in Retool, presented as comparison tables.
Retool offers two ways to build internal software: apps and classic apps. Both connect to your data through resources, share the same permissions and governance model, and publish to users. They differ in authoring model, underlying architecture, and the relationship between data and UI.
Authoring model
Both apps and classic apps can be authored with AI or manually, but the mechanisms to do so are different.
| Apps | Classic apps | |
|---|---|---|
| Authoring mechanism | AI-first. Prompting an agent in natural language in the Chat tab. Manual edits to React code are also supported. | Drag-and-drop. Arrange predefined components on a canvas. Assist is also available for AI-driven development. |
| Code authoring | You can review and edit the agent's code directly in the Code tab. | You write queries, transformers, and JavaScript and edit properties in dedicated panels. |
| Layout system | No prescribed layout or grid, and apps are mobile-responsive by default. | Fixed 12-column grid. Components can be organized into frames or modules. |
| Result | Source code that you can review or extend. | A tree of configured Retool components. |
| Learn more | App builder | Classic app IDE |
Governance
Both apps and classic apps use Retool's permissions model. Admins assign Use, Edit, or Own access to apps and resources through permission groups, and can configure resource environments to separate development and production data.
Admins on the Business and Enterprise plans can use role-based access controls to further restrict access to AI authoring tools.
Retool provides additional safeguards specific to AI authoring of apps. AI authoring tools only explore and connect resources for which the builder has Edit access. Builders retain control over all code that runs against resources.
Learn more about organization management and users or permissions.
Architecture
The architecture of apps and classic apps differ significantly.
| Apps | Classic apps | |
|---|---|---|
| Foundation | React 19 source code with shadcn/ui components, Tailwind CSS, TanStack for tables, and Recharts for charts. | Retool's proprietary language, ToolScript, with a predefined component library defined by Retool. |
| Extensibility | Extend with any public npm package. | Create custom component libraries. |
| State model | Standard React. Data flows through props, hooks, and component state in TypeScript files. Re-renders are triggered by React state updates. | Declarative reactive model. Components, queries, and variables expose state referenced via {{ }} embedded expressions. A dependency graph propagates changes to every dependent expression, similar to a spreadsheet. |
| Learn more | How it works | Classic apps quickstart |
Data access
In both apps and classic apps, data is connected to Retool through resources, which provide a governable interface for configuring access to data.
| Apps | Classic apps | |
|---|---|---|
| Data interface | Functions: multi-step, strongly typed TypeScript that combines resource queries, data transformation, and structured return values. | Queries: resource queries, JavaScript queries, and transformers, each exposing a data property referenceable from anywhere in the app. |
| Execution | Functions run serverlessly on Retool's backend. | Queries run independently on the frontend and can be chained via event handlers to perform multiple steps. |
| Write safeguards | The agent sends a human-in-the-loop request for your approval before running a function that modifies data. | Builders explicitly configure when queries run. Assist sends a human-in-the-loop request for your approval before running queries while building classic apps. |
| Learn more | Data | Queries quickstart |