Code Diff

View sourcecomponents/code_diff.go

Two-pane diff#

Green marks local additions and red marks removed server content while both panes keep aligned line numbers.

Enable JavaScript to run the preview. Go source and install commands remain available.

diff.Paint(canvas, theme, bounds, components.CodeDiffSnapshot{
    Result: components.DiffCodeLines(serverValue, localValue),
    ID: field, Value: localValue,
    VerticalScrollbarID: vertical,
    HorizontalScrollbarID: horizontal,
})

Installation

Copy the recipe into your own project.

go run ./cmd/viva add --out ./components/local code-diff

Aligned source comparison#

CodeDiff paints two synchronized panes from a caller-owned CodeDiffResult. The left pane is a fixed baseline; the right pane connects to the same native text editor used by CodeEditor and Textarea.

Use DiffCodeLines to create Added, Removed and Changed rows without changing either source string.
Long lines share one horizontal offset and both panes share one vertical offset.
Added and removed rows include signs and line numbers in addition to color.

Editing and scrolling#

The right pane preserves byte-based selection, composition and caret placement while the aligned rows remain read-only on the left.

Mouse wheel and scrollbar drags update the shared offsets.
Read-only previews do not expose a platform editor.
Applications should debounce expensive recomputation and discard stale results after newer text arrives.

Keyboard

Use Tab to move between controls and Ctrl/⌘ K to search the catalog. Inside a preview, the Go runtime handles keyboard input.