CodeDiff

English | 中文

---

🇬🇧 English

An elegant, pure frontend Git Diff tool that runs completely offline in your browser. Powered by Monaco Editor (the core engine behind VS Code) and React.

🤖 AI-Generated Project & Disclaimer
This project was entirely generated by AI coding assistants. While the code has been structured to function as described, it is provided "AS IS". Users are responsible for verifying the security, stability, and suitability of this software for their specific environments. The authors and AI providers assume no liability for any data loss, security breaches, or system issues resulting from its use.

🌐 Try It Online

You can try the web version directly here: https://hxl9654.github.io/codediff/

Features

• Pure Offline Capability: The entire app, including the heavy Monaco Editor, CSS, and fonts, is bundled into a single index.html file. Zero network requests required to run.
• VS Code-like Diffing: Character-level accurate code difference highlighting.
• Syntax Highlighting: Auto-detection for major languages (JS, TS, Python, JSON, Markdown, etc.).
• Drag and Drop: Simply drag two files from your desktop into the browser to compare them instantly.
• Smart Views: Toggle between Split (Side-by-Side) and Inline unified views.
• Markdown Rendering: Dedicated preview mode for markdown documents.
• Local Persistence: Your current code and settings are automatically saved to your browser's local storage.

How to Use the Offline Version

1. Locate the built file at dist/index.html.
2. Double click the file to open it in any modern web browser.
3. Done! No installation or servers required.

Development Setup

If you want to modify the source code or run the development server:

Prerequisites

• Node.js (v16+)
• npm

Installation

npm install

Running Locally

npm run dev

Running Tests

The project uses vitest and @testing-library/react for unit testing.

npm run test

Building the Single-File App

npm run build

This command compiles TypeScript, bundles all assets using Vite, and uses vite-plugin-singlefile to inline everything (including the Monaco web workers) into one standalone dist/index.html.

License

This project is licensed under the GNU Affero General Public License v3.0 (AGPLv3).

---

🇨🇳 中文

一个优雅的纯前端 Git Diff 对比工具，完全在您的浏览器中离线运行。基于 Monaco Editor（VS Code 核心引擎）和 React 构建。

🤖 AI 生成项目与免责声明
本项目由 AI 编程助手完全生成。尽管代码已经按照预期功能进行了结构化和编写，但按“原样”提供。用户在使用前应自行验证本软件在其特定环境下的安全性、稳定性和适用性。作者和 AI 提供方不对因使用本软件造成的任何数据丢失、安全漏洞或系统问题承担任何责任。

🌐 在线体验

您可以直接访问这里尝试网页版：https://hxl9654.github.io/codediff/

主要功能

• 纯离线能力：整个应用（包括体积庞大的 Monaco Editor、CSS 样式表以及全部语言解析 Worker）被安全且完整地打包进一个独立的 index.html 单文件中。运行时需要 0次 网络请求。
• VS Code 级差异对比：精准到字符级别的代码差异高亮显示。
• 智能语法高亮：自动识别并高亮主流编程语言（支持 JS, TS, Python, JSON, HTML, CSS, Markdown 等）。
• 拖拽支持：只需将桌面上的两个文件拖入浏览器，即可瞬间呈现差异对比。
• 智能视图切换：支持在分栏（左右并排）对比与内联（统一视图）对比间一键切换。
• Markdown 实时预览：专为 Markdown 文档提供独立且优美的渲染预览视图。
• 本地持久化：您编辑的代码与界面设置会自动保存至浏览器的本地存储，即使刷新页面也不会丢失。

离线版使用指南

1. 在项目目录中找到构建好的文件：dist/index.html。
2. 双击该文件，并在任意现代浏览器中打开。
3. 完成！无需安装任何环境或搭建服务器即可使用。

开发者指南

如果您希望修改源代码或在本地启动开发服务器：

环境要求

• Node.js (v16+)
• npm

安装依赖

npm install

本地运行

npm run dev

运行单元测试

本项目采用 vitest 和 @testing-library/react 组合进行组件单元测试。

npm run test

构建单文件应用

npm run build

该命令会自动编译 TypeScript，并通过 vite-plugin-singlefile 将所有资源（包括 Monaco Editor 的 Web Worker 引擎通过 Base64 编码内联）完全打包进一个独立、便携的 dist/index.html 文件中。

授权协议

本项目采用 GNU Affero General Public License v3.0 (AGPLv3) 授权协议开源。