Diff

Diff

Diff renderable visualises patch content. Display differences in unified or split mode and choose how to wrap long lines. Provide the diff string via the diff prop.

<diff
  view="split"
  wrapMode="word"
  diff={patch()}
/>

You can highlight intraline changes and configure colours for additions and deletions.

A practical pattern is to pair Diff with a file list and keep the diff pane scrollable. When the user selects a file, swap the diff content and reset scroll to top. This turns Diff into a usable “mini code review” UI.

<box flexDirection="row" height="100%">
  <box width={24} border padding={1}>
    <text content="Files" bold />
    <select options={files()} selectedIndex={activeFile()} onSelect={(i) => setActiveFile(i)} />
  </box>
  <scrollbox id="diff" flexGrow={1} border>
    <diff view="unified" wrapMode="none" diff={patchForActiveFile()} />
  </scrollbox>
  <scrollbar targetId="diff" />
</box>