> ## Documentation Index
> Fetch the complete documentation index at: https://hyperspeed.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Files & IDE

> A browser-based code editor with a file tree, AI assistant, source control panel, live preview, and real-time collaborative editing.

The Files page gives you a full editor inside the browser. You can browse and edit files, get AI help, preview HTML projects, manage Git branches, and collaborate with teammates editing the same file at the same time.

## File tree

The left panel shows the file and folder tree for the space. Click any file to open it in the editor.

### Creating files and folders

* Click the **new file** icon (file with plus) in the tree panel header to create a file.
* Click the **new folder** icon to create a folder.
* Right-click an existing item to rename or delete it.

<Warning>
  Deleting a file or folder is permanent. There is no recycle bin.
</Warning>

### Uploading and downloading files

* Click the **upload** icon in the tree panel to upload a file from your computer. The uploaded file appears in the tree.
* Select a file in the tree and click the **download** icon in the editor toolbar to download it to your computer.

### Drag and drop

You can drag files and folders within the tree to reorganise them.

## Editor

The editor uses **Monaco** — the same engine that powers Visual Studio Code. Syntax highlighting is automatic for common code file types including TypeScript, JavaScript, Python, Go, Rust, HTML, CSS, JSON, YAML, and many others.

For non-code files such as documents, the editor switches to a rich text view by default. You can toggle to the Monaco code view using the **Code** button in the toolbar.

### Collaborative editing

When real-time collaboration is enabled for your workspace, multiple people can edit the same file simultaneously. Changes from other editors appear live as you type, using conflict-free synchronisation (CRDT via Yjs).

<Info>
  Collaborative editing requires the `VITE_YJS_COLLAB=true` setting to be active. If you are unsure whether it is enabled, ask your workspace administrator.
</Info>

## AI assistant panel

Click the **AI** button (sparkles icon) in the toolbar to open the AI assistant panel on the right side of the editor.

The panel has three modes:

<AccordionGroup>
  <Accordion title="Ask — get answers and explanations">
    Use Ask mode to ask questions about the open file or the project in general. The AI reads the file and responds with an explanation. No changes are made to your files.
  </Accordion>

  <Accordion title="Plan — outline work before editing">
    Use Plan mode to describe a change or feature you want to make. The AI returns a plan or outline. No changes are made to your files.
  </Accordion>

  <Accordion title="Edit — propose changes to files">
    Use Edit mode to ask the AI to modify a file. The AI returns a **patch proposal** — a diff showing exactly what would change. You review the proposed changes before deciding to apply or discard them.
  </Accordion>
</AccordionGroup>

### Reviewing and applying AI patches

When the AI proposes edits in Edit mode, the diff viewer opens showing the old and new versions of the file side by side. Review the changes carefully, then click **Apply** to accept them or **Discard** to reject them.

<Tip>
  You can use Edit mode on any file in the tree, not just the one currently open. Select the target file in the panel before sending your prompt.
</Tip>

## Source control panel

Click the **Git** button (branch icon) in the toolbar to open the source control panel. This panel lets you work with Git directly from the browser when your workspace has a Git working directory configured.

From the source control panel you can:

* View the current branch and status
* Stage and unstage file changes
* Commit staged changes with a message
* Push and pull from the remote

<Note>
  The source control panel is only available when your workspace administrator has configured the `HS_GIT_WORKDIR_BASE` setting. If the panel is missing or disabled, Git integration has not been set up for your workspace.
</Note>

## Live preview

Click the **Preview** button (eye icon) in the toolbar to open a live preview pane for HTML and web projects. The preview renders your HTML file in a sandboxed frame alongside the editor.

<Info>
  Live preview works best for self-contained HTML files or projects where all assets are stored in the space's file tree.
</Info>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.