Skip to main content

Navigating files with the new code view (beta)

With the new code view (beta), you can view your code in context with an easily navigable file tree and integrated symbol search.

Note: The new code search and code view are in limited public beta. To join the waitlist for access, visit https://github.com/features/code-search-code-view/signup.

For more information on the new code search, see "About GitHub Code Search (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 limited public beta on GitHub.com. For more information on the new code search, see "About GitHub Code Search (beta)."

To get access to the new code view (beta), along with the new code search, you can sign up for the waitlist.

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 will receive an email when you are accepted from the waitlist to join the beta. Once given access, the new code search and code view beta will be automatically enabled on your account.

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. Feature preview button
  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.

    Screenshot of the "github/docs" repository with emphasis on the file tree view

  2. To search for a specific directory or file, 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.

    Screenshot of the file tree view with emphasis on the "Jump to file" search bar

    • To search within the repository using the GitHub search bar, click .

      Screenshot of the file tree view with emphasis on the search icon

  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.

    Screenshot of the file tree view with emphasis on the "Branches" tab of the branch dropdown menu

  4. To switch between tags, select 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.

    Screenshot of the file tree view with emphasis on the "Tags" tab of the branch dropdown menu

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.

    Screenshot of the "github/docs" repository with emphasis on a selected file in the file tree view

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

    Screenshot of the file editor in the new code view with emphasis on the edit icon

  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 web-based editor is currently in beta preview. You can provide feedback in our discussions.

    Screenshot of the file editor in the new code view with emphasis on the edit dropdown menu

  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.

    Screenshot of the "Find in file" function in the new code view

  5. To add a new file to a specific directory, click that directory, then click New file, or click the in the file tree view.

    Screenshot of the file tree view with emphasis on the plus icon

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

    Screenshot of the options menu in the new code view with emphasis on the "Delete directory" option

  7. To upload a file, navigate to the chosen directory, then click Upload files or drag and drop the file into your browser.

    Screenshot of the "Upload files" button in the new code view

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, click .

    Screenshot of the symbols pane icon in the new code view

    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.

    Screenshot of a file in the new code view with emphasis on a clickable symbol

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

    Screenshot of the symbols pane with emphasis on an auto-populated symbol

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

      Screenshot of the symbols pane with emphasis on the options to broaden the scope of the search for a symbol

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

    Screenshot of the symbols pane with emphasis on the search navigation chevrons

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

    Screenshot of the symbols pane with emphasis on a result of the symbol search

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

    Screenshot of the symbols pane with emphasis on the "All Symbols" button

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.

    Screenshot of the "github/docs" repository with emphasis on a selected file in the file tree view

  2. To see the revision history of the file, 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.

    Screenshot of the new code view with emphasis on the "Blame" button

    • To see versions of a file before a particular commit, click .

      Screenshot of a commit in the blame view with emphasis on the versions icon

    • To see more detail about particular commits, click the commit description.

      Screenshot of a commit in the blame view with emphasis on the commit description

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

    Screenshot of the code view toolbar with emphasis on the code view button

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

      Screenshot of the code view toolbar with emphasis on the Markdown preview button

Further reading