examples.
Hands-on demos of @humanspeak/svelte-diff. Change inputs, compare cleanup strategies, inspect expected captures and timings, then open the exact Svelte source.
pick a diff.
Every page is a self-contained example with live output and the implementation source.
basic diff.
START
The smallest useful setup: two strings, semantic cleanup, and class-based styling.
word diff.
GRANULARITY
Compare whole words with raw character edits using editable prose.
line diff.
GRANULARITY
Compare complete configuration lines, preserving blank lines and endings.
code diff.
SYNTAX
Compare literal source with optional full-source syntax highlighting.
live editor.
REACTIVE
Edit both strings and watch Svelte recompute a readable diff immediately.
expected patterns.
PATTERNS
Match versions, dates, and names as intentional variation and inspect captures.
custom snippets.
RENDERING
Replace default spans with semantic del/ins markup and your own visual language.
cleanup modes.
READABILITY
Compare raw, efficiency-cleaned, and semantically-cleaned output side by side.
timing.
PERFORMANCE
Scale the input and watch core, cleanup, total, and segment metrics update.
the live diff → before / after / output