Manually edit app code

View and edit the code for your app.

While the primary development experience for apps is through natural language in the Chat tab, it is sometimes necessary to make small code changes yourself. Simple changes that you might want to perform manually could include text changes or layout tweaks.

To manually edit your app code, navigate to the Code tab in the left panel. The Code tab includes an outline of all files that are included in your app.

In the Change History tab, your changes are denoted with your name, while the agent's changes are prefixed with (Agent).

File management

You can manually create and delete files from the Code tab.

Create files and folders

You can manually create frontend files, backend files, and folders from the Code tab by clicking :

• Folder: Create a new empty folder inside the frontend or backend directory of your app.
• Frontend component: Create a new TypeScript file that represents a React component. Provide the component name, which must be written in PascalCase. Retool appends .tsx as a file extension and populates the file with the basic structure of a React component.
• Frontend file: Create a new generic frontend file. Provide the full file name, including the file extension.
• Backend function: Create a new TypeScript file that represents a function. Provide the function name. Retool appends .ts as a file extension and populates the file with the basic structure of the function.
• Backend file: Create a new generic backend file. Provide the full file name, including the file extension.

note

Retool supports the creation of any type of text file using this interface. However, not every file type is compatible with the frontend or backend technology stack (for example, a .css file in the backend directory). Binary files (such as images, videos, and PDFs) are not supported.

Delete files and folders

You can delete certain code files or folders, including those that define components and backend functions, or other temporary or user-written files:

• To delete a file, select it from the file picker in the Code tab. In the opened file, click the icon in the toolbar.
• To delete a folder, hover over it in the file picker and click the icon.

Caution

Any imports of your removed file will break.

You cannot delete platform files, because Retool requires them for your app to run. These include core app files (such as App.tsx, package.json, and theme files), generated files (such as resource hook files), and other supporting files.

Edits locked

There are certain scenarios in which code editing is prevented:

• Code edits are locked while critical operations are running.
• Some files, designated by a icon, are view-only to help protect your app. These files are used by the agent, and changing them could cause your app to stop working correctly. You can still open view-only files and view the contents.

Keyboard shortcuts

The following table shows the supported keyboard shortcuts while in the Code tab.

Keystrokes	Action
Mod + p	Open the file search to find and open a file by name.
Mod + f	Open a search bar at the top of the code editor. If the file is editable, you can also click to expand the search bar and view options for replacing search terms.
Mod + z	Undo changes.
Mod + shift + z	Redo changes.
Mod + alt + w	Close a code file.
Mod + alt + t	Close all code files.

The code editor also supports common code editor shortcuts beyond those listed here, such as pressing Tab to indent.