https://github.com/skynet2/diff
Minimal two-panel semantic diff for JSON, YAML & XML — tree + text (Monaco) views, path-on-click, hide-same, dark theme. Built with Angular.
https://github.com/skynet2/diff
angular diff diff-viewer github-pages json json-diff monaco-editor semantic-diff typescript xml xml-diff yaml yaml-diff
Last synced: 6 days ago
JSON representation
Minimal two-panel semantic diff for JSON, YAML & XML — tree + text (Monaco) views, path-on-click, hide-same, dark theme. Built with Angular.
- Host: GitHub
- URL: https://github.com/skynet2/diff
- Owner: skynet2
- License: mit
- Created: 2026-06-03T19:50:37.000Z (22 days ago)
- Default Branch: main
- Last Pushed: 2026-06-03T21:17:41.000Z (22 days ago)
- Last Synced: 2026-06-03T23:03:43.058Z (22 days ago)
- Topics: angular, diff, diff-viewer, github-pages, json, json-diff, monaco-editor, semantic-diff, typescript, xml, xml-diff, yaml, yaml-diff
- Language: TypeScript
- Homepage: https://skynet2.github.io/diff/
- Size: 253 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# diff
A minimal, two-panel **semantic diff** editor for **JSON, YAML, and XML**, built with Angular.
**Live:** https://skynet2.github.io/diff/
## What it does
- **Two editors side by side**, each independently switchable between **Text** (Monaco) and **Tree** view.
- **Per-panel format**: JSON ⇄ YAML ⇄ XML. The two sides can even use different formats — the diff compares the parsed data, not the text.
- **Semantic diff** in tree mode: differences are computed structurally (key/path based, order-independent for object keys), then rendered as aligned rows with colour highlights — amber = changed, green = added, red = removed.
- **Navigation**: a difference counter with ▲▼ to jump between changes.
- **Hide same**: collapse the tree to only the differences.
- **Format**: pretty-print both documents.
- **Path on click**: click a node (tree) or place the cursor in the text — the status bar shows its path, e.g. `$.user.tags[1]` or `$.catalog.book[0]["@_id"]`.
- **Dark theme**, lockstep scrolling between panels, and a content-based "looks like YAML/XML — switch?" hint.
## How it works
The diff engine is pure and framework-free: each format is parsed into a plain JavaScript value (JSON natively, YAML via `js-yaml`, XML via `fast-xml-parser`), and a single structural diff/merge compares the two values. The UI is Angular standalone components with signals; Monaco powers text editing; cursor→path resolution uses `jsonc-parser` (JSON), `yaml` (YAML), and `@xml-tools` (XML).
## Development
```bash
npm install
npm start # dev server at http://localhost:4200/
npm test -- --watch=false # unit tests (Vitest)
npm run build # production build -> dist/diff-app/browser
```
## License
MIT