VisualEditor/Diffs

Since 2017, VisualEditor provides  (visual difference displays). These are available in two places in the interface: when previewing changes to the document before the user saves the page, and (as a 2>Special:MyLanguage/Beta Features|beta feature) within the standard MediaWiki diff display, accessed from the history page. In both cases, the visual diff shows up alongside the diff>Special:MyLanguage/Help:Diff|traditional two-column wikitext diff, and the user can toggle between the two displays.

Visual diffs have two main advantages over wikitext diffs. The first is that editors can directly see the changes they and others have made without needing to understand wikitext>Special:MyLanguage/wikitext|wikitext. This is particularly helpful when looking at changes to graphical structures such as tables; for example, if an edit deletes a column from a table, the wikitext diff for it would be hard to understand, while the visual diff would be immediately obvious.

The second is that the technology can be used to more accurately represent the change to the reader. For example, if an edit swapped two paragraphs (with or without changes to the paragraphs), the visual diff will identify that this is what occurred, while a wikitext diff makes it appear that a paragraph was deleted and an entirely new paragraph was added.

On regular diff pages
Most of the examples and screenshots below are about using visual diffs during page previews when editing. However, VisualEditor's visual diffs can also be used on regular diff pages, on any wiki that has VisualEditor installed. You can see an example of it in use on the English-language Wikipedia here.

For wikis that have VisualEditor, there are several ways to activate this visual diff display:


 * Add the following to LocalSettings.php:
 * If your wiki has a "Beta features" tab within Special:Preferences, and you want to make visual diffs an "opt-in" feature for users, you can add the following to LocalSettings.php:
 * As seen in the Wikipedia example linked above, the visual diff mode can also be activated by simply adding "&visualdiff" to the URL of a diff page.

How it works
[[File:VisualEditor_visual_diff_tool_-_visual_diff.png|alt= Screenshot showing some changes to an article. Most changes are highlighted with text formatting. |left|thumb|300px| When you are finished editing the page, type your edit summary and then choose "".

In visual mode, you will see additions, removals, new links, and formatting highlighted. Other changes, such as changing the size of an image, are described in notes on the side. ]]





Technology used



 * Google Diff, Match and Patch
 * TreeDiffer.js

Current limitations

 * No notices for changes to "invisible", such as categories or TOC keywords.
 * Has issues with complex changes to tables.
 * Unavailable on certain special pages:
 * Undo "diff" pages.
 * Edit conflict pages

History
This feature has been available as the first diff tool in the desktop VisualEditor from the 1.31.0-wmf-20 branch onwards (released to Wikimedia production on 6 February 2018). Before that, it was a secondary tool from the 1.29.0-wmf-17 branch onwards (released to Wikimedia production on 21 March 2017).