> For the complete documentation index, see [llms.txt](https://docs.arkain.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.arkain.io/user-guide/workspace/source-code-management-with-git/diff.md).

# Diff

## How to use Diff <a href="#how-to-use-diff" id="how-to-use-diff"></a>

Clicking a file in the Unstaged files or Staged files list in the Git Sidebar will open the Diff tool. You can view the changes in the source code in the editor.

<figure><img src="/files/lHZsxsPBpBtQdvskuLdl" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note**\
If you open the **\[Git]** tab and there is only a **\[Register repository]** button, you need to connect the repository first. See how to connect on [Import Github Repos](/user-guide/dashboard/container/container-management/import-github-repos.md) page.
{% endhint %}

### **The editor area**

<figure><img src="/files/K4CGTcvAqXrMdtkv4f2t" alt=""><figcaption></figcaption></figure>

You can compare the source code **before the change (left)** and the source code **after the change (right)**.

In the pre-change source code, **lines of code that were deleted are&#x20;**<mark style="color:red;">**highlighted in red**</mark> and marked with a '-' next to the line number. The after-change source code shows the **lines of code that were added with a&#x20;**<mark style="color:green;">**green highlight**</mark> and a '+' next to the line number.&#x20;

Also, the code that was actually changed is highlighted darker.

{% hint style="info" %}
**The status of the file determines which source code is compared.**

If you open the Diff Tool from a file that is ‘**off-stage’**, the source code before the change is the source code as of the last commit, and the source code after the change is the source code you are currently working on.

If you open the Diff Tool from a ‘staged file’, the pre-change source code is the source code at the last commit and the post-change source code is the source code at the time it was added to the stage, and modifying the source file does not modify the source code in the Diff Tool.

You can tell which status of the Diff Tool was opened in by looking at the Editor tab. Diff tool opened from `Files Removed from Stage` are named with the original filename followed by *(Working Tree)*, Diff tool opened from `Files Added to Stage` will have the original filename followed by *(Index)*.
{% endhint %}

<figure><img src="/files/Zxw4fEb5XTYqXR46AtWZ" alt=""><figcaption></figcaption></figure>

### **The button area**

The buttons area in the top right corner of the screen provides 4 functions.

<figure><img src="/files/SCUjKXeqfngNxkVvbYdT" alt=""><figcaption></figcaption></figure>

* **Open file**\
  Opens the Diff Tool's source file editor for the file you are currently viewing.
* **Previous change, Next change**\
  Moves the cursor to the previous, next change of the current cursor in the source code area after a change.
* **Toggle collapse unchanged regions**\
  Unchanged source code areas are hidden. If the unchanged source code area is small, it may not be hidden. Click the button one more time to see the full source code again.
* **Change the way the editor area is viewed**\
  You can change the placement of the source code before changes and the source code after changes. Click the `Split` button to change to a left-to-right orientation, or the `Inline` button to change to a top-to-bottom orientation.

### Editing in the Diff Tool

When the Diff Tool is opened from an unstaged (Working Tree) file, you can directly edit the source code in the after-change (right) panel.

Edits made in the Diff Tool are reflected in the original file in real time, and the file can be saved with the standard save shortcut (<kbd>Ctrl</kbd>+<kbd>S</kbd> / <kbd>Cmd</kbd>+<kbd>S</kbd>). The unsaved state is synchronized with the original file's editor tab.

{% hint style="warning" %}
**Note**

* Editing is only available for **Working Tree** diffs. Staged file diffs *(Index)* remain read-only.
* If the file size exceeds the allowed limit, editing will be disabled.
  {% endhint %}

#### Reverting changes by chunk

Each changed chunk in the diff has a revert button in the gutter (to the left of the line numbers).

Clicking it reverts only that chunk back to the last commit state, without affecting other changes in the file. This is available in both Split and Inline view modes.