html-diff

A lightweight JavaScript library to highlight changes between two HTML strings. It wraps inserted content with tags and deleted content with tags, making it ideal for visualizing diffs in rich text content.

---

🚀 Features

- 🔍 Detects and highlights changes between two HTML strings
- 🧩 Wraps insertions in and deletions in
- ⚡ No external dependencies
- ✅ Works in both browser and Node.js environments

🌐 Demo

You can see a live demo of html-diff in action here: Demo

📦 Installation

Install via npm:

``bash
npm install @benedicte/html-diff
`

🛠️ API

`ts
htmlDiff(htmlBefore: string, htmlAfter: string): string
`

Parameters:

- htmlBefore (_required_) – Original HTML string
- htmlAfter (_required_) – Updated HTML string

Returns the resulting HTML string with:

- Inserted content is wrapped in tags
- Deleted content is wrapped in tags

💡 Examples

`ts
import { htmlDiff } from '@benedicte/html-diff';

const before = '

Hello world!

';
const after = '

Hello brave new world

';
const result = htmlDiff(before, after);

console.log(result);
// Output:

Hello brave new world!

``

🔒 License

MIT

🤝 Contributing

Contributions, bug reports, and feature requests are welcome! Feel free to open an issue or submit a pull request.