DiffViewer

Diff viewer for audit / config / permission change surfaces with unified or split mode.

#Default usage

{

  "role": "member",

  "permissions": ["read"]

  "role": "admin",

  "permissions": ["read", "write"]

}

<DiffViewer
  oldValue={'{\n  "role": "member",\n  "permissions": ["read"]\n}'}
  newValue={'{\n  "role": "admin",\n  "permissions": ["read", "write"]\n}'}
/>

#Import

import { DiffViewer, type DiffLine, type DiffMode } from "@froggdesign/enter-ui-react";

#Accessibility

Each diff line carries an aria-label naming Added line / Removed line / Unchanged line plus a leading + / − symbol so colour is never the only signal.

#API

• oldValue + newValue: convenience inputs — line diff is computed via LCS.
• lines: pre-computed DiffLine[] for surfaces that already produce a diff.
• mode: "unified" (default) or "split".
• hideLineNumbers: hide the line number columns.
• hideToolbar: hide the count + copy toolbar.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.