DiffView

A virtualized split or unified file diff with synchronized rows and independent pane scrolling.

No language grammars are included by default. Register a linked grammar in Rust, or load one portable pack of selected Tree-sitter Wasm grammars and queries using loadLanguagePack (TypeScript) / LoadLanguagePack (Go).

Unstyled by default: text and line-number colors inherit, and the component adds no background, border, rounding, padding, or syntax/diff palette. Supply application styles and explicit colors to opt into an appearance.

#Import

bun add @quickgui/extension-editor

import { DiffView } from "@quickgui/extension-editor";

// quickgui.config.ts
extensions: ["@quickgui/extension-editor"]

#Usage

<DiffView
  oldPath="before.ts"
  newPath="after.ts"
  oldText={"export const answer = 41;\n"}
  newText={"export const answer = 42;\n"}
  options={{
    layout: "split",
    indicators: "bars",
    lineNumbers: true,
    language: "typescript",
  }}
  style={{ width: "100%", height: 420 }}
/>

#Syntax highlighting

DiffView uses the same registered Tree-sitter grammars as Editor. When its document, language, or syntax palette changes, the Rust core parses each visible old/new file lane once and assigns capture fragments to logical rows. Styled text is materialized and cached only when a row is mounted, with inline addition/deletion emphasis merged at non-overlapping byte boundaries. Scrolling never invokes the parser.

#API reference

Expand an entry for its description and complete signature. A dash means no declaration default is documented.

`DiffView`

DiffView(props: DiffViewProps): NativeNode

accessibilityLabelstring—

Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.

string

styleStyleProp—

Layout, typography, paint, and interaction-state styles. Arrays merge left to right.

StyleProp

disabledboolean—

Declares disabled (optional). Reactive JSX expressions update this property in place.

boolean

invalidboolean—

Expose web-style invalid state; the `style.invalid` variant paints while it is set.

boolean

selectedboolean—

Expose web-style selected state; the `style.selected` variant paints while it is set.

boolean

groupboolean | string—

Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.

boolean | string

rolestring—

Declares role (optional). Reactive JSX expressions update this property in place.

string

tabIndexnumber—

Declares tabIndex (optional). Reactive JSX expressions update this property in place.

number

focusOnPointerboolean—

Keep keyboard focus where it is when this element is activated with a pointer.

boolean

overlayboolean—

Paint this subtree in the viewport overlay plane above embedded native views.

boolean

focusTrapboolean—

Contain keyboard focus within this subtree while it is the topmost trap.

boolean

restorePreviousFocusboolean—

Restore the previously focused mounted control when this surface unmounts.

boolean

autoFocusboolean—

Prefer this control when its containing focus trap takes focus.

boolean

aria-modalboolean—

Expose modal semantics to assistive technology.

boolean

ariaModalboolean—

Declares ariaModal (optional). Reactive JSX expressions update this property in place.

boolean

dismissOnEscapeboolean—

Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.

boolean

dismissOnPointerOutsideboolean—

Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.

boolean

tooltipstring—

Delayed, pointer-passive native tooltip text shown while this element is hovered.

string

tooltipPlacementPopoverPlacement—

Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.

PopoverPlacement

tooltipDelaynumber—

Hover delay in milliseconds, clamped by the Rust core to at most ten seconds.

number

tooltipGapnumber—

Declares tooltipGap (optional). Reactive JSX expressions update this property in place.

number

tooltipViewportMarginnumber—

Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.

number

hitSlopnumber | string—

Declares hitSlop (optional). Reactive JSX expressions update this property in place.

number | string

hitSlopTopnumber | string—

Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.

number | string

hitSlopRightnumber | string—

Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.

number | string

hitSlopBottomnumber | string—

Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.

number | string

hitSlopLeftnumber | string—

Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.

number | string

aria-labelstring—

Declares aria-label (optional). Reactive JSX expressions update this property in place.

string

ariaLabelstring—

Declares ariaLabel (optional). Reactive JSX expressions update this property in place.

string

ref((node: NativeNode) => void) | NativeNode—

Declares ref (optional). Reactive JSX expressions update this property in place.

((node: NativeNode) => void) | NativeNode

onClickEventHandler—

Declares onClick (optional). Reactive JSX expressions update this property in place.

EventHandler

onMouseEnterEventHandler—

Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.

EventHandler

onMouseLeaveEventHandler—

Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.

EventHandler

onPointerEnterEventHandler—

Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.

EventHandler

onPointerLeaveEventHandler—

Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.

EventHandler

onPointerEventHandler—

Captured pointer stream from press through release/cancel, including outside the element.

EventHandler

onInputEventHandler—

Declares onInput (optional). Reactive JSX expressions update this property in place.

EventHandler

onChangeEventHandler—

Declares onChange (optional). Reactive JSX expressions update this property in place.

EventHandler

onSubmitEventHandler—

Declares onSubmit (optional). Reactive JSX expressions update this property in place.

EventHandler

onDismissEventHandler—

Declares onDismiss (optional). Reactive JSX expressions update this property in place.

EventHandler

onKeyDownEventHandler—

Focused key press. Declare a `tabIndex` to make an ordinary container focusable.

EventHandler

onKeyUpEventHandler—

Declares onKeyUp (optional). Reactive JSX expressions update this property in place.

EventHandler

onMouseDownEventHandler—

Declares onMouseDown (optional). Reactive JSX expressions update this property in place.

EventHandler

onMouseUpEventHandler—

Declares onMouseUp (optional). Reactive JSX expressions update this property in place.

EventHandler

onMouseMoveEventHandler—

Declares onMouseMove (optional). Reactive JSX expressions update this property in place.

EventHandler

onDoubleClickEventHandler—

Second press of one exact native multi-click sequence.

EventHandler

onWheelEventHandler—

Declares onWheel (optional). Reactive JSX expressions update this property in place.

EventHandler

onContextMenuEventHandler—

Secondary-button press. Use `ContextMenu` for a declared native menu.

EventHandler

onPinchEventHandler—

Declares onPinch (optional). Reactive JSX expressions update this property in place.

EventHandler

onRotateEventHandler—

Declares onRotate (optional). Reactive JSX expressions update this property in place.

EventHandler

onSmartMagnifyEventHandler—

Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.

EventHandler

onPressureEventHandler—

Declares onPressure (optional). Reactive JSX expressions update this property in place.

EventHandler

onFocusEventHandler—

Declares onFocus (optional). Reactive JSX expressions update this property in place.

EventHandler

onBlurEventHandler—

Declares onBlur (optional). Reactive JSX expressions update this property in place.

EventHandler

keymapKeymap—

Bounded accelerator table resolved by the core while this element is focused.

Keymap

onActionEventHandler—

Typed binding id dispatched by `keymap`.

EventHandler

draggableboolean | DragSource—

Declared drag payload promoted when this element starts a drag.

boolean | DragSource

onDragStartEventHandler—

Declares onDragStart (optional). Reactive JSX expressions update this property in place.

EventHandler

onDragEndEventHandler—

Declares onDragEnd (optional). Reactive JSX expressions update this property in place.

EventHandler

dropKindsDropKind | readonly DropKind[]—

Payload kinds this element accepts, declared ahead of the native drag.

DropKind | readonly DropKind[]

onDropEventHandler—

Declares onDrop (optional). Reactive JSX expressions update this property in place.

EventHandler

onFilesDroppedEventHandler—

Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.

EventHandler

patchstring—

Captured Git or ordinary unified patch.

string

oldTextstring—

Declares oldText. Reactive JSX expressions update this property in place.

string

newTextstring—

Declares newText. Reactive JSX expressions update this property in place.

string

oldPathstring—

Declares oldPath (optional). Reactive JSX expressions update this property in place.

string

newPathstring—

Declares newPath (optional). Reactive JSX expressions update this property in place.

string

optionsDiffViewOptions—

Declares options (optional). Reactive JSX expressions update this property in place.

DiffViewOptions

presentationDiffPresentation—

Declares presentation (optional). Reactive JSX expressions update this property in place.

DiffPresentation

themeDiffTheme—

Declares theme (optional). Reactive JSX expressions update this property in place.

DiffTheme

syntaxThemeSyntaxTheme—

Declares syntaxTheme (optional). Reactive JSX expressions update this property in place.

SyntaxTheme