CodeDiff
Code comparison surface for reviewing added, removed, and unchanged lines
CodeDiff compares two code versions and renders a readable review surface. It supports unified and split layouts, line numbers, custom labels, copying the resulting code, themes, sizes, wrapping, and line interaction callbacks.
Basic usage
import { CodeDiff } from '@mosmox/ui';
<CodeDiff
oldCode={'const enabled = false;\nreturn enabled;'}
newCode={'const enabled = true;\nreturn enabled;'}
language="tsx"
title="feature.tsx"
/>Changed lines are shown as removed (-) and added (+). Equal lines are shown as context. Use view="split" when the previous and current versions should be presented in two labeled columns.
<CodeDiff
view="split"
oldLabel="Previous"
newLabel="Current"
oldCode={previousSource}
newCode={currentSource}
theme="light"
/>Unified diff input
When a patch is already available, pass it through diff. Hunk and file header lines are ignored; added, removed, and context prefixes are interpreted automatically.
<CodeDiff
diff={`@@ -1,2 +1,2 @@
-const ready = false;
+const ready = true;`}
language="javascript"
/>Actions and interaction
The built-in copy action copies the current version (newCode or the non-removed lines from diff). Set copyable={false} to hide it, customize its labels with copyLabel and copiedLabel, and observe the copied value through onCopy.
onLineClick receives the visible line number, source content, and line kind (added, removed, or context). This can be used to open review comments or connect the diff to another panel.
Appearance
theme supports the same built-in code themes as the code viewer: light, dark, black, github, solarized, dracula, nord, monokai, ocean, and high-contrast. size supports sm, default, and lg. Use wrap for narrow layouts, maxHeight for a scrollable review area, and radius to customize corner rounding.
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
oldCode | string | '' | Previous source version. |
newCode | string | '' | Current source version. |
diff | string | — | Unified patch text; takes precedence over oldCode and newCode. |
view | unified | split | unified | Layout for the comparison. |
oldLabel | ReactNode | Before | Label for the previous version in split view. |
newLabel | ReactNode | After | Label for the current version in split view. |
language | string | — | Language label shown in the header. |
title | ReactNode | — | Header title. |
showHeader | boolean | true | Shows the title, language, and copy action header. |
showLineNumbers | boolean | true | Shows old/current line numbers. |
copyable | boolean | true | Shows the copy action. |
copyLabel | string | Copy result | Accessible and visible copy label. |
copiedLabel | string | Copied | Label shown after copying. |
onCopy | (code: string) => void | — | Called with the current source after copying. |
onLineClick | (line, content, kind) => void | — | Handles clicks on diff lines. |
theme | CodeBlockTheme | dark | Color theme. |
size | sm | default | lg | default | Code typography size. |
wrap | boolean | false | Wraps long lines. |
maxHeight | number | string | — | Maximum code area height. Numbers are pixels. |
radius | number | string | 8px | Surface corner radius. |
CodeDiff does not execute source code. It renders the supplied text as a reviewable, accessible code comparison.