Ace-diff

About

This is a wrapper for Ace Editor to provide a 2-panel diffing/merging tool that visualizes differences in two documents and allows users to copy changes from one doc to the other. If you're a developer, you've seen it a billion times; this is one for Ace Editor.

It's built on top of google-diff-match-patch library, an algorithm for determining the diffs. That handles the hard part: the computation of the diffs. This lib converts that raw diff info into a visual representation on the screen for the user.

Click on the demos to the right to see how the script looks and operates. Then when you're ready, click the button below to go to github for the documentation and code.

Read doc on github

Demos

• Demo #1 - this is a full-page editor with all the default settings. The default editor content (a JSON document) is located in the page markup.
• Demo #2 - This demo passes the content to the AceDiff instance dynamically on page load, rather than rely on the content being in the target editor divs (e.g. for when the content is coming from the server). This makes the page load a lot smoother.
• Dark theme - shows off custom diff styles with a darker theme.