> For the complete documentation index, see [llms.txt](https://docs.flosum.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flosum.com/devops/new-ui-ux-transition/improved-code-viewer.md).

# Improved Code Viewer

## Overview

The Code Viewer has been updated for a more streamlined, powerful experience. Now, wherever code appears in DevOps, the Code Viewer delivers a unified, consistent experience across every tool. It offers two views, a single-component view and a diff view, that share the same design and flow.

Beyond navigation and comparison, the Code Viewer includes the standard editing and viewing features you expect from a modern code editor, such as syntax highlighting, auto-completion, bracket matching, auto-indentation, selection matching, and find-and-replace.

This article provides a detailed look at each view, including screenshots of the places where the Code Viewer is used in DevOps. For a general overview of all the new DevOps UI changes, see the following article.

* [What's New](/devops/new-ui-ux-transition/whats-new.md)

{% hint style="info" %}

#### One Consistent Experience

The Code Viewer now looks and behaves the same everywhere code appears in DevOps, so you only need to learn one interface.
{% endhint %}

## Single-Component View

The single-component view has a left sidebar for file navigation, letting you quickly switch between a component's files. For example, an **ApexClass** has a `cls` file and an `xml` file. You will find the single-component view in the following locations:

* **Organization** > **Component**

  <div align="left"><figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FYKkD72ed3VU475WdshKY%2FImprovedCodeViewer-Single-Branch.png?alt=media&amp;token=b6cf1ea7-7fc9-4102-9b87-ef917f9d3a10" alt="" width="563"><figcaption></figcaption></figure></div>
* **Branch** > **Component**

  <div align="left"><figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FXZCMKHxKKKsQac1ww0Et%2FImprovedCodeViewer-Single-Organization.png?alt=media&amp;token=8f6da681-e276-4308-b8d6-de3be42a0ceb" alt="" width="563"><figcaption></figcaption></figure></div>

## Diff View

With the new difference viewer, each affected component and its files are now displayed on a left sidebar menu, allowing you to easily switch between files and components while the code differences are displayed side by side for quick comparison.

The diff view compares two versions of the same code side by side and highlights exactly what changed by marking added, removed, and modified lines so you can review each change at a glance. Matching lines stay aligned across both panes, so you can trace any change to its surrounding context as you move through the file.

You will find the diff view in the following areas:

* **Pull Request** > **Components Changed**

  <div align="left"><figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F4w25lNYqXJ0Nk1yHCoO8%2FImprovedCodeViewer-Diff-PullRequests.png?alt=media&amp;token=616166c3-3bed-43d6-bba1-c07445363506" alt="" width="563"><figcaption></figcaption></figure></div>
* **Smart Merge** > **Review Changes**

  <div align="left"><figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F9pO5ogq9mvcPAuZfmzlS%2FImprovedCodeViewer-Diff-SmartMerge.png?alt=media&amp;token=5d9489fc-6700-4d2e-b3ad-7e4bb3c38c80" alt="" width="563"><figcaption></figcaption></figure></div>
* **Overwrite Protection** > **Resolve Conflicts**

  <div align="left"><figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F766uZiw8mIoCctPGycnj%2FImprovedCodeViewer-Diff-OverwritePotection.png?alt=media&amp;token=14dc6539-d8e4-4d51-b34b-bb04cdd4b418" alt="" width="563"><figcaption></figcaption></figure></div>
* **Branch** > **Commits**

  <div align="left"><figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FGbdC3wVPZtmgfZok28FG%2FImprovedCodeViewer-Diff-Commits.png?alt=media&amp;token=be6380f8-9eb2-4be9-a3cd-2c3fa2ca321c" alt="" width="563"><figcaption></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.flosum.com/devops/new-ui-ux-transition/improved-code-viewer.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.