| 📦 Turbo JS 91999d1 k33g 12h ago | 1 | # How to browse a project and open files from a tree |
| 2 | |
| 3 | This guide shows how to open the project tree, walk it, and open a file from it. It assumes Turbo JS is already installed. |
| 4 | |
| 5 | ## Open the tree |
| 6 | |
| 7 | Start the editor **from the project's own directory**, then press `F9`, or choose **Window ▸ Project tree**. |
| 8 | |
| 9 | A window opens showing the project's files, named after the directory the editor was started in: |
| 10 | |
| 11 | ``` |
| 12 | ╔═[x]═══════════ turbo-js ═══════════2═[■]╗ |
| 13 | ║ ▶ .turbo-js ║ |
| 14 | ║ ▼ docs ║ |
| 15 | ║ ▶ diagrams ║ |
| 16 | ║ ▶ en ║ |
| 17 | ║ ▶ fr ║ |
| 18 | ║ ▼ internal ║ |
| 19 | ║ ▼ jslang ║ |
| 20 | ║ jslang.go ║ |
| 21 | ║ scan.go ║ |
| 22 | ║ .gitignore ║ |
| 23 | ║ Makefile ║ |
| 24 | ║ main.go ║ |
| 25 | ╚═══════════════════════════════════════════╝ |
| 26 | ``` |
| 27 | |
| 28 | Directories come first, then files, each group sorted. `.git` is the only thing hidden — `.turbo-js`, `.gitignore` and the rest are files of your project, and you may well want to open them. |
| 29 | |
| 30 | Pressing `F9` again brings that window forward rather than opening a second tree. |
| 31 | |
| 32 | ## Walk it |
| 33 | |
| 34 | | Key | Effect | |
| 35 | | --- | --- | |
| 36 | | `↑` `↓` | Move the highlight | |
| 37 | | `→` | Open a closed directory; on anything else, step to the next row | |
| 38 | | `←` | Close an open directory; on anything else, step out to the directory it is in | |
| 39 | | `Enter` | Open a file, or open and close a directory | |
| 40 | | `Home` `End` | First / last row | |
| 41 | | `PgUp` `PgDn` | A screenful at a time | |
| 42 | |
| 43 | A directory is read the first time you open it, so a tree on a large project costs one listing rather than a walk of everything. |
| 44 | |
| 45 | ## Open a file |
| 46 | |
| 47 | Put the highlight on it and press `Enter`, or click it twice. |
| 48 | |
| 49 | The file opens in a window of its own, in front of the tree. A file that is already open is brought forward rather than opened twice. |
| 50 | |
| 51 | ## See a file that was made after you opened the tree |
| 52 | |
| 53 | The tree does not watch the disk. Press **`F5`** or **`Ctrl-R`** with the tree focused, and it re-reads the project — keeping open whatever you had open, and keeping the highlight on the same entry. |
| 54 | |
| 55 | Saving a file refreshes the tree for you, so a **File ▸ Save as** into a new name shows up without asking. A file created another way — `npm init` or `npm install` in a terminal window, or `git checkout` — needs the refresh key. |
| 56 | |
| 57 | ## Work with the tree and a file side by side |
| 58 | |
| 59 | The tree is an ordinary window, so all the window commands apply: |
| 60 | |
| 61 | - **Window ▸ Tile** puts the tree and your file side by side. |
| 62 | - Drag its bottom-right corner to make it narrower once you know your way around. |
| 63 | - `[x]` closes it; `F9` brings it back. |
| 64 | |
| 65 | ## Variants |
| 66 | |
| 67 | - **You started the editor from a subdirectory.** The tree is rooted there, showing only that part of the project. Start from the project's own directory instead — the same rule `.turbo-js/settings.toml` follows. |
| 68 | - **A directory shows as open but empty.** It could not be read, most often a permissions problem. The rest of the tree is unaffected; fix the permissions and press `F5`. |
| 69 | |
| 70 | ## See also |
| 71 | |
| 72 | - Every key and what the tree shows, exactly: [Project tree reference](../reference/project-tree.md) |
| 73 | - Why it is a window rather than a docked panel, and why it does not watch the disk: [Project tree](../explanation/project-tree.md) |
| 74 | - Colouring it: [Theme file format](../reference/themes.md) |