Live Diff is a sophisticated, real-time, and interactive web tool built for developers and AI enthusiasts who need to pinpoint differences between text or code instantly. Featuring high-granularity diffing and support for 20+ languages, it offers a premium experience for comparing AI outputs, code snippets, or any text content.
- ⚡ Real-time Diffing: Instant feedback as you type or paste—no lag, no waiting.
- 🌈 Smart Syntax Highlighting: Auto-detection or manual selection for 20+ languages including JS, TS, Python, TeX, and more.
- 🌓 Adaptive Themes: Beautifully crafted Light and Dark modes that respect your eyes and OS preferences.
- 📊 Live Insights: Word and character counts updated in real-time.
- 🛠️ Professional Layout:
- Split & Unified Views: Choose the best way to visualize changes with the click of a button or shortcut.
- Resizable Workspace: Adjust the editor and diff preview heights to fit your flow.
- Fullscreen Diff: Focus entirely on the changes with a distraction-free mode.
- ⌨️ Keyboard First: Powerful shortcuts for every common action.
- 💾 Persistent Workspace: Your settings (themes, heights, preferences) are automatically saved via LocalStorage.
| Tech | Description |
|---|---|
| React 19 | The foundation for a reactive and performant UI. |
| TypeScript | Ensuring rock-solid type safety throughout the app. |
| Vite 7 | Ultra-fast build and development experience. |
| Tailwind CSS 4 | Modern styling for a sleek, responsive interface. |
| Monaco Editor | The power of VS Code's editor right in your browser. |
- Node.js (v18 or later)
- npm
-
Clone the repository
git clone https://github.com/yhzhu99/live-diff.git cd live-diff -
Install dependencies
npm install
-
Launch the development server
npm run dev
-
Enjoy Open your browser to http://localhost:3000 and start comparing!
| Shortcut | Action |
|---|---|
Cmd/Ctrl + S |
Swap original and modified content |
Cmd/Ctrl + E |
Clear all content |
Cmd/Ctrl + F |
Toggle Fullscreen Mode |
Cmd/Ctrl + U |
Toggle Unified/Side-by-Side view |
- Input: Paste your original content on the left and modified content on the right.
- Configure: Use the Language selector or let the Auto-detect ✨ feature handle it.
- Compare: View highlights in the Diff Preview. Use Unified View for long documents.
- Export: Copy the modified content with a single click.
Distributed under the MIT License. See LICENSE for more information.
Built with ❤️ by the Live Diff team.