DOM Diff & Compare
Paste two DOM trees to see highlighted line-by-line differences, a change summary, and a similarity percentage. Everything is processed on your device.
Everything runs in your browser. Your data is never sent to our servers.
Example
Example Input
two DOM fragments
Example Output
changed nodes/attributes
How to Use
- 1Paste the first DOM trees (A) in the left box and the second (B) in the right box.
- 2Adjust the options if needed (ignore case, whitespace, or empty lines).
- 3Click Compare (or press Ctrl+Enter).
- 4See the highlighted differences, a summary of how many changes there are, and the similarity percentage. Switch between side-by-side / unified / inline views.
About DOM Diff & Compare
DOM Diff & Compare parses two HTML/XML documents into element trees and compares their structure, attributes, and content. Unlike a text diff, whitespace or attribute-order differences that do not change meaning are not counted.
Each change is shown with its element path, making it easy to find which node changed.
FAQ
What is the difference between "diff" and "compare"?
Both are done by the same tool. "Diff" highlights the lines/parts that changed (added/removed), while "compare" shows how similar the two inputs are (similarity percentage + summary). You get both at once here.
Is my data sent to a server?
No. The entire comparison is computed in your browser with JavaScript. Nothing is uploaded, logged, or stored on our servers — safe for sensitive data.