Semantic Diff

A VS Code–style developer tool for comparing text and code semantically using ChatGPT.

Features

• Side-by-side Monaco Editors with automatic language detection
• Semantic comparison powered by ChatGPT (ignores formatting, whitespace, key ordering)
• Local formatting for JSON and XML
• Impact-based categorization of differences (low, medium, high)
• VS Code-like dark theme UI
• Fully static - deployable to GitHub Pages

Tech Stack

• React 19 + TypeScript
• Vite
• Monaco Editor (@monaco-editor/react)
• Radix UI (Tabs, ScrollArea, Tooltip)

Local Development

npm install
npm run dev

Build

export VITE_OPENAI_API_KEY="your-openai-api-key"
npm run build

GitHub Pages Deployment

# Set environment variables
export VITE_OPENAI_API_KEY="your-openai-api-key"
export GITHUB_PAGES_BASE="/your-repo-name/"

# Build and deploy
npm run build
# Push dist/ to gh-pages branch

Architecture

src/
├── components/
│   ├── Editor.tsx         # Monaco Editor wrapper
│   ├── ResultPanel.tsx    # Comparison results with tabs
│   └── DifferenceCard.tsx # Individual difference display
├── utils/
│   ├── detectLanguage.ts  # Content type detection
│   ├── formatters.ts      # JSON/XML formatters
│   └── chatgpt.ts         # OpenAI API integration
├── types.ts               # TypeScript types
├── App.tsx                # Main component
└── App.css                # Styles