Developer Tools
What Does a Diff Look Like? Unified Diff Example Viewer
See what a code diff looks like, inspect a unified diff example, and learn how added, removed, and context lines are shown.
1
Files
1
Hunks
3
Added lines
1
Removed lines
3
Context lines
b/src/app.ts
--- a/src/app.ts · +++ b/src/app.ts
@@ -1,6 +1,8 @@
| 1 | 1 | export function total(items) { | |
| 2 | - | return items.length | |
| 2 | + | return items.reduce((sum, item) => { | |
| 3 | + | return sum + item.count | |
| 4 | + | }, 0) | |
| 3 | 5 | } | |
| 4 | 6 | console.log(total([{ count: 2 }])) |
Unified Diff Viewer online
Use Unified Diff Viewer in the browser for quick utility workflows. MKDiff keeps the page focused on practical input, preview, and review steps so you can finish a one-off task without installing a desktop utility.
How do you read a unified diff hunk?
The --- and +++ lines identify the old and new files. A header such as @@ -10,4 +10,5 @@ gives the old and new starting lines and line counts. Lines beginning with - were removed, lines beginning with + were added, and leading spaces mark unchanged context.
View .patch and .diff files in a structured browser UI.
Understand unified diff headers such as --- +++ and @@ hunk ranges.
Review added, removed, and context lines with old and new line numbers.