promptdiff

Visual diff tool for prompt engineering. Compare prompt versions, track iterations, and catch every change.

Features

• Real-time diff — character-level and word-level diffs computed as you type
• Three view modes — inline, side-by-side, and unified diff views
• Token counting — accurate token counts using cl100k_base encoding
• Variable detection — automatically highlights {{variables}} and {variables} in your prompts
• Similarity scoring — see how much your prompts overlap at a glance
• History — save and browse previous prompt iterations (stored in localStorage)
• Share — encode any diff comparison into a shareable URL
• Presets — built-in examples to get started quickly
• Keyboard shortcuts — Cmd+D to cycle through diff modes
• Swap — instantly swap Version A and B

Getting Started

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

# Start the production server
npm start

Open http://localhost:3000 to start comparing prompts.

Tech Stack

• Next.js 14 — App Router with React Server Components
• TypeScript — strict mode enabled
• Tailwind CSS — utility-first styling with dark theme
• diff — Myers diff algorithm for text comparison
• js-tiktoken — token counting with cl100k_base encoding

Project Structure

src/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main page with state management
│   └── globals.css         # Tailwind + custom styles
├── components/
│   ├── prompt-editor.tsx   # Text area with line numbers
│   ├── diff-view.tsx       # Diff visualization controller
│   ├── inline-diff.tsx     # Inline diff renderer
│   ├── split-diff.tsx      # Side-by-side diff renderer
│   ├── unified-diff.tsx    # Unified diff renderer
│   ├── stats-panel.tsx     # Token counts, similarity, changes
│   ├── variable-list.tsx   # Extracted variables display
│   ├── history-panel.tsx   # localStorage history browser
│   └── mode-toggle.tsx     # Diff mode selector
└── lib/
    ├── diff-engine.ts      # Wrapper around diff library
    ├── variables.ts        # Variable extraction logic
    ├── tokenizer.ts        # Token counting wrapper
    ├── similarity.ts       # Text similarity calculation
    ├── history.ts          # localStorage persistence
    └── presets.ts          # Built-in example prompts

Deploy

Deploy to Vercel with one click:

Or deploy anywhere that supports Node.js:

npm run build
npm start

License

MIT