Three Prompts: Diff Tool

Introduction

Comparing text files is a common task for developers, writers, and anyone who works with documents. While tools like Git provide powerful diffing capabilities in development environments, there's often a need for a quick, browser-based solution without installing software or setting up repositories.

The Diff Tool project addresses this need with a clean, simple interface that lets users paste two versions of text and instantly see their differences highlighted. What makes this project particularly interesting is that it was created using only three AI prompts, demonstrating how complex functionality can be implemented efficiently with minimal guidance.

The Three Prompts

Here are the exact prompts that were used to create this project:

In @projects/diff-tool Make a new project for a diff tool in the browser. I want this to be a super simple UI where I can copy and paste in 2 pieces of text and show the highlighted differences between the files. Similar to a git diff.

Keep it performant and super simple in design.

Now make the following updates in order

- Center the UI
- Add copy buttons for the input fields
- Add the ability to save a diff in localstorage
- List contents of localstorage in left panel
- Allow for selecting saved diff to edit from there

Don't close the saved drawer when clicking on a diff, only close when the hide saved button is pressed

Technologies Used

The Diff Tool is built with modern web technologies focused on performance and simplicity:

• React 19.1.0: For building the user interface components and managing state
• Vite 6.3.5: As the build tool and development server for fast iteration
• diff 8.0.2: A JavaScript library that provides efficient text comparison algorithms
• localStorage API: For persisting saved diffs in the browser
• CSS3: For styling with flexbox and grid layouts for responsive design

This tech stack enables a lightweight application that runs entirely in the browser with no backend dependencies, making it instantly accessible to users without installation or setup.

Key Features

Despite being created with just three prompts, the Diff Tool includes several useful features:

Comparison Modes

Users can choose between two comparison methods:

• Line-by-line comparison: Similar to Git diff, showing which lines were added, removed, or changed
• Character-by-character comparison: For more granular analysis, highlighting specific characters that differ

Persistent Storage

The tool allows users to:

• Save diffs with custom names to localStorage
• View a list of all saved diffs with timestamps
• Load saved diffs back into the editor for further analysis
• Delete saved diffs when no longer needed

User Experience Enhancements

• Copy buttons for quickly copying text from either input field
• Visual feedback when text is copied
• Responsive design that works on both desktop and mobile devices
• Collapsible saved diffs panel to maximize workspace when needed

Implementation Details

The implementation of the Diff Tool showcases several interesting technical approaches:

State Management

The application uses React hooks for efficient state management:

• useState for managing text inputs, diff results, and UI state
• useEffect for handling side effects like computing diffs and loading saved data
• useRef for direct DOM manipulation needed for copy functionality

Diff Algorithm Integration

The core diffing functionality leverages the diff library's algorithms:

useEffect(() => {
  if (leftText || rightText) {
    const diff = diffMode === 'lines' 
      ? diffLines(leftText, rightText)
      : diffChars(leftText, rightText)
    
    setDiffResult(diff)
  } else {
    setDiffResult([])
  }
}, [leftText, rightText, diffMode])

This approach allows the tool to efficiently compute differences as users type, providing real-time feedback.

LocalStorage Integration

The tool uses localStorage for persistent storage, with careful error handling to prevent data corruption:

// Loading saved diffs
useEffect(() => {
  const savedDiffsData = localStorage.getItem('savedDiffs')
  if (savedDiffsData) {
    try {
      setSavedDiffs(JSON.parse(savedDiffsData))
    } catch (e) {
      localStorage.removeItem('savedDiffs')
    }
  }
}, [])

// Saving a new diff
const handleSaveDiff = () => {
  // Create new diff object with metadata
  const newDiff = {
    id: Date.now().toString(),
    name: diffName.trim(),
    leftText,
    rightText,
    diffMode,
    timestamp: new Date().toISOString()
  }
  
  // Update state and persist to localStorage
  const updatedDiffs = [...savedDiffs, newDiff]
  setSavedDiffs(updatedDiffs)
  localStorage.setItem('savedDiffs', JSON.stringify(updatedDiffs))
}

Visual Feedback

The tool provides visual feedback for user actions through CSS animations:

/* Copy feedback animation */
@keyframes copied-feedback {
  0% { background-color: #2ecc71; }
  100% { background-color: white; }
}

textarea.copied {
  animation: copied-feedback 1s ease-out;
}

Challenges and Solutions

Challenge: Responsive Design

Creating a tool that works well on both desktop and mobile devices presented layout challenges, especially with the dual-pane editor.

Solution: The application uses CSS Grid and Flexbox with media queries to adapt the layout based on screen size:

@media (max-width: 768px) {
  .editor-container {
    grid-template-columns: 1fr;
  }
  
  .main-content {
    flex-direction: column;
  }
  
  .saved-diffs-panel {
    width: 100%;
    max-height: 300px;
  }
}

This ensures the tool remains usable even on smaller screens by stacking elements vertically.

Challenge: User Experience Flow

The third prompt addressed a specific UX issue: the saved diffs panel would close when a diff was selected, interrupting the user's workflow.

Solution: The code was modified to keep the panel open when loading a diff, allowing users to quickly switch between different saved versions:

const handleLoadDiff = (diff) => {
  setLeftText(diff.leftText)
  setRightText(diff.rightText)
  setDiffMode(diff.diffMode)
  setDiffName(diff.name)
  // Keep the saved diffs panel open
}

Challenge: Performance with Large Texts

Diffing large blocks of text can be computationally expensive and potentially freeze the UI.

Solution: The implementation uses React's efficient rendering and the optimized diff library to maintain performance. The diffing operation runs in a useEffect hook that only triggers when necessary, preventing unnecessary calculations.

Conclusion

The Diff Tool project demonstrates how a practical, useful web application can be created with minimal guidance using AI. With just three prompts, we've built a feature-rich text comparison tool that rivals many existing solutions.

What's particularly impressive is how each prompt builds upon the previous one:

1. The first prompt established the core functionality and simple design
2. The second prompt enhanced the UI and added persistence features
3. The third prompt refined the user experience with a specific workflow improvement

This incremental approach shows how complex applications can be developed through iterative prompting, with each step addressing specific aspects of functionality and user experience.

You can try the Diff Tool yourself by visiting the live demo and explore how it can help with your text comparison needs. Whether you're comparing code snippets, document versions, or any other text, this lightweight browser-based tool provides a quick and easy solution.