Skip to content
QuantCDN

File browser

The file browser is Studio’s view of the project’s source tree — Astro pages and components, layouts, configuration, styles, scripts, and anything else in the repository. Open it from the Files icon in the Studio nav rail.

Layout

Section titled “Layout”

The file browser has two panes:

  • Explorer on the left — the file tree for the active branch.
  • Editor and preview on the right — the code editor and the live preview iframe.

A view-mode toggle in the toolbar switches between Code, Split, and Preview. Drag the divider between the Explorer and the editor to resize the panes.

File tree

Section titled “File tree”

Click a folder to expand it; click a file to open it in the editor. The icon column at the top of the Explorer has:

  • A search button (also bound to Ctrl+P) that opens an inline filter input — type to narrow the tree to matching names.
  • A New file button — see Create a file.
  • A New folder button — see Create a folder.

Right-clicking a tree node opens a context menu with Rename, Move to…, and Delete. The context menu on a folder also offers New folder inside that folder.

Change indicators

Section titled “Change indicators”

When you’re on a non-production branch, file names in the tree are coloured according to their status relative to the project’s production branch (default main — see Branches and environments):

  • M — modified
  • A — added
  • D — deleted
  • R — renamed

A small revert button appears next to changed files and to files with unsaved buffer edits. See Revert changes.

A toast banner near the top of the page summarises the count of unpublished changes on the branch and links to the Review view.

Open a file

Section titled “Open a file”

Click a file in the tree. Its contents load into the editor. The current path is shown in the toolbar.

Binary files (images, fonts, archives) open in a read-only preview instead of the editor — images render inline, fonts show a specimen line, and other types show a generic placeholder with the file size.

Save changes

Section titled “Save changes”

Click Save in the toolbar to commit the current file to the active branch. Saving makes a single-file commit; Studio re-syncs its known HEAD on success so external commits are detected. The unsaved-state indicator beside the filename clears once the save succeeds.

If the repository changes outside Studio while you’re editing, a yellow banner appears with a Refresh button to reload the tree.

Create a file

Section titled “Create a file”

Click the New file icon in the Explorer header. An input appears at the top of the tree — type a path (for example, src/pages/about.astro) and press Enter. The file is created with empty contents on the active branch and opened in the editor. Press Escape or click away to cancel.

Create a folder

Section titled “Create a folder”

Click the New folder icon (or pick New folder from a folder’s context menu). Type a path (for example, src/components/blocks) and press Enter. Studio creates the folder by adding a .gitkeep placeholder so Git tracks it.

Rename or move

Section titled “Rename or move”

Right-click a file or folder and pick Rename or Move to…. Move to… opens a dialog where you enter the new path. If the operation fails partway through, Studio errs on the safe side and may leave a copy of the original behind rather than risk losing the content.

Delete

Section titled “Delete”

Right-click a node and pick Delete, then confirm. The file or folder is removed from the active branch.

Revert changes

Section titled “Revert changes”

If you’re on a non-production branch, the revert button in the tree restores a file to the version on the production branch:

  • Modified or deleted files have their content rewritten from the production branch.
  • Added files (which don’t exist on the production branch) are deleted from the active branch.

You can also discard unsaved editor edits without touching the committed version by picking Discard unsaved changes from a file’s context menu.

For more on how branches map to environments and merging, see Branches and environments.

History

Section titled “History”

Click History in the toolbar to open the history panel. It lists the most recent commits on the active branch (up to 20), each showing the commit message, author, relative date, and short SHA.

Next steps

Section titled “Next steps”