Data Display

SourceDiffViewer

Lightweight unified-patch viewer for source-code and operational diffs with file headers, hunk headers, line state styling, and bounded rendering.

import { SourceDiffViewer } from '@lostgradient/cinder/source-diff-viewer';
diffsourcecode
01

Overview

Lightweight unified-patch viewer for source-code and operational diffs with file headers, hunk headers, line state styling, and bounded rendering.

Usage

svelte 
<script lang="ts">
  import { SourceDiffViewer } from '@lostgradient/cinder/source-diff-viewer';
</script>

Use SourceDiffViewer for source-code patches, agent workspace patches, Git output, and other operational unified diffs. Use DiffViewer from @lostgradient/editor for Markdown document review, front-matter handling, Markdown normalization, and prose-oriented word-level changes.

Guidance

Use When

  • Rendering source-code unified patches from agent output, Git operations, workspace changes, or review systems.
  • Showing operational patch output where file and hunk structure matters more than Markdown front matter or word-level prose review.

Avoid When

  • Comparing two Markdown documents with normalization, front-matter, and revert affordances — use DiffViewer from @lostgradient/editor.
  • Showing syntax-highlighted code samples rather than patch output — use code-block instead.
Live preview
02

When to use

Use when
  • Rendering source-code unified patches from agent output, Git operations, workspace changes, or review systems.
  • Showing operational patch output where file and hunk structure matters more than Markdown front matter or word-level prose review.
Avoid when
  • Comparing two Markdown documents with normalization, front-matter, and revert affordances — use `DiffViewer` from `@lostgradient/editor`.
  • Showing syntax-highlighted code samples rather than patch output. Use Code block instead
03

Examples

Basic source diff viewer

Unified patch output with file headers, hunk headers, and source line states.

Bounded source diff viewer

Large patches can cap rendered diff rows while preserving the total count.

04

Props

Props for source-diff-viewer
Name Type Default Required Bindable Description
patch text req Unified patch text to parse and render.
ariaLabel text Accessible label for the diff region.
maxLines number 1000 Maximum number of diff rows to render before truncating.
lineNumbers boolean true Whether old and new line-number gutters are rendered.
emptyMessage text 'No patch lines to display.' Message shown when the patch is empty or contains no displayable diff rows.