Vue Diff Text

I needed a way to show text differences in my Vue 3 apps, so I built this wrapper around the fantastic jsdiff library by @kpdecker. It gives you five different ways to highlight changes between text blocks, from character-level precision to sentence-level overview.

⚠️ Important: This library is designed for text and paragraph comparisons, not code diffing. If you need to compare code with syntax highlighting, use v-code-diff instead.

What you get

- Works with Vue 3 Composition API
- Six different diff strategies: characters, words, words with spaces, lines, sentences, and HTML
- Perfect for text, documents, and prose comparisons
- Easy to customize with CSS variables
- Full TypeScript support
- Lightweight (just a thin wrapper around jsdiff)
- Pass any options that jsdiff supports

Installation

``bash
npm install vue-diff-text
`

Demo

!Vue Diff Text Demo

To run this demo locally: git clone this repo, cd demo, npm install, then npm run dev

The six components

Each component uses a different diffing strategy depending on what level of detail you need:

DiffChars - Shows every single character change. Great for catching typos or small edits.

DiffWords - Highlights word-level changes but ignores whitespace. Perfect for most text editing scenarios.

DiffWordsWithSpace - Like DiffWords but also shows whitespace changes. Useful when formatting matters.

DiffLines - Shows entire line changes. Good for comparing plain text files or when you want a high-level overview.

DiffSentences - Highlights sentence-level changes. Nice for prose and document editing.

DiffHtml - Compares HTML content and highlights markup differences. Perfect for rich text editing and HTML content changes.

How to use it

> ⚠️ Important: You should import the CSS file for styling to work. It's not mandatory, you CAN implement the classes yourself.

> `javascript
> import 'vue-diff-text/dist/style.css'
> `

$3

`vue



`

$3

Since this is just a wrapper around jsdiff, you can pass any options that jsdiff supports:

`vue



`

Props

All components take the same props:

- old-text (required) - The original text
- new-text (required) - The new text to compare
- options (optional) - Any options to pass to jsdiff

Options

The options you can pass depend on which diff type you're using. Here are the most common ones:

For most components:
- ignoreCase: true - Ignore case differences
- ignoreWhitespace: true - Ignore whitespace differences

For DiffLines:
- newlineIsToken: true - Treat newlines as separate tokens

Check the jsdiff docs for the complete list of what each diff type supports.

Styling

You must import the CSS file for styling to work. Add this import to your component or main.js:

`javascript
import 'vue-diff-text/dist/style.css'
`

You can then customize the look in two ways:

$3

Just override the CSS variables to change colors:

`css
:root {
--text-diff-added-bg: #e6ffed;
--text-diff-added-color: #1b7332;
--text-diff-removed-bg: #ffe6e6;
--text-diff-removed-color: #d73a49;
--text-diff-removed-decoration: line-through;
}
`

$3

If you need more control, target these classes. Note that all styles are scoped under .text-diff:

`css
.text-diff {
white-space: pre-wrap;
word-wrap: break-word;
/ Add your custom container styles here /
}

.text-diff .diff-added {
background-color: #e6ffed;
color: #1b7332;
font-weight: bold;
border-radius: 3px;
padding: 2px 4px;
}

.text-diff .diff-removed {
background-color: #ffe6e6;
color: #d73a49;
text-decoration: line-through;
border-radius: 3px;
padding: 2px 4px;
}
`

The available classes are:
- .text-diff - Main container (each component has this)
- .text-diff .diff-added - Added text spans
- .text-diff .diff-removed - Removed text spans

Note: The DiffHtml component uses the same CSS classes (.diff-added and .diff-removed) as the other components for consistent styling.

Development

Want to contribute or just mess around with the code? Here's how to get started.

$3

You'll need Node.js 18+ and npm (or yarn, whatever you prefer).

`bash
git clone https://github.com/sitefinitysteve/vue-diff-text.git
cd vue-diff-text
npm install
`

$3

The easiest way to develop is to use the demo app with hot reload:

`bash
cd demo
npm run dev
`

This spins up a dev server (usually at http://localhost:5173) where you can see all the components in action. The demo is set up with Vite aliases so it points directly to the source files - no build step needed.

Just edit the files in src/components/ and your changes will show up instantly.

If you want to test the built version instead:

`bash
npm run build
cd demo
npm run dev
`

$3

When you're ready to build:

`bash
npm run build
`

This creates the dist files (ES module, UMD bundle, TypeScript declarations, and CSS).

$3

The demo folder has a complete Vue 3 app for testing. It lets you:
- Edit text in real-time and see the diffs
- Compare all five diff types side by side
- Test different options
- Try it with longer text blocks

`bash
cd demo
npm install # First time only
npm run dev
`

$3

`
vue-diff-text/
├── src/
│ ├── components/ # The five diff components
│ └── index.ts # Main entry point
├── demo/ # Test app
├── dist/ # Built files
└── package.json
`

Available scripts:
- npm run dev - Start dev server
- npm run build - Build for production
- npm run preview - Preview built version

For the demo (run from demo/):
- npm run dev - Start demo server
- npm run build - Build demo
- npm run preview` - Preview built demo

Dependencies

- vue ^3.4.21 - Vue 3 framework
- diff ^5.2.0 - The core diffing library by @kpdecker that does all the heavy lifting
- diffblazer ^1.0.0 - Fast HTML diffing library used by the DiffHtml component

Contributing

Found a bug or want to add a feature? Pull requests are welcome!

1. Fork it
2. Create your feature branch
3. Make your changes
4. Test it in the demo app
5. Commit and push
6. Open a pull request

License

MIT © Steve McNiven-Scott

Thanks

Huge thanks to @kpdecker for creating and maintaining jsdiff. This library wouldn't exist without his excellent work on the underlying diffing algorithms.

Links

- GitHub repo
- Issues
- Vue 3 docs
- jsdiff docs
- v-code-diff - For code diffing with syntax highlighting