Getting started

Installation

# npm
npm install @veridtools/dmn-diff-highlight @veridtools/dmn-diff

# pnpm
pnpm add @veridtools/dmn-diff-highlight @veridtools/dmn-diff

# yarn
yarn add @veridtools/dmn-diff-highlight @veridtools/dmn-diff

Then import the default CSS theme (or write your own):

import '@veridtools/dmn-diff-highlight/style.css';

Quick start — vanilla JS

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

const diffText = `before.dmn → after.dmn

~ decision "Loan Approval" (approval) modified
    @name: Loan Approval → Loan Approval Decision  ⚠ BREAKING

0 added · 1 modified · 0 removed · 5 unchanged`;

const html = highlightDiff(diffText);
document.getElementById('output')!.innerHTML = html;

Quick start — from DiffResult

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

const result = diff(fromXml, toXml, { fromFile: 'before.dmn', toFile: 'after.dmn' });

// Renders as semantic format by default
document.getElementById('output')!.innerHTML = highlightResult(result);

// Or choose a different format
document.getElementById('output')!.innerHTML = highlightResult(result, { format: 'rows' });

Quick start — React

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

const result = diff(fromXml, toXml);

function MyComponent() {
  return <DiffHighlight result={result} format="semantic" />;
}

Next steps

• React component →
• Vanilla JS API →
• API reference →
• Try the playground →