React component

Installation

pnpm add @veridtools/dmn-diff-highlight @veridtools/dmn-diff react react-dom

React is a peer dependency — it won't be bundled into the library.

Basic usage

import { DiffHighlight } from '@veridtools/dmn-diff-highlight/react';
import '@veridtools/dmn-diff-highlight/style.css';

// From raw text (format auto-detected)
function DiffView({ text }: { text: string }) {
  return <DiffHighlight text={text} />;
}

// From a DiffResult object
import { diff } from '@veridtools/dmn-diff';

function DiffView({ from, to }: { from: string; to: string }) {
  const result = diff(from, to, { fromFile: 'before.dmn', toFile: 'after.dmn' });
  return <DiffHighlight result={result} />;
}

Props

Prop	Type	Default	Description
text	string	—	Raw diff text to highlight. Either text or result must be provided.
result	DiffResult	—	DiffResult from @veridtools/dmn-diff. Either text or result must be provided.
format	DiffFormat	'auto'	Format override for text prop. 'auto' detects automatically. Ignored when result is provided.
className	string	—	Additional CSS class appended to the root <pre> element.

Format selection

// Auto-detect (default) — inspects the text to determine format
<DiffHighlight text={diffText} />

// Explicit format
<DiffHighlight text={semanticText} format="semantic" />
<DiffHighlight text={rowsText} format="rows" />
<DiffHighlight text={jsonText} format="json" />
<DiffHighlight text={xmlText} format="xml" />

// From DiffResult — always renders as semantic HTML
<DiffHighlight result={result} />

Custom theme via className

import './my-theme.css';

<DiffHighlight text={diffText} className="my-theme" />

/* my-theme.css */
.dmn-dh.my-theme {
  --dmn-dh-bg: #0d1117;
  --dmn-dh-added: #3fb950;
  --dmn-dh-removed: #f85149;
  /* ... override any custom property */
}

Usage with useMemo

When from/to XML changes frequently (e.g., in a live editor), memoize the diff() call:

import { diff } from '@veridtools/dmn-diff';
import { DiffHighlight } from '@veridtools/dmn-diff-highlight/react';
import { useMemo } from 'react';

function LiveDiff({ fromXml, toXml }: { fromXml: string; toXml: string }) {
  const result = useMemo(
    () => diff(fromXml, toXml, { fromFile: 'before.dmn', toFile: 'after.dmn' }),
    [fromXml, toXml],
  );

  return <DiffHighlight result={result} />;
}

The DiffHighlight component already memoizes the highlightResult() call internally, so it only re-renders when text, result, format, or className changes.