DevTools Surf logoDevTools Surf
AI / Modern DevAnimation / CSSAPI / Config
Sign in
DevTools Surf logoDevTools Surf
AI / Modern DevAnimation / CSSAPI / Config
Sign in
HomeDeveloper UtilitiesGit Diff → HTML

Example: Git Diff → HTML

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input
diff --git a/src/app.ts b/src/app.ts
index abc1234..def5678 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,5 +1,7 @@
 import express from 'express';
+import cors from 'cors';
 
 const app = express();
+app.use(cors());
 app.use(express.json());
-app.listen(3000);
+app.listen(process.env.PORT || 3000);
Output
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Diff — 1 file changed</title>
<style>
:root{--bg:#ffffff;--fg:#1f2328;--muted:#656d76;--line:#d8dee4;--panel:#f6f8fa;--add:#e6ffec;--addb:#abf2bc;--del:#ffebe9;--delb:#ffc1c0;--meta:#ddf4ff;--metafg:#0550ae;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0d1117;--fg:#e6edf3;--muted:#8b949e;--line:#30363d;--panel:#161b22;--add:#12261e;--addb:#1f6f3f;--del:#25171c;--delb:#8b2c31;--meta:#121d2f;--metafg:#4493f8}}
*{box-sizing:border-box}
body{margin:0;padding:24px;background:var(--bg);color:var(--fg);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
h1{font-size:18px;margin:0 0 4px}
.sum{color:var(--muted);font-size:13px;margin-bottom:16px}
.sum b.a{color:#1a7f37}.sum b.d{color:#cf222e}
.stat{border:1px solid var(--line);border-radius:6px;margin-bottom:16px;width:100%;border-collapse:collapse;font-size:12px}
.stat td{padding:4px 10px;border-bottom:1px solid var(--line)}
.stat tr:last-child td{border-bottom:0}
.stat .bar{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-1px}
.stat .bar i{font-style:normal;color:#1a7f37}.stat .bar u{text-decoration:none;color:#cf222e}
section{border:1px solid var(--line);border-radius:6px;margin-bottom:16px;overflow:hidden}
section>header{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--panel);border-bottom:1px solid var(--line);padding:8px 12px}
header .path{font-family:ui-m
…

About Git Diff → HTML

Git Diff → HTML preview - Developer Utilities tool

Convert unified git diff output to syntax-highlighted HTML. Part of the DevTools Surf developer suite. Browse more tools in the Developer Utilities collection.

Use Cases

  • Embed highlighted diffs in technical blog posts
  • Create code review reports for compliance documentation
  • Generate visual changelogs for release notes pages
  • Include diff visualizations in presentation slides

Tips

  • Paste a unified diff to generate syntax-highlighted HTML
  • Use the output in code review documentation or blog posts
  • Customize the color scheme to match your site theme

Fun Facts

  • The unified diff format uses '+' for additions and '-' for deletions, with @@ hunk headers showing line number ranges from both files.
  • GitHub renders over 2 billion diffs per day across pull requests, issues, and commit views.
  • The first syntax-highlighting diff tool was likely xxdiff, created by Martin Blais in 2001, which offered a three-way visual merge.

FAQ

What gets highlighted?
Added lines (green), removed lines (red), unchanged context (gray), and file headers. Matches the GitHub PR view.
Does it do syntax highlighting?
Yes — the file extension determines the language. JS, TS, Python, Go, Rust, SQL all get proper highlighting inside the diff.
Can I embed in a blog post?
Yes — copy the HTML. Inline CSS styles; no external stylesheets needed. Pastes directly into any HTML document.
Word-level diff?
Optional — toggle 'word-level highlight' for within-line word changes. Useful for typo fixes vs full rewrites.

Related Developer Utilities Tools

Collection JSON → cURLRegex VisualizerMakefile ExplainerShell Script LinterGitHub Actions VisualizerHAR File ViewerAPI Response MockerGraphQL Query Builder
New · Flagshipsimple REST client

REST Handler — Collections, env vars, history, cURL converter

Send requests, save collections (nested), swap environments, and convert between cURL / Collection JSON / REST Handler YAML.

Open

Popular tools

The most-used tools on DevToolsSurf, one click away.

Encoding & crypto

  • Base64 Encode
  • Base64 Decode
  • URL Encoder
  • URL Decoder
  • Hash Generator
  • JWT Decoder
  • JWT Encoder
  • UUID Generator
  • ULID Generator
  • Password Generator
  • Bcrypt Hash Tester

Converters

  • CSV to JSON
  • JSON to CSV
  • XML to JSON
  • JSON to XML
  • HTML → Markdown
  • HTML → React JSX
  • cURL to Code
  • Collection JSON → cURL
  • Swagger to Collection JSON
  • JSON → Go Struct
  • JSON → TypeScript Types

JSON & YAML

  • JSON Formatter
  • JSON Validator
  • JSON Viewer
  • JSON Minifier
  • JSON Diff
  • JSONPath Tester
  • YAML Formatter
  • YAML to JSON
  • JSON to YAML

Text & regex

  • Regex Tester
  • Text Diff
  • Case Converter
  • Word Counter
  • Markdown Preview
  • Slug Generator
  • Lorem Ipsum Generator
  • Markdown → PDF

CSS & color

  • CSS Beautifier
  • Minify CSS
  • Color Converter
  • Gradient Generator
  • Contrast Checker
  • Color Palette Generator
  • Flexbox Playground
  • Tailwind → CSS

Generators

  • QR Code Generator
  • Mock Data Generator
  • Favicon Generator
  • .gitignore Builder
  • README.md Generator
  • Dockerfile Generator
  • Sitemap Generator

API & networking

  • REST Handler
  • HTTP Header Analyzer
  • IP Address Lookup
  • CIDR Calculator
  • User-Agent Parser
  • HTTP Status Reference
  • OpenAPI Viewer

Date & time

  • Timestamp Converter
  • Timezone Converter
  • Cron Expression Parser
  • Duration Calculator
  • Age Calculator
  • Date Format Converter

Images

  • Image Converter
  • Image Resizer (Batch)
  • SVG Optimizer
  • Base64 ↔ Image
  • WebP ↔ AVIF Converter
  • Image Compressor

PDF tools

  • PDF Merger
  • PDF Splitter
  • PDF Compressor
  • Markdown → PDF
  • EPUB → PDF
  • MOBI / AZW → PDF
  • DOCX → PDF
  • HTML → PDF

Resources

  • Community feed
  • Themes marketplace
  • Pricing & credits
  • Privacy policy
  • Terms of service
  • Sitemap
  • robots.txt

Your account

  • Sign in
  • Dashboard
  • Run history
  • My profile
  • Settings
DevTools Surf logo
DevTools Surf919+ tools

Fast · privacy-first · client-side · © 2026

Home·Feed·ThemesPricing·Sign inPrivacy·Sitemap Feedback