Navigating the File Tree
Overview
The file explorer presents the project's file system as an interactive hierarchical tree. The tree is organized into three root-level sections - Source, Dependencies, and Scratch - each containing its own hierarchy of folders and files. The tree supports expand/collapse navigation, lazy-loading of folder contents, persistent state across sessions, and direct interaction with files through double-click and context menu actions.
Expanding and Collapsing Folders
Folders in the file tree can be expanded to reveal their contents or collapsed to hide them. Clicking the expand arrow next to a folder name loads its children from the server (if not already loaded) and displays them in the tree. Folder contents are lazy-loaded, meaning child nodes are only fetched from the server when a folder is first expanded, reducing initial load time for projects with large file hierarchies.
The expand/collapse state of folders is persisted in the browser's local storage. When the file explorer is reloaded or the user returns to the project in a later session, previously expanded folders are automatically re-expanded to restore the user's working context.
Sort Order
Within each level of the tree hierarchy, nodes are sorted using the following rules:
- Folders are displayed before files.
- Within the folders group and the files group, items are sorted alphabetically by name.
At the root level, the three sections are displayed in a fixed order: Dependencies, Source, Scratch.
WARNING
The sort order displayed in the file explorer is a UI convenience only. When files are packaged and deployed to a target device, the ordering of files within directories is determined by the device's operating system and file system. Do not write program logic that depends on a specific file enumeration order.
Opening Files
Double-clicking a file in the tree opens it in the appropriate viewer or editor based on its type:
- Code files (e.g.,
.py,.txt,.json,.yaml) open in the platform's integrated code editor. - Image files (e.g.,
.jpg,.jpeg,.png,.gif,.bmp,.svg,.webp,.tiff,.ico) open in the image viewer. - PDF files open in the PDF viewer.
The file is opened within the context of the current branch and snapshot, ensuring that the version displayed matches the state of the file in the currently selected branch.
Context Menus
Right-clicking on any node in the file tree opens a context menu with actions relevant to that node's type. The available actions vary depending on whether the selected node is a file, folder, dependency, or root section. Context menu actions include operations such as creating files and folders, uploading, downloading, renaming, deleting, and copying paths. Each of these operations is documented in detail in the corresponding section of this documentation.
TIP
The expand/collapse state is stored per-browser. If the file explorer is accessed from a different browser or device, the tree loads with all folders collapsed by default.