Data

DiffViewer.

Readable inline or split code differences with added and removed lines.

Real interactive component

Live demo

Code changes−2 / +3

1−const theme = "dark";

2−const radius = 8;

1+const theme = "light";

2+const radius = 16;

33 console.log(theme);

4+export { theme };

The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.

Props & API reference

Parameters available in the shared component, including value types, requirements and accepted options.

5 props

Parameter	Type	Required	Default	Possible values	Description
`before`	`string`	Yes	—	—	Original text to compare.
`after`	`string`	Yes	—	—	Updated text to compare.
`view`	`"inline" \| "split"`	No	`inline`	inline · split	Display removed/added lines together or in two panes.
`label`	`string`	No	`Code changes`	—	Accessible diff region label.
`className`	`string`	No	—	—	Additional CSS class on the outer component element.