Skip to main content
Every project has a file tree in the sidebar that shows all your project files and folders. You can create, edit, rename, delete, and upload files directly from the browser.
To put a PDF or another file on your site for visitors to download, follow Add a File Your Visitors Can Download, a step-by-step walkthrough with screenshots.

​
File tree

The sidebar displays your project’s file structure. Click any file to open it in the editor. Folders can be expanded and collapsed.

​
Creating files and folders

Right-click in the file tree and select New File or New Folder. Enter a name and press Enter. You can also create nested paths — for example, typing components/header.html creates the folder and file in one step.

​
Editing files

Click a file to open it in the editor. Changes are saved when you press Ctrl+S (or Cmd+S on Mac). The file tab shows a dot indicator when there are unsaved changes.

​
Renaming

Right-click a file or folder and select Rename. Type the new name and press Enter.

​
Deleting

Right-click a file or folder and select Delete. A confirmation dialog appears before the file is removed.
A deleted file can be brought back from a version: open the version and use Bring back this page. Its earlier copies are kept too, but a deleted file cannot be opened, so only AI tools reach them (project_file_versions, project_file_restore). A deleted folder comes back the same way, one file at a time, so take care when deleting folders.

​
Uploading files

Drag and drop files from your computer directly into the file tree. You can also right-click and select Upload to use the file picker.

​
Supported file types

​
Earlier copies of a file

To go back on one file, open it in the code editor and click History. It lists the file’s earlier copies on Your site:
  • Compare with the file now shows the two side by side.
  • Bring it back brings back the earlier copy, saved as a new version.
  • Delete it removes an earlier copy you no longer need.
Earlier copies belong to Your site, so on a branch the History button is not shown: open a version of the branch and use Bring back this page instead.
Bringing back one file leaves the rest of your project as it is. To go back on several files at once, go back to a version; for images and data, use Project history.

​
How the AI manages files

When the AI assistant creates or modifies files, the changes appear in the file tree with badge indicators. You can review AI-made changes in the editor just like any other edit. To take back a whole request, use Undo this turn in the chat (see Undo an AI turn).