Navigating files with the new code view (beta)

About the new code view (beta)

The new code view beta improves navigation with a file tree view, simplifies file editing, introduces a symbols pane for symbol search and navigation, and updates the blame view to maintain file context. The new code view is integrated with a new code search engine and search interface in a public beta on GitHub.com. For more information on the new code search, see "About GitHub Code Search (beta)."

To provide feedback on the new code view beta, see the discussion forum.

Enabling and disabling the new code search and code view (beta)

You can disable or enable the beta on GitHub.com anytime. Note that this setting applies to both the code search and the code view.

1. In the upper-right corner of any page, click your profile photo, then click Feature preview.
2. To the right of "New Code Search and Code View (Beta)", click Enable or Disable.

Using the file tree view

The new file tree view is a panel that displays a repository's directories and files within an easily navigable tree. You can move between directories and files quickly and understand the context for each item you view.

1. Select a repository, then click a directory or file within that repository to open the file tree view.

2. To search for a specific directory or file, in the file tree view, click the Jump to file search bar, then type the directory or file name and select the directory or file from the results. You can view the file path for a directory or file below each search result.

   

   • To search within the repository using the GitHub search bar, click in the file tree view.

3. To switch between branches, select the branch dropdown menu, then click the desired branch from the results. To view all branches for a repository, click View all branches.

   

4. To switch between tags, select the branch dropdown menu, click the Tags tab, then click the desired tag from the results. To view all tags for a repository, click View all tags.

   

Working with files

The new code view also includes updates to the ways in which you work with files. Existing functionality like editing a file, creating or uploading a file, and deleting a file or directory has been streamlined. You now have quick access to editing a file in github.dev or GitHub Desktop and an integrated search-in-file function.

1. Select a repository, then click a file within that repository to open the new code view.

2. To edit a file in the integrated file editor, click .

3. To edit a file on the github.dev web-based editor or GitHub Desktop, select next to , then click either github.dev or GitHub Desktop.

   Note: The github.dev editor is currently in beta preview. You can provide feedback in our discussions.

4. To find specific characters within a file, view the raw code of the file by clicking the Code button. Next, press Command+F (Mac) or Ctrl+F (Windows/Linux) and type the characters you want to find. You can navigate between results by pressing Return (Mac) or Enter (Windows/Linux), or by clicking and .

   Note: To use your browser's default find function, press Command+F (Mac) or Ctrl+F (Windows/Linux) twice. Be aware that your browser's default find function will not be able to search the entirety of a large file, while the search integrated in the new code view will.

5. To create a new file in a specific directory, navigate to the chosen directory. Next, select the Add file dropdown menu, then click Create new file.

   Alternatively, you can click in the file tree view.

6. To delete a directory or file, navigate to the directory or file and click . Then, click Delete directory or Delete file.

7. To upload a file, navigate to the chosen directory. Next, select the Add file dropdown menu, then click Upload files.

   Alternatively, you can drag and drop files into your browser.

Using the symbols pane

You can now quickly view and navigate between symbols such as functions or classes in your code with the symbols pane. You can search for a symbol in a single file, in all files in a repository, or even in all public repositories on GitHub.

Symbol search is a feature of the new code search (beta). For more information, see "Understanding GitHub Code Search (beta) syntax."

1. Select a repository, then navigate to a file containing symbols.

2. To bring up the symbols pane, above the file content, click .

   Alternatively, you can open the symbols pane by clicking an eligible symbol in your file. Clickable symbols are highlighted in yellow when you hover over them.

3. Click the symbol you would like to find from the symbols pane or within the file itself.

   • To search for a symbol in the repository as a whole, in the symbols pane, click Search for this symbol in this repository. To search for a symbol in all repositories on GitHub, click all repositories.

4. To navigate between references to a symbol, click or .

5. To navigate to a specific reference to a symbol, click a result of the symbol search under In this file.

6. To exit the search for a specific symbol, click All Symbols.

Using the blame view

Rather than losing file context when you enter the blame view, you can now use the new code view to quickly toggle between the blame view, the raw code view, and the preview for a file (depending on the file type).

1. Select a repository, then click a file within that repository to open the new code view.

2. To see the revision history of the file, above the file content, click Blame. This view gives you a line-by-line revision history, with the code in a file separated by commit. Each commit lists the author, commit description, and commit date.

   • To see versions of a file before a particular commit, click . Alternatively, to see more detail about a particular commit, click the commit message.

3. To return to the raw code view, above the file content, click Code.

   • If you are viewing a Markdown file, above the file content, you can also click Preview to return to the view with Markdown formatting applied.

Further reading

• "Moving a file to a new location"
• "About GitHub Code Search (beta)"