A simple and beautiful text diff viewer component made with Diff and React.

Inspired by the Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages.

Most credit goes to Pranesh Ravi who created the original diff viewer. I've just made a few modifications and updated the dependencies so they work with modern stacks.

Install

yarn add react-diff-viewer-continued

# or

npm i react-diff-viewer-continued

# or

pnpm add react-diff-viewer-continued

Usage

import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer-continued';

const oldCode = `
const a = 10
const b = 10
const c = () => console.log('foo')

if(a > 10) {
  console.log('bar')
}

console.log('done')
`;
const newCode = `
const a = 10
const boo = 10

if(a === 10) {
  console.log('bar')
}
`;

class Diff extends PureComponent {
  render = () => {
    return (
      <ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} />
    );
  };
}

Props

Prop	Type	Default	Description
oldValue	string | Object	''	Old value as string (or Object if using DiffMethod.JSON).
newValue	string | Object	''	New value as string (or Object if using DiffMethod.JSON).
splitView	boolean	true	Switch between unified and split view.
disableWordDiff	boolean	false	Show and hide word diff in a diff line.
compareMethod	DiffMethod | (string, string) => diff.Change[]	DiffMethod.CHARS	JsDiff text diff method. See Text block diff comparison. Important: For JSON files use DiffMethod.JSON, for YAML files use DiffMethod.YAML - these use optimized structural comparison that is significantly faster than generic text diff for large files.
renderGutter	(diffData) => ReactNode	undefined	Function that can be used to render an extra gutter with various information next to the line number.
hideLineNumbers	boolean	false	Show and hide line numbers.
alwaysShowLines	string[]	[]	List of lines to always be shown, regardless of diff status. Line numbers are prefixed with L and R for the left and right section of the diff viewer, respectively. For example, L-20 means 20th line in the left pane. extraLinesSurroundingDiff applies to these lines as well.
renderContent	function	undefined	Render Prop API to render code in the diff viewer. Helpful for syntax highlighting.
onLineNumberClick	function	undefined	Event handler for line number click. (lineId: string, event: MouseEvent) => void
highlightLines	string[]	[]	List of lines to be highlighted. Works together with onLineNumberClick. Line numbers are prefixed with L and R for the left and right section of the diff viewer, respectively. For example, L-20 means 20th line in the left pane. To highlight a range of line numbers, pass the prefixed line number as an array. For example, [L-2, L-3, L-4, L-5] will highlight the lines 2-5 in the left pane.
showDiffOnly	boolean	true	Shows only the diffed lines and folds the unchanged lines.
extraLinesSurroundingDiff	number	3	Number of extra unchanged lines surrounding the diff. Works along with showDiffOnly.
codeFoldMessageRenderer	function	undefined	Render Prop API to render code fold message. (totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => ReactElement
styles	object	{}	To override style variables and styles. Learn more about overriding styles.
useDarkTheme	boolean	false	To enable/disable dark theme.
leftTitle	string | ReactElement	undefined	Column title for left section of the diff in split view. This will be used as the only title in inline view.
rightTitle	string | ReactElement	undefined	Column title for right section of the diff in split view. This will be ignored in inline view.
linesOffset	number	0	Number to start count code lines from.
summary	string | ReactElement	undefined	Text or element to display in the summary bar (e.g., filename).
hideSummary	boolean	false	Hide the summary bar (expand/collapse button, change count, summary text).
infiniteLoading	{ pageSize: number, containerHeight: string }	undefined	Enable virtualization for large diffs. When enabled, only visible rows are rendered. containerHeight sets the scrollable container height (e.g., '500px' or '80vh').
loadingElement	() => ReactElement	undefined	Function that returns an element to display while the diff is being computed. Useful with infiniteLoading for large files.
nonce	string	''	Nonce to use for inline styles (for CSP).

Instance Methods

resetCodeBlocks() - Resets the expanded code blocks to its initial state. Returns true on successful reset and false during unsuccessful reset.

Large Diffs and Performance

For large files (thousands of lines), the diff viewer provides several features to maintain good performance:

Virtualization with infiniteLoading

Enable virtualization to only render visible rows:

<ReactDiffViewer
  oldValue={largeOldFile}
  newValue={largeNewFile}
  infiniteLoading={{
    pageSize: 20,
    containerHeight: '80vh'
  }}
  loadingElement={() => (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      Computing diff...
    </div>
  )}
/>

When infiniteLoading is enabled:

• Only visible rows are rendered (virtualization)
• Word-level diffs are computed on-demand as lines become visible
• A loading element can be shown while the initial diff is computed

Use optimized diff methods for structured data

For JSON and YAML files, always use the dedicated diff methods:

// For JSON files - up to 100x faster for large files
<ReactDiffViewer
  oldValue={jsonObject}
  newValue={newJsonObject}
  compareMethod={DiffMethod.JSON}
/>

// For YAML files
<ReactDiffViewer
  oldValue={yamlString}
  newValue={newYamlString}
  compareMethod={DiffMethod.YAML}
/>

See JSON and YAML diffing for more details.

Syntax Highlighting

Syntax highlighting is a bit tricky when combined with diff. Here, React Diff Viewer provides a simple render prop API to handle syntax highlighting. Use renderContent(content: string) => JSX.Element and your favorite syntax highlighting library to achieve this.

An example using Prism JS

// Load Prism CSS
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.css"
/>

// Load Prism JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>

import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer-continued';

const oldCode = `
const a = 10
const b = 10
const c = () => console.log('foo')

if(a > 10) {
  console.log('bar')
}

console.log('done')
`;
const newCode = `
const a = 10
const boo = 10

if(a === 10) {
  console.log('bar')
}
`;

class Diff extends PureComponent {
  highlightSyntax = (str) => (
    <pre
      style={{ display: 'inline' }}
      dangerouslySetInnerHTML={{
        __html: Prism.highlight(str, Prism.languages.javascript),
      }}
    />
  );

  render = () => {
    return (
      <ReactDiffViewer
        oldValue={oldCode}
        newValue={newCode}
        splitView={true}
        renderContent={this.highlightSyntax}
      />
    );
  };
}

Text block diff comparison

Different styles of text block diffing are possible by using the enums corresponding to various JsDiff methods (learn more). The supported methods are as follows.

enum DiffMethod {
  CHARS = 'diffChars',
  WORDS = 'diffWords',
  WORDS_WITH_SPACE = 'diffWordsWithSpace',
  LINES = 'diffLines',
  TRIMMED_LINES = 'diffTrimmedLines',
  SENTENCES = 'diffSentences',
  CSS = 'diffCss',
  JSON = 'diffJson',  // Optimized for JSON files
  YAML = 'diffYaml',  // Optimized for YAML files
}

JSON and YAML diffing

For JSON and YAML files, use the dedicated DiffMethod.JSON and DiffMethod.YAML methods. These use an optimized structural comparison algorithm that is significantly faster than generic text diff for large files.

Why use these methods?

Generic text diff algorithms (like CHARS or WORDS) compare files character-by-character using the Myers diff algorithm, which has O(ND) complexity where N is the file size and D is the number of differences. For large JSON/YAML files (thousands of lines), this can take several seconds or even freeze the browser.

The JSON and YAML methods instead:

1. Parse the data structure
2. Compare objects/arrays structurally
3. Only run text diff on the parts that actually differ

This reduces comparison time from seconds to milliseconds for typical configuration files.

import React from 'react';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';

// For JSON - can pass objects directly
const oldJson = { name: "Original", items: [1, 2, 3] };
const newJson = { name: "Updated", items: [1, 2, 3, 4] };

// For YAML - pass as strings
const oldYaml = `
name: Original
items:
  - 1
  - 2
`;
const newYaml = `
name: Updated
items:
  - 1
  - 2
  - 3
`;

function JsonDiff() {
  return (
    <ReactDiffViewer
      oldValue={oldJson}
      newValue={newJson}
      compareMethod={DiffMethod.JSON}
      splitView={true}
    />
  );
}

function YamlDiff() {
  return (
    <ReactDiffViewer
      oldValue={oldYaml}
      newValue={newYaml}
      compareMethod={DiffMethod.YAML}
      splitView={true}
    />
  );
}

Other diff methods

For regular code or text files, use the standard diff methods:

import React, { PureComponent } from 'react';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';

const oldCode = `
const a = 10
const b = 10
`;
const newCode = `
const a = 10
const boo = 10
`;

class Diff extends PureComponent {
  render = () => {
    return (
      <ReactDiffViewer
        oldValue={oldCode}
        newValue={newCode}
        compareMethod={DiffMethod.WORDS}
        splitView={true}
      />
    );
  };
}

Overriding Styles

React Diff Viewer uses emotion for styling. It also offers a simple way to override styles and style variables. You can supply different variables for both light and dark themes. Styles will be common for both themes.

Below are the default style variables and style object keys.

// Default variables and style keys

const defaultStyles = {
  variables: {
    light: {
      diffViewerBackground: '#fff',
      diffViewerColor: '#212529',
      addedBackground: '#e6ffed',
      addedColor: '#24292e',
      removedBackground: '#ffeef0',
      removedColor: '#24292e',
      wordAddedBackground: '#acf2bd',
      wordRemovedBackground: '#fdb8c0',
      addedGutterBackground: '#cdffd8',
      removedGutterBackground: '#ffdce0',
      gutterBackground: '#f7f7f7',
      gutterBackgroundDark: '#f3f1f1',
      highlightBackground: '#fffbdd',
      highlightGutterBackground: '#fff5b1',
      codeFoldGutterBackground: '#dbedff',
      codeFoldBackground: '#f1f8ff',
      emptyLineBackground: '#fafbfc',
      gutterColor: '#212529',
      addedGutterColor: '#212529',
      removedGutterColor: '#212529',
      codeFoldContentColor: '#212529',
      diffViewerTitleBackground: '#fafbfc',
      diffViewerTitleColor: '#212529',
      diffViewerTitleBorderColor: '#eee',
    },
    dark: {
      diffViewerBackground: '#2e303c',
      diffViewerColor: '#FFF',
      addedBackground: '#044B53',
      addedColor: 'white',
      removedBackground: '#632F34',
      removedColor: 'white',
      wordAddedBackground: '#055d67',
      wordRemovedBackground: '#7d383f',
      addedGutterBackground: '#034148',
      removedGutterBackground: '#632b30',
      gutterBackground: '#2c2f3a',
      gutterBackgroundDark: '#262933',
      highlightBackground: '#2a3967',
      highlightGutterBackground: '#2d4077',
      codeFoldGutterBackground: '#21232b',
      codeFoldBackground: '#262831',
      emptyLineBackground: '#363946',
      gutterColor: '#464c67',
      addedGutterColor: '#8c8c8c',
      removedGutterColor: '#8c8c8c',
      codeFoldContentColor: '#555a7b',
      diffViewerTitleBackground: '#2f323e',
      diffViewerTitleColor: '#555a7b',
      diffViewerTitleBorderColor: '#353846',
    }
  },
  diffContainer?: {}, // style object
  diffRemoved?: {}, // style object
  diffAdded?: {}, // style object
  marker?: {}, // style object
  emptyGutter?: {}, // style object
  highlightedLine?: {}, // style object
  lineNumber?: {}, // style object
  highlightedGutter?: {}, // style object
  contentText?: {}, // style object
  gutter?: {}, // style object
  line?: {}, // style object
  wordDiff?: {}, // style object
  wordAdded?: {}, // style object
  wordRemoved?: {}, // style object
  codeFoldGutter?: {}, // style object
  codeFold?: {}, // style object
  emptyLine?: {}, // style object
  content?: {}, // style object
  titleBlock?: {}, // style object
  splitView?: {}, // style object
}

To override any style, just pass the new style object to the styles prop. New style will be computed using Object.assign(default, override).

For keys other than variables, the value can either be an object or string interpolation.

import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer-continued';

const oldCode = `
const a = 10
const b = 10
const c = () => console.log('foo')

if(a > 10) {
  console.log('bar')
}

console.log('done')
`;
const newCode = `
const a = 10
const boo = 10

if(a === 10) {
  console.log('bar')
}
`;

class Diff extends PureComponent {
  highlightSyntax = (str) => (
    <span
      style={{ display: 'inline' }}
      dangerouslySetInnerHTML={{
        __html: Prism.highlight(str, Prism.languages.javascript),
      }}
    />
  );

  render = () => {
    const newStyles = {
      variables: {
        dark: {
          highlightBackground: '#fefed5',
          highlightGutterBackground: '#ffcd3c',
        },
      },
      line: {
        padding: '10px 2px',
        '&:hover': {
          background: '#a26ea1',
        },
      },
    };

    return (
      <ReactDiffViewer
        styles={newStyles}
        oldValue={oldCode}
        newValue={newCode}
        splitView={true}
        renderContent={this.highlightSyntax}
      />
    );
  };
}

Local Development

pnpm install
pnpm build # or use yarn build:watch
pnpm start:examples

Check package.json for more build scripts.

Contributors

Eric M. 💻

Andrei Kovalevsky 💻

Chang Hyun Kim 💻

License

MIT