Skip to main content
Code view shows the files and code behind your project. You can open and edit files yourself, organize them into folders, and point Bolt to a specific section of code. Use Code view when you:
  • Know exactly what needs to be changed and want to edit it yourself rather than prompting Bolt. Editing in Code view doesn’t use tokens.
  • Want to understand how your project is built.
  • Need to find, rename, move, or delete a specific file.
Not all tasks in Code view require you to understand the code. Renaming a file, copying its path to use in a prompt, and looking for errors in the terminal don’t involve reading or changing any code.
If you’re using Bolt in Safari or on a mobile device, Code view is read-only and the terminal isn’t available. You can still open and look through your files, but you’ll need to prompt Bolt to make any changes.To edit your code files directly or use the terminal, open your project in Chrome or another Chromium-based browser on a laptop or desktop.

Open Code view

By default, your Bolt project shows your chat and a preview of your app. To see your files, click the code icon (<>) in the top center of your screen. Your project’s files appear in the Files list. Click a folder to expand it, or click a file to open it in the editor.

Edit a file

  1. In the Files list, click the file you want to edit.
  2. Make your changes in the editor.
  3. Click Save, or press Cmd+S (Mac) or Ctrl+S (Windows). Bolt builds your changes automatically.
  4. Switch back to Preview to see your changes.

Manage files and folders

To create, rename, move, or delete files and folders, right-click in the Files list. The options you see depend on where you right-click:
  • A file or folder: Shows all the options for that item.
  • Empty space in the list: Shows options for your project’s top-level folder, such as creating a new file there.

Create a file or folder

  1. In the Files list, right-click the folder where you want the new file or folder to go. To add it to the top level of your project, right-click empty space in the list.
  2. Click New file or New folder.
  3. Enter a name, then press Enter.
To cancel, press Esc. Each file or folder name can be up to 100 characters long. Names that use emoji or non-Latin characters have a lower limit, because those characters take up more space. To add a file from your computer, such as an image, drag it into the Files list. To learn more, see Upload files.

Rename a file or folder

  1. In the Files list, right-click the file or folder.
  2. Click Rename.
  3. Enter the new name, then press Enter.
You can also double-click a file to rename it.

Move or duplicate files

  1. In the Files list, right-click the file or folder.
  2. Click Cut to move it, or Copy to duplicate it.
  3. Right-click the folder where you want it to go.
  4. Click Paste.
If you right-click a file in step 3, Bolt pastes into the same folder as that file. To cancel before you paste, press Esc. You can also move files by dragging them onto a folder in the Files list.

Copy a file’s path

A file’s path tells Bolt the location of a specific file. Paste it into a prompt when you want to directly identify a file for Bolt to use or change. For example: Use public/hero-image.png for the header image.
  1. In the Files list, right-click the file.
  2. Click Copy relative path.
  3. Paste the path into your prompt.
Copy relative path gives the shorter path that starts from your project’s top-level folder, such as src/App.tsx. This is the path most prompts need. Copy path gives the full path, such as /home/project/src/App.tsx.

Delete a file or folder

Bolt deletes files and folders right away, without asking you to confirm. Deleting a folder also deletes everything inside it.
  1. In the Files list, right-click the file or folder.
  2. Click Delete.
If you delete something by mistake, see Get back a file you deleted.

Select multiple files

You can select several files and folders, then move, duplicate, or delete them all at the same time.
  1. In the Files list, select the files and folders you want:
    • To select items one at a time, hold Cmd (Mac) or Ctrl (Windows) and click each one.
    • To select everything between two items, click the first item, then hold Shift and click the last one.
  2. Right-click any of the selected items.
  3. Click the option you want. It applies to everything you selected.
You can only rename one item at a time. You won’t see Rename as an option if you have more than one item selected. To clear your selection, press Esc.

Ask Bolt about specific code

You’ll get more accurate results if you’re explicit about which code Bolt should change. To ask about or change a specific section of code:
  1. Open a Bolt project.
  2. Click the code icon (<>) in the top center of your screen to switch to Code view.
  3. Highlight the code you want to discuss or change.
  4. Click the Ask Bolt button (if the button doesn’t appear immediately, try right-clicking). Bolt links the selection in the prompt box.
  5. Enter your question or request.

Troubleshoot file actions

”This file path is too long”

Bolt shows this message when you try to create, rename, or upload a file with a name or path that’s too long. The path takes into account the file name and the name of the folder or folders it’s in. Make the file or folder name shorter, then try again.

”Enter a name for this file”

Bolt shows this message if you press Enter without typing a name. Enter a name, or press Esc to cancel.

Get back a file you deleted

Bolt doesn’t have an undo option for deleted files. Try these options first, because they bring back only the file you deleted:
  • If your project is connected to GitHub, copy the file from your repository. To learn more, see GitHub.
  • If you downloaded a copy of your project, copy the file from that download. To learn more, see Export a local copy of your project.
  • If you remember what the file did, ask Bolt to recreate it, but be aware it might not be exactly the same as the original.
You can also restore an earlier version of your project from before you deleted the file.
Restoring from version history rolls back your whole project, not just the deleted file. To learn more, see Backups, restore, and version history.

Use the terminal

The terminal is a place in your Bolt project where you can type text commands and view the output of Bolt’s processing. It’s built into Bolt and runs in your browser, inside your project. Running a command in the terminal doesn’t use tokens. Using the terminal isn’t required to build with Bolt, but it can help you troubleshoot. If you’re having an issue with your project, errors in the terminal can give Bolt specific information to fix the problem. The terminal isn’t available in Safari. To use it, open your project in Chrome or another Chromium-based browser.
Bolt’s terminal is different from the Terminal or Command Prompt app on your computer. To run a command in your Bolt project, use the Terminal tab in Bolt. Commands you run on your computer don’t reach your Bolt project.
The terminal has the following tabs, each with a different purpose:
  • Bolt: Shows the commands Bolt runs in the background to set up your project and keep your app running. You might check this tab if your preview isn’t loading or if Bolt seems stuck.
  • Publish Output: Shows the output from publishing your project. You might check this tab if you’re having trouble publishing your project.
  • Terminal: Shows your own commands and their results.

Open the terminal

  1. Open Code view.
  2. In the bottom panel, find the Bolt, Publish Output, and Terminal tabs.
The terminal opens on the Bolt tab. If you see only the tabs and no output area, click the arrow icon on the right side of the tab header to expand the bottom panel. To hide the panel again, click the arrow icon a second time.
The bottom panel in Code view with the Bolt, Publish Output, and Terminal tabs, and the Bolt tab showing output from the app's development server.

Run a command

Before you run a command, wait until Bolt finishes responding to your latest prompt. Running a command while Bolt is still working can interfere with the changes it’s making.
  1. Open the terminal.
  2. In the bottom panel, click the Terminal tab.
  3. Click inside the terminal area.
  4. Paste or type the command you want to run.
  5. Press Enter.
  6. Wait for the command to finish. When it’s done, the text stops changing and a new line appears where you can type again.
If a command changes your project in a way you don’t want, you can restore an earlier version. To learn more, see Backups, restore, and version history.

Find error messages and other output in the terminal

The terminal’s output area shows the results of Bolt’s processing and of commands you run. If an error occurs, the details appear here too. Sharing the exact error with Bolt or Bolt’s support team gives a more precise picture of what went wrong.
  1. In the terminal, check the output on these tabs:
    • Bolt: for preview and other project issues.
    • Publish Output: for publishing issues.
    Error messages are usually in red text and may begin with the word error.
  2. Select and copy the error details.
  3. Paste the details into the chat and ask Bolt to fix the problem, or paste them into your message to support.
The following screenshot shows an example of an error in the Bolt tab of the terminal:
Code view with an error message in red text in the Bolt tab of the terminal.

Troubleshoot terminal issues

Errors after running a command

If you see an error after running a command, copy the error and paste it into the chat, then ask Bolt to fix it. See Find error messages and other output in the terminal. For more instructions to troubleshoot specific problems, see:

A command seems stuck

Some commands take a few minutes to finish. If it’s been a long time since any output appeared, click inside the terminal and press Ctrl+C to stop the command. Then you can run it again.