svelte/diff.
Readable, reactive text diffs for Svelte 5. Semantic cleanup, expected-pattern matching, typed snippets, CSS classes, and processing telemetry in one focused component.
Compare two strings in Svelte.
Use this Svelte diff viewer to highlight insertions and deletions inline.
Pass your before and after strings as originalText and modifiedText; the diff updates whenever either value changes.
Choose character, word, or line comparison. Character uses semantic cleanup.
Comparing timestamps, versions, or generated IDs? Use expected patterns to keep intentional changes visible without treating them as ordinary edits.
build your own Svelte diff viewer ↗ choose a diff mode ↗ word example ↗ line example ↗The documentation will ship afterwith the launch.
Owner: Product EngineeringDeveloper Experience
why svelte-diff.
A compact API with deliberate escape hatches for styling, markup, and telemetry.
Reactive text comparison
Pass before and after strings. The rendered diff recomputes whenever either prop changes.
Semantic cleanup
Move edit boundaries toward changes a person can scan instead of raw character noise.
Expected patterns
Mark dates, versions, names, and generated values with named capture groups.
Svelte 5 snippets
Own removed, inserted, equal, expected, and line-break markup independently.
Class-based styling
Keep the default spans and apply semantic classes when full custom rendering is unnecessary.
Processing telemetry
Inspect core, cleanup, and total timing alongside the raw diff tuples.
Choose your diff tool.
Find the right tool for comparing strings in Svelte, computing diff data, or displaying git patches. Explore the features and tradeoffs of each option.
all comparisons ↗Svelte Diff vs jsdiff
Choose between a JavaScript diff library with word and line modes and a ready-to-render Svelte component.
Svelte Diff vs diff-match-patch
Compare the underlying algorithm library with a Svelte component that handles reactivity, cleanup, and rendering.
Svelte Diff vs diff2html
Decide whether you need a git-patch viewer with side-by-side files or an inline diff of two plain strings.
built for ai-assisted code.
Point Cursor, Claude Code, or any LLM at the manifests below and it gets the complete SvelteDiff contract: cleanup precedence, expected patterns, renderer snippets, callback types, and runnable examples.
/llms.txt
Compact discovery map with the install command, important behavior, canonical documentation links, and every example mirror.
/llms-full.txt
One-file reference containing the complete API, guides, migration notes, expected-pattern semantics, and performance guidance.
/docs/<slug>.md
Every guide mirrored as clean Markdown, plus runnable Svelte source under /examples/<slug>.md for agents that need implementation detail.
Use https://diff.svelte.page/llms.txt as the source for @humanspeak/svelte-diff. Build a Svelte 5 review panel that compares
two editable documents, enables semantic cleanup, styles insertions and
removals, and reports onProcessing timing.