Tagline: Compare code, text, and JSON like a developer — fast, visual, and distraction-free.
DiffBoard is a modern, developer-friendly Chrome Extension that opens from the extension toolbar and helps you compare code, text, JSON, logs, and config files with a clean UI and powerful diff visualization.
Built for developers who frequently compare:
- API responses
- Code changes
- Config files
- JSON payloads
- Logs and text outputs
DiffBoard focuses on clarity, speed, and usability, without overwhelming you with unnecessary complexity.
-
Paste or drop files into the Original and Modified editors
-
Visual, GitHub-style diff output
-
Clear highlights for:
- ➕ Added lines
- ➖ Removed lines
- ✏️ Modified lines
-
Instant statistics:
- Lines added
- Lines removed
- Lines modified
-
Always visible above the diff results
- Copy left input or right input from editor panels
- Consolidated 📋 Copy... dropdown selection list:
- Copy Full Diff (View)
- Copy Unified Diff Patch (standard
.patchoutput) - Copy Added (+) Lines or Removed (-) Lines only
- Download comparison results as
diff.txtordiff.html - Instant toast alerts confirming copy success or errors
- Reusable format actions for
Format,Minify,Validate, andSort Keys (JSON) - Works with common text and code inputs, not just JSON payloads
- Ideal for API payloads, config files, and source snippets
- Drag and drop files directly onto either editor
- Supports common text, code, markup, config, and log file types
- Helpful for quick comparisons without manual copy and paste
- Find text inside the rendered diff with live match highlighting and counts
- Chevron navigation arrows (
Next/Prevmatch) that scroll matches centered into view - Toggle diff rendering views between Side-by-side and Unified (Line-by-line)
- Context toggles to show all lines or restrict viewport to changed sections
- Export comparison results as plain text or HTML for ticketing and sharing
- Ignore whitespace, case, and line-ending differences when comparing
- Restores left editor content after refresh
- Restores right editor content after refresh
- Restores the active Editors/Diff tab
- Keeps theme preference between sessions
DiffBoard supports syntax highlighting and formatting for a wide variety of development, configuration, and markup formats, including JavaScript, TypeScript, HTML, CSS, JSON, YAML, XML, Markdown, Python, Java, C/C++, C#, Shell scripts, and plain text.
Ctrl/Cmd + Enter→ CompareCtrl/Cmd + L→ ClearCtrl/Cmd + Shift + C→ Copy diffCtrl/Cmd + D→ Toggle themeCtrl/Cmd + J→ Apply selected format toolCtrl/Cmd + 1 / 2→ Switch between Editors and Diff tabs- Built-in shortcuts help modal available from the toolbar
Comparing...loading state during heavy diff rendering- Debounced compare flow to avoid repeated renders from rapid clicks
- Wrap toggles in both Editors and Diff views for long-line handling
- Clean light theme for readability
- Developer-friendly dark mode
- Theme preference persisted locally across sessions
- Input View – paste and edit content
- Diff View – focus on comparison results
- Clear inputs and diff results instantly
- Reset stats and UI state with one click
DiffBoard is designed with:
- Minimal distractions
- Clear visual hierarchy
- Keyboard-friendly layout
- Scrollable, non-clipping diff output
- No forced fullscreen — users stay in control
- Long-line resilience with optional wrapping and loading feedback
- HTML, CSS, JavaScript (Vanilla)
- jsdiff – diff engine
- Diff2Html – GitHub-style diff rendering
- Chrome Extensions API (Manifest V3)
- Modular utility-based architecture
-
Clone or Download this Repository
git clone https://github.com/Kartikpatkar/diff-board.git
-
Open Chrome Extensions Page
chrome://extensions/ -
Enable Developer Mode
- Toggle Developer mode (top-right)
-
Click “Load unpacked”
- Select the project root folder (contains
manifest.json)
- Select the project root folder (contains
-
Done 🎉
- Click the extension icon in Chrome to launch DiffBoard
✅ Works completely offline ✅ No login or external services required
✔ Side-by-side or Unified line-by-line diff toggling ✔ Drag-and-drop direct file import ✔ High-fidelity syntax highlighting using offline static libraries (Light/Dark themes) ✔ Non-destructive formatting, comment-stripping, and minifying using tokenizer state machines ✔ Dynamic stats panel (+ additions, - removals, ~ changes) ✔ Consolidated Copy selector (Full View, Patch, +, - lines) ✔ Downloadable diff exports in TXT and HTML formats ✔ Search inside rendered diffs with up/down chevron navigation and centered viewport scrolling ✔ Ignore whitespace, case, and line-ending comparison options ✔ Accidental reset protection (confirmation guard popups for clear events) ✔ Keyboard shortcuts and in-app shortcut modal panel ✔ Persistent configuration and last-session state recovery on refresh ✔ Optional wrap line toggles for text views and comparison cards
- 🧠 VS Code–style Compare View
- 🔗 Shareable diff export
- 📌 Save comparison history
- 💾 Remember recent comparisons
Contributions, bug reports, and feature suggestions are welcome!
- Fork the repository
- Create a feature branch
- Submit a pull request
Please keep changes modular and follow existing code structure.
Built by Kartik Patkar 🔗 GitHub • LinkedIn • Developer & Salesforce Consultant
This project is licensed under the MIT License — free to use, modify, and distribute.
DiffBoard — because comparing code should be simple, fast, and visual.