https://github.com/vinayv-456/git_diff_viewer
A minimal React app to demo Monaco Editor's side-by-side diff viewer. Easily compare two texts with a clean UI.
https://github.com/vinayv-456/git_diff_viewer
diff git monaco-editor vscode
Last synced: 8 days ago
JSON representation
A minimal React app to demo Monaco Editor's side-by-side diff viewer. Easily compare two texts with a clean UI.
- Host: GitHub
- URL: https://github.com/vinayv-456/git_diff_viewer
- Owner: vinayv-456
- Created: 2025-07-21T18:21:25.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2025-07-21T18:54:49.000Z (12 months ago)
- Last Synced: 2025-08-21T08:39:21.480Z (11 months ago)
- Topics: diff, git, monaco-editor, vscode
- Language: TypeScript
- Homepage: https://vinayv-456.github.io/git_diff_viewer/
- Size: 101 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Monaco Diff Viewer Demo
A minimal React app to demo Monaco Editor's side-by-side diff viewer. Easily compare two texts with a clean UI.
## Features
- Monaco Editor diff viewer (side-by-side)
- Simple UI: two textareas for input, diff below
- Minimal, clean styling
- Deployable to GitHub Pages
## Getting Started
### Local Development
```bash
npm install
npm run dev
```
Visit [http://localhost:5173](http://localhost:5173) in your browser.
### Build for Production
```bash
npm run build
```
### Deploy to GitHub Pages
1. Commit your changes to your repo.
2. Run:
```bash
npm run deploy
```
This will build the app and push the `dist` folder to the `gh-pages` branch.
3. Set your repo's GitHub Pages source to the `gh-pages` branch.
## Notes
- The `base` in `vite.config.ts` and `homepage` in `package.json` are set for relative paths (required for gh-pages).
- You can change the default text in `src/App.tsx`.
---
MIT License