Skip to main content

Diff View

Visualize differences between state snapshots with syntax highlighting.

Overview​

The Diff View component displays differences between two state objects with clear visual indicators for added, removed, and modified values.

API​

import { DiffView } from 'react-dev-debugger/ui';

<DiffView
  prev={previousState}
  next={currentState}
  mode="split" // or "unified"
  showUnchanged={false}
  expandDepth={3}
/>

Basic Example​

import { DiffView } from 'react-dev-debugger/ui';

const prev = { count: 5, user: { name: 'John' } };
const next = { count: 6, user: { name: 'Jane' } };

function DebugPanel() {
  return (
    <div>
      <h2>State Diff</h2>
      <DiffView prev={prev} next={next} mode="split" />
    </div>
  );
}

Features​

  • Split View: Side-by-side comparison
  • Unified View: Inline comparison
  • Syntax Highlighting: Color-coded changes
  • Expandable Objects: Drill into nested data
  • Change Count: Summary of changes
  • Copy to Clipboard: Export diff

Display Modes​

Live Playground​

Diff Controls

Change Summary
+1 Added−0 Removed~4 Modified

Diff View (Split)

Previous
{
  "count": 5,
  "user": {
    "name": "John",
    "age": 30,
    "email": "john@example.com"
  },
  "todos": [
    "Learn React",
    "Build app"
  ],
  "settings": {
    "theme": "dark",
    "language": "en"
  }
}
Current
{
  "count": 6,
  "user": {
    "name": "Jane",
    "age": 30,
    "email": "jane@example.com"
  },
  "todos": [
    "Learn React",
    "Build app",
    "Deploy app"
  ],
  "settings": {
    "theme": "light",
    "language": "en"
  }
}

DiffView Usage Example

import { DiffView } from 'react-dev-debugger/ui';

const prev = {
  "count": 5,
  "user": {
    "name": "John",
    "age": 30,
    "email": "john@example.com"
  },
  "todos": [
    "Learn React",
    "Build app"
  ],
  "settings": {
    "theme": "dark",
    "language": "en"
  }
};

const next = {
  "count": 6,
  "user": {
    "name": "Jane",
    "age": 30,
    "email": "jane@example.com"
  },
  "todos": [
    "Learn React",
    "Build app",
    "Deploy app"
  ],
  "settings": {
    "theme": "light",
    "language": "en"
  }
};

function DebugPanel() {
  return (
    <DiffView
      prev={prev}
      next={next}
      mode="split"
      showUnchanged={false}
      expandDepth={3}
    />
  );
}

Split View​

Side-by-side comparison:

<DiffView
  prev={prevState}
  next={nextState}
  mode="split"
  syncScroll={true}
/>

Unified View​

Inline comparison:

<DiffView
  prev={prevState}
  next={nextState}
  mode="unified"
  contextLines={3}
/>

Color Coding​

  • Green: Added values
  • Red: Removed values
  • Yellow: Modified values
  • Gray: Unchanged values

Advanced Features​

Custom Rendering​

<DiffView
  prev={prevState}
  next={nextState}
  renderValue={(value, path, type) => (
    <CustomValueRenderer
      value={value}
      path={path}
      changeType={type}
    />
  )}
/>

Filter Changes​

<DiffView
  prev={prevState}
  next={nextState}
  filter={(path, type) => {
    // Only show specific changes
    return path.startsWith('user.') && type !== 'unchanged';
  }}
/>

Next Steps​