@veridtools/dmn-diff-highlightSyntax highlighting for DMN diff output

Takes rendered diff text from @veridtools/dmn-diff and returns HTML with syntax-highlighting CSS classes. Works with all 4 formats — semantic, rows, JSON, XML. React component included.

Get started

React component

Playground

Format auto-detection

Pass any diff output — semantic, rows, JSON, or XML — and the library detects the format automatically. No configuration needed.

Semantic class names

Every token gets a meaningful CSS class. Customize colors by overriding CSS custom properties. Ship your own theme without touching the library.

React component

Drop in the DiffHighlight component. Accepts raw text or a DiffResult object directly. Zero client-side parsing overhead.

Vanilla JS first

highlightDiff(), highlightResult(), and mountDiff() work anywhere — no framework required. The React entry is a separate export.

Light and dark mode

The default Catppuccin-inspired theme adapts to prefers-color-scheme automatically. Override with CSS custom properties for full control.

Type-safe API

Full TypeScript types exported. DiffResult comes from @veridtools/dmn-diff — no separate type installation needed.