Skip to content
github

Diff Viewer

The DiffViewer component provides a powerful way to display file differences with syntax highlighting. It supports both Split (side-by-side) and Unified (inline) display modes, making it perfect for code review interfaces, version comparison tools, and change visualization.

Variations

Unified mode

By default the diff renders in Split mode (old on the left, new on the right). Pass diffViewMode={DiffModeEnum.Unified} to render the diff inline, stacked in a single column — better for narrow layouts, side panels, and focused review of small changes.

Installation

import { DiffViewer } from "@harnessio/ui/components";


function MyComponent() {
  const oldCode = `function hello() {\n  console.log("Hello");\n}`;
  const newCode = `function hello(name) {\n  console.log(\`Hello \${name}\`);\n}`;


  return <DiffViewer oldCode={oldCode} newCode={newCode} lang="typescript" />;
}

Note: The DiffViewer requires ThemeProvider from @harnessio/ui/context to be present in your component tree for theme detection to work properly.