# Getting Started > Install @humanspeak/svelte-diff and render a readable, reactive text diff in Svelte 5. **Source:** [https://diff.svelte.page/docs/getting-started](https://diff.svelte.page/docs/getting-started) --- `@humanspeak/svelte-diff` is a focused Svelte 5 component for comparing two strings. It runs the diff-match-patch algorithm, optionally cleans the result for readability, and renders each change as real Svelte markup. ## Installation ```bash npm install @humanspeak/svelte-diff ``` ```bash pnpm add @humanspeak/svelte-diff ``` ## Compare two strings in Svelte To build an inline Svelte diff viewer, pass the original and modified strings to `SvelteDiff`. Enable `cleanupSemantic` to make edits in prose easier to read: ```svelte

``` By default, removed text is red with a strike-through, inserted text is green, and unchanged text is unstyled. Unstyled unchanged text uses compact DOM without wrapper spans; pass `compact={false}` when migrating selectors or styles that require the legacy equal spans. Text is escaped by Svelte; the component does not inject an HTML string. Try the [live diff viewer](/#compare-two-strings) or the [basic diff example](/examples/basic-diff). For dates, versions, and generated IDs that are supposed to change, use [expected patterns](/docs/guides/expected-patterns) to label those values separately. ## Reactive inputs Both required props are reactive. If either string changes, the component recomputes the diff. ```svelte ``` ## Recommended readable defaults For prose and user-facing copy, semantic cleanup is usually the best starting point: ```svelte ``` For machine-like strings where every small edit matters, keep semantic cleanup off and use the default efficiency cleanup. ## Styling with classes Use `rendererClasses` when you want to keep the default `` markup: ```svelte ``` Use child snippets when you need different elements, attributes, icons, or animation. See [Custom Rendering](/docs/guides/custom-rendering). ## Choosing a diff tool - [Svelte Diff vs jsdiff](/compare/vs-jsdiff) — choose a rendered Svelte component or a JavaScript library that returns diff data, including word and line modes. - [Svelte Diff vs diff-match-patch](/compare/vs-diff-match-patch) — compare the underlying algorithm library with its reactive Svelte component integration. - [Svelte Diff vs diff2html](/compare/vs-diff2html) — choose inline string comparison or a git-patch viewer with side-by-side files. ## Next steps - [SvelteDiff API](/docs/api/svelte-diff) — every prop and precedence rule - [Expected Patterns](/docs/guides/expected-patterns) — separate intentional variation from real changes - [Cleanup Modes](/docs/guides/cleanup) — choose semantic, efficiency, or raw output - [Interactive Examples](/examples) — edit values and inspect real output - [Comparisons](/compare) — decide between this component and lower-level diff tools ## Choose a comparison unit Character is the default and retains the existing cleanup behavior. Use `diffMode="word"` for complete changed words or `diffMode="line"` for complete changed lines. Both token modes skip cleanup. ```svelte ``` Read the [mode guide](/docs/guides/diff-modes), edit the [word example](/examples/word-diff), or try the [line example](/examples/line-diff). JSON input remains plain text; sentence and structural JSON modes are unsupported.