Domain

DiffViewer

Side-by-side or unified Markdown diff surface with hunk grouping, word-level inline changes, and size-based debounce gating.

import { DiffViewer } from '@lostgradient/editor/diff-viewer';
diffmarkdowndomain-suite
01

Overview

Side-by-side or unified Markdown diff surface with hunk grouping, word-level inline changes, and size-based debounce gating.

Usage

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

Guidance

Use When

  • Comparing two Markdown documents and wanting the bundled toolbar, view-mode toggle, front-matter handling, and large-payload safeguards.
  • Building a review workflow that needs hunked, line-anchored Markdown diffs out of the box as a heavyweight suite.

Avoid When

  • Showing only a counts summary — use diff-statistics on its own for a lightweight presentation.
  • Diffing non-Markdown source code where syntax-aware highlighting matters more than prose-aware rendering.
Live preview
02

When to use

Use when
  • Comparing two Markdown documents and wanting the bundled toolbar, view-mode toggle, front-matter handling, and large-payload safeguards.
  • Building a review workflow that needs hunked, line-anchored Markdown diffs out of the box as a heavyweight suite.
Avoid when
  • Showing only a counts summary — use diff-statistics on its own for a lightweight presentation.
  • Diffing non-Markdown source code where syntax-aware highlighting matters more than prose-aware rendering.
03

Examples

Basic diff viewer

Line and word-level markdown differences.

Large diff

A larger document exercises hunk navigation and size gating.

With front matter

Front matter changes render in their own collapsible section.

04

Props

Props for diff-viewer
Name Type Default Required Bindable Description
original text req The original/baseline text
current text req The current/modified text
normalizeInputs boolean true Whether to normalize markdown inputs before comparison. When true (default), both original and current are normalized to canonical form before diffing, preventing false positives from formatting differences.
onrevertall () => void Called when user wants to revert all changes
onreverthunk (hunkIndex: number, hunk: DiffHunk) => void Called when user wants to revert a specific hunk
readonly boolean false Whether the viewer is read-only (hides revert buttons)
hunks DiffHunk[] [] bind Bindable: reactive access to computed hunks. Parent components can bind to this to reactively access hunk data.
viewMode 'unified' | 'final' | 'original' 'unified' bind Bindable: reactive access to current view mode. Parent components can bind to control or observe the view mode.
toolbarActions snippet Additional toolbar actions rendered in the toolbar-right section. Use this to inject custom buttons (e.g., export actions) without replacing the entire toolbar.
toolbar snippet Override the entire toolbar for advanced customization. When provided, replaces the default toolbar completely.