Officina UI
Components

DiffViewer

Side-by-side before/after text diff with added and removed lines highlighted.

DiffViewer compares oldValue and newValue line by line and renders them in two columns — "Before" and "After" — highlighting removed lines in red and added lines in green. Use it to show config changes, edit history, or revision previews.

Example

Preview
BeforeAfter
status: draft
status: live
price: 99
price: 129
import { DiffViewer } from '@officina/ui';

function ConfigDiff() {
  return <DiffViewer oldValue={'status: draft\nprice: 99'} newValue={'status: live\nprice: 129'} />;
}

API

PropTypeDefaultDescription
newValue*string—
oldValue*string—

CodeBlock

Syntax-highlighted code block with optional line numbers and a copy button.

Kbd

Styled keyboard key badge that renders a single key cap.

On this page

ExampleAPI