WebStorm 2024.1 Help

Diff Viewer for files

This Diff Viewer is displayed when you compare two files or two versions of a file (local changes or changes between local files and their revisions in a remote repository). You can compare files of any types, including binaries and .jar files. To open it, select two files to compare or a file to compare its versions and press Ctrl+D. The Diff Viewer will be opened in a new tab.

The Diff Viewer provides a powerful editor that enables code completion, live templates, and other features.

The changes that you apply in the Diff Viewer are automatically applied to the files. You can view the changes in the files at any time while working with the Diff Viewer and after closing it.

Diff & Merge viewer


Tooltip and Shortcut


the Previous Difference button/the Next Difference button

Previous Difference / Next Difference Shift+F7 F7

Jump to the next or previous difference.

When the last or the first difference is reached, WebStorm suggests clicking the arrow buttons or pressing F7/Shift+F7 once more and comparing other files modified locally. This behavior depends on the Go to the next file after reaching last change option in the Diff Viewer settings.

the Compare Previous File icon

the Compare Next File icon

Compare Previous/Next File


Compare the local copy of the previous or next file with its update from the server.

the Go To Changed File icon

Go To Changed File Ctrl+N

Display all changed files in the current change set and navigate to them. This action is only available when you review changes to multiple files.

the Jump to Source button

Jump to Source


Open the selected file in the editor. The caret is placed in the same position as in the Diff Viewer.


Select a viewer mode: side-by-side or unified. The side-by-side mode has two panels, and the unified mode has one panel.

You can edit code and perform the Accept, Append, Revert actions in both viewers.

You can change text only in the right-hand part of the side-by-side viewer or in the lower line in the unified viewer.

You can edit only local versions of your files. You cannot edit files that have read-only status.


Define how the Diff Viewer should treat whitespaces.

  • Do not ignore: white spaces are important, and all the differences are highlighted. This option is selected by default.

  • Trim whitespaces: trim whitespaces if they appear in the end and at the beginning of a line (("\t", " ")).

    • If two lines differ in trailing whitespaces only, these lines are considered equal.

    • If two lines are different, trailing whitespaces are not highlighted in the By word mode.

  • Ignore whitespaces: white spaces are not important, regardless of their location in the source code.

  • Ignore whitespaces and empty lines: ignores whitespaces and empty lines. The following entities are ignored:

    • all whitespaces (as in the 'Ignore whitespaces' option)

    • all added or removed lines consisting of whitespaces only

    • all changes consisting of splitting or joining lines without changes to non-whitespace parts.

      For example, differences between a b c and a \n b c are not highlighted in this mode.

Highlighting mode

Select the way differences granularity is highlighted.

The available options are:

  • Highlight words: modified words are highlighted

  • Highlight lines: modified lines are highlighted

  • Highlight split changes: if this option is selected, big changes are split into smaller changes.

    For example, A \n B and A X \n B X are treated as two changes instead of one.

  • Highlight characters: modified symbols are highlighted

  • Do not highlight: if this option is selected, the differences are not highlighted at all.

    Use the Do not highlight option when you work with the files that were significantly modified. In such cases, highlighting might introduce additional difficulties during a review.

the Collapse Unchanged Fragments icon

Collapse Unchanged Fragments

Collapse all the unchanged fragments in both files. The amount of non-collapsible unchanged lines is configurable on the Diff & Merge settings page. To open the Diff & Merge page, open settings by pressing Ctrl+Alt+S and navigate to Tools | Diff & Merge. .

the Synchronize button

Synchronize Scrolling

Click this button to scroll both differences panes simultaneously. If this button is released, each of the panes can be scrolled independently.

the Settings button


Open a list of available settings.

These commands are also available from the context menu of the Diff Viewer gutter.

the Swap Sides button

Swap Sides

Click this button to swap the sides in the Diff Viewer. This action is available when you are comparing two files, a file with the Clipboard contents, or when you open a blank Diff Viewer and paste the contents you want to compare. For more information, refer to Compare files, folders, and text sources.

Include into commit Alt+I

This checkbox only appears if you invoke the Diff Viewer from the Commit Changes dialog with multiple changed files (all of which are deselected), and you explore the differences between them and hit the last difference in a file.

Select this checkbox if you want to include the file you've reviewed into the commit.

the Help icon



Open a browser and show the corresponding help page.


Switch between the panes of the Diff Viewer. The active pane has the caret.

apply left apply right


Apply differences between panes (in case of the side-by-side viewer) or between lines (in case of the unified viewer).

The chevron buttons can change their behavior:

  • Click apply left and apply right to apply changes. This behavior is the default one.

  • Press Ctrl to change apply left or apply right to chevron button bottom right or chevron button bottom left and append changes.

Merge actions

the Compare Contents icon

Compare Contents

Click this icon to invoke the list of options allowing you to compare different versions of a file to resolve a conflict.

Note that Base refers to the file version that the local and the repository versions originated from (initially displayed in the middle pane), while Middle refers to the resulting version.

the Apply Non-Conflicting Changes button

Apply All Non-Conflicting Changes

Click this button to apply all non-conflicting changes. You can also make this behavior automatic, by selecting the checkbox Automatically apply non-conflicting changes in the Diff & Merge page of the Settings dialog.

Apply Non-Conflicting Changes from the Left Side Apply Non-Conflicting Changes from the Right Side

Apply Non-Conflicting Changes from the Left/Right Side

Click these buttons to merge non-conflicting changes from the left/right parts of the dialog.

the Resolve Simple Conflicts icon

Resolve Simple Conflicts

Click this button to resolve simple conflicts (for example, if an extra line has been added in one of the revisions) and merging the changes.

Such conflicts are not resolved with the Apply non-conflicting changes actions since you must make sure that they are resolved properly.

Annotate with GitBlame

This option is only available from the context menu of the gutter.

Use this option to explore who introduced which changes to the repository version of the file and when. The annotations view lets you see detailed information for each line of code, such as the version from which this line originated, the ID of the user who committed this line, and the commit date.

For more information about annotations, refer to Locate code author (Annotate with Git Blame).

Keyboard shortcuts

Keyboard shortcut


Use this keyboard shortcut to show the popup menu of the most commonly used diff commands.


Use this keyboard shortcut to switch between the left and the right panes.


Use this keyboard shortcut to undo/redo a merge operation. Conflicts will be kept in sync with the text.

Context menu commands

This context menu is available in the middle of the editor:




Enable this option to annotate the changes.

Show Whitespaces

Enable this option to show whitespaces as the dots in the Diff Viewer.

Show Line Numbers

Enable this option to show line numbers in the Diff Viewer.

Show Indent Guides

Enable this option to have WebStorm display vertical lines in the Diff Viewer to indicate positions of indents.

Use Soft Wraps

Enable this option to have WebStorm wrap the lines of code, when the dialog is resized.

Highlighting level

Use this menu item to select the highlighting level in the Diff Viewer. To learn more about the level of highlighting, refer to Change the highlighting level for a file.

This context menu is available in both editors:




Enable this option to annotate the changes.


Select these commands to accept or append the lines shown in the Diff Viewer.

Compare with Clipboard

Select this command to compare the file in the respective pane of the Diff Viewer with the contents of the Clipboard.

Switch to Three-Side Viewer

This option is available only when you are comparing two files against each other. It allows you to load a third file and add it to the comparison.

This context menu is available in the right-hand panel of the Diff Viewer:



Go to high-priority problems only/Go to next problem

Click one of these radio-buttons to define the way of navigating between the encountered problems.

Customize highlighting level

Click to show the slider to change the highlighting level in the Diff Viewer.

Show code lens on scrollbar hover

Enables viewing code outside the visible area of the Diff Viewer when hovering over the scrollbar.

Last modified: 22 February 2024