### Quickstart HTML Diff Usage (TypeScript)

Source: https://github.com/opral/html-diff/blob/main/docs/guide/index.mdx

A quickstart example demonstrating how to use `renderHtmlDiff` with simple HTML strings and includes importing the default CSS for styling diff highlights. It shows rendering the diff in vanilla JavaScript and provides a React component example.

```typescript
import { renderHtmlDiff } from "@lix-js/html-diff";
import "@lix-js/html-diff/default.css";

const beforeHtml = `<p data-diff-key="x9n4" class="my-text">The quick brown fox</p>`;
const afterHtml = `<p data-diff-key="x9n4" class="my-text">The fast red fox</p>`;

const diff = renderHtmlDiff({ beforeHtml, afterHtml });

// Vanilla
document.getElementById("diff-container")!.innerHTML = diff;

// React
function Diff({ html }: { html: string }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}
```

--------------------------------

### Install HTML Diff using pnpm

Source: https://github.com/opral/html-diff/blob/main/README.md

This command installs the HTML Diff library using the pnpm package manager. It's the first step to integrating HTML Diff into your project.

```bash
pnpm add @lix-js/html-diff
```

--------------------------------

### Install HTML Diff (Bash)

Source: https://github.com/opral/html-diff/blob/main/docs/guide/index.mdx

Command to install the HTML Diff library using npm. This is the first step to integrating the library into your project.

```bash
npm install @lix-js/html-diff
```

--------------------------------

### Showcase Component for HTML Diff Example

Source: https://github.com/opral/html-diff/blob/main/docs/guide/how-it-works.mdx

A React Showcase component demonstrating how HTML diffing works with `data-diff-key` attributes. It displays 'before' and 'after' HTML snippets and associated CSS for styling diffed elements.

```jsx
import Showcase from "../components/showcase";

<Showcase
  before={`<table class="pricing-table">
  <tr>
    <td data-diff-key="cost">$8</td>
    <td data-diff-key="price">$40</td>
  </tr>
</table>`}
  after={`<table class="pricing-table">
  <tr>
    <td data-diff-key="cost">$6</td>
    <td data-diff-key="price">$45</td>
  </tr>
</table>`}
  css={`
    .pricing-table {
      border-collapse: collapse;
    }
    .pricing-table td {
      border: 1px solid #ccc;
      padding: 8px;
    }
    [data-diff-status="modified"] {
      background-color: #fff3cd;
      color: #856404;
    }
  `}
/>
```

--------------------------------

### Add data-diff-key Attributes (HTML)

Source: https://github.com/opral/html-diff/blob/main/docs/guide/index.mdx

Examples of how to correctly and incorrectly add `data-diff-key` attributes to HTML elements. These keys are crucial for the diffing algorithm to identify and track changes between elements.

```html
<!-- ✅ Good: Random keys -->
<div data-diff-key="k7m2">User content</div>
<p data-diff-key="x9n4">Some text</p>

<!-- ❌ Avoid: Semantic names -->
<div data-diff-key="user-profile">...</div>
<p data-diff-key="description">...</p>
```

--------------------------------

### Custom CSS Styling for HTML Diff Results

Source: https://context7.com/opral/html-diff/llms.txt

Provides examples of how to style HTML diff outputs using CSS. You can either import the library's default styles or define your own custom styles by targeting the 'data-diff-status' attribute values (added, modified, removed).

```css
/* Import default styles */
@import "@lix-js/html-diff/default.css";

/* Or define custom styles */
[data-diff-status="added"] {
  color: #1f883d;
  background-color: #dafbe1;
  text-decoration: none;
}

[data-diff-status="modified"] {
  color: #f59e0b;
  background-color: #fff3cd;
  text-decoration: none;
}

[data-diff-status="removed"] {
  color: #d1242f;
  background-color: #ffebe9;
  text-decoration: line-through;
}

/* Word-level removed text with strikethrough */
[data-diff-mode="words"] [data-diff-status="removed"] {
  text-decoration: line-through;
}

/* Your existing component styles remain intact */
.card {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* Diff highlighting layers on top */
.card[data-diff-status="added"] {
  border-color: #1f883d;
}
```

--------------------------------

### Importing HTML and CSS for Rich Text Document Diff

Source: https://github.com/opral/html-diff/blob/main/docs/examples/simple-rich-text-document/index.mdx

Imports necessary HTML content (before and after states) and CSS styles for displaying and diffing a rich text document. The '?raw' import ensures the content is loaded as a string.

```javascript
import Showcase from "../../components/showcase";
import beforeHtml from "./before.html?raw";
import afterHtml from "./after.html?raw";
import showcaseCSS from "./styles.css?raw";
import defaultCSS from "../../../src/default.css?raw";

<Showcase
  before={beforeHtml}
  after={afterHtml}
  css={defaultCSS + "\n\n" + showcaseCSS}
/>
```

--------------------------------

### HTML Diff Styling Strategy Example

Source: https://github.com/opral/html-diff/blob/main/docs/guide/styling.md

Illustrates a styling strategy where components retain their original classes, and diff statuses are applied using `data-diff-status` attributes. This enables styling overrides using attribute selectors without affecting original classes.

```html
<!-- Original -->
<div class="card featured">Content</div>

<!-- After diff (added) -->
<div class="card featured" data-diff-status="added">Content</div>

<!-- After diff (modified) -->
<div class="card featured" data-diff-status="modified">Content</div>
```

--------------------------------

### HTML Diff Status Attributes Example

Source: https://github.com/opral/html-diff/blob/main/docs/guide/styling.md

Demonstrates how HTML Diff adds `data-diff-status` attributes to elements to indicate changes (added, modified, removed) while preserving original HTML structure, classes, and other attributes. This allows existing CSS to continue functioning.

```html
<button class="primary-btn large-size" id="submit-btn" data-diff-key="btn1">
  Submit Order
</button>

<button
  class="primary-btn large-size"
  id="submit-btn"
  data-diff-key="btn1"
  data-diff-status="modified"
>
  Complete Purchase
</button>
```

--------------------------------

### Importing HTML and CSS for Showcase

Source: https://github.com/opral/html-diff/blob/main/docs/examples/rich-text-document/index.mdx

Imports HTML content for 'before' and 'after' states, along with associated CSS, for use in a showcase component. The '?raw' suffix indicates that the file content should be imported as a string.

```javascript
import Showcase from "../../components/showcase";
import beforeHtml from "./before.html?raw";
import afterHtml from "./after.html?raw";
import showcaseCSS from "./styles.css?raw";
```

--------------------------------

### HTML Structure for Element Tracking with data-diff-key

Source: https://context7.com/opral/html-diff/llms.txt

Demonstrates the use of the 'data-diff-key' attribute for tracking elements between 'before' and 'after' HTML states. Elements with matching 'data-diff-key' values are compared, and changes are marked with 'data-diff-status' attributes.

```html
<!-- Before state -->
<table>
  <tr data-diff-key="row-1">
    <td data-diff-key="cell-1-1">$100</td>
    <td data-diff-key="cell-1-2">Active</td>
  </tr>
  <tr data-diff-key="row-2">
    <td data-diff-key="cell-2-1">$200</td>
    <td data-diff-key="cell-2-2">Pending</td>
  </tr>
</table>

<!-- After state -->
<table>
  <tr data-diff-key="row-1">
    <td data-diff-key="cell-1-1">$150</td>
    <td data-diff-key="cell-1-2">Active</td>
  </tr>
  <tr data-diff-key="row-2">
    <td data-diff-key="cell-2-1">$200</td>
    <td data-diff-key="cell-2-2">Completed</td>
  </tr>
</table>

<!-- Result: cell-1-1 and cell-2-2 get data-diff-status="modified" -->

```

--------------------------------

### HTML Diff vs. Custom Diff Approach Diagram

Source: https://github.com/opral/html-diff/blob/main/docs/guide/how-it-works.mdx

A Mermaid diagram illustrating two approaches to building diff views: HTML Diff (reusable) and Custom Diff (requires custom effort). It highlights the flow from source data to rendered HTML and the diffing logic.

```mermaid
graph TD
    subgraph "HTML Diff"
        UH_DocBefore[Before] --> UH_Renderer1[Rendered HTML]
        UH_DocAfter[After] --> UH_Renderer2[Rendered HTML]
        UH_Renderer1 --> UH_HTMLDiffer[HTML Diff Logic]
        UH_Renderer2 --> UH_HTMLDiffer
        UH_HTMLDiffer --> UH_DiffView[Diff View]
    end

    subgraph "Custom Diff"
        CB_DocBefore[Before] --> CB_Renderer1[Rendered HTML]
        CB_DocBefore --> CB_CustomDiffLogic[Custom Diff Logic]

        CB_DocAfter[After] --> CB_Renderer2[Rendered HTML]
        CB_DocAfter --> CB_CustomDiffLogic

        CB_CustomDiffLogic --> CB_Renderer[Custom Diff Renderer]
        CB_Renderer --> CB_DiffView[Diff View]
    end

    %% Styling
    style CB_CustomDiffLogic fill:orange,stroke:#333,stroke-width:2px,color:black
    style CB_Renderer fill:orange,stroke:#333,stroke-width:2px,color:black
    style UH_HTMLDiffer fill:lightgreen,stroke:#333,stroke-width:2px,color:black

    %% Lower opacity for unused Rendered HTML in Custom Diff but keep text black
    style CB_Renderer1 fill:#f9f9f9,stroke:#aaa,stroke-width:1px,color:black,opacity:0.5
    style CB_Renderer2 fill:#f9f9f9,stroke:#aaa,stroke-width:1px,color:black,opacity:0.5
```

--------------------------------

### Displaying Interactive Showcase Component

Source: https://github.com/opral/html-diff/blob/main/docs/guide/interactivity.mdx

This snippet shows how to import and render an `InteractiveShowcase` component, likely used for demonstrating interactive diff features.

```javascript
import InteractiveShowcase from "../components/interactive-showcase";

<InteractiveShowcase />
```

--------------------------------

### Programmatic Key Generation (TypeScript)

Source: https://github.com/opral/html-diff/blob/main/docs/guide/index.mdx

Demonstrates how to programmatically generate `data-diff-key` attributes within a React component. This approach ensures that keys are consistently generated based on data, allowing for accurate diffing when component data changes.

```typescript
function UserCard({ user }) {
  return (
    <div>
      <h3 data-diff-key={`user-${user.id}-name`}>{user.name}</h3>
      <p data-diff-key={`user-${user.id}-email`}>{user.email}</p>
    </div>
  );
}

// Same component with different data = matching keys for diffing
const beforeHtml = renderToString(<UserCard user={oldUser} />);
const afterHtml = renderToString(<UserCard user={newUser} />);
```

--------------------------------

### Render HTML Diff in Vanilla JS and React

Source: https://github.com/opral/html-diff/blob/main/docs/guide/index.mdx

Demonstrates how to insert the generated HTML diff into a web page using Vanilla JavaScript or within a React component. The diff HTML preserves original elements and styling, only adding `data-diff-status` attributes.

```javascript
// Vanilla JS
document.getElementById("diff-container")!.innerHTML = diff;
```

```javascript
// React
function DiffViewer({ diff }: { diff: string }) {
  return <div dangerouslySetInnerHTML={{ __html: diff }} />;
}
```

--------------------------------

### JavaScript Redirect to Rich Text Document Showcase

Source: https://github.com/opral/html-diff/blob/main/docs/examples/index.md

This JavaScript code snippet checks if the code is running in a browser environment (window is defined) and, if so, redirects the user to the '/showcase/rich-text-document/' page. It's a simple client-side navigation mechanism.

```javascript
if (typeof window !== 'undefined') {
    window.location.href = '/showcase/rich-text-document/';
  }
```

--------------------------------

### Rendering HTML Diff Showcase

Source: https://github.com/opral/html-diff/blob/main/docs/examples/rich-text-document/index.mdx

Renders a showcase component that displays the differences between two HTML states ('before' and 'after'), styled with provided CSS. This component is likely used to visualize the HTML diff.

```javascript
<Showcase before={beforeHtml} after={afterHtml} css={showcaseCSS} />
```

--------------------------------

### Render HTML Diff with @lix-js/html-diff

Source: https://context7.com/opral/html-diff/llms.txt

The main function to compare two HTML strings and return a new HTML string with diff annotations. It accepts 'beforeHtml', 'afterHtml', and an optional 'diffAttribute' parameter for custom element matching. It also supports rendering in various frameworks like React and vanilla JavaScript.

```typescript
import { renderHtmlDiff } from "@lix-js/html-diff";
import "@lix-js/html-diff/default.css";

// Basic usage - compare two HTML snippets
const beforeHtml = `
  <div>
    <p data-diff-key="p1">First paragraph</p>
  </div>
`;

const afterHtml = `
  <div>
    <p data-diff-key="p1">First paragraph</p>
    <p data-diff-key="p2">Second paragraph</p>
  </div>
`;

const diffHtml = renderHtmlDiff({ beforeHtml, afterHtml });
// Result: Second paragraph gets data-diff-status="added"

// Render in vanilla JS
document.getElementById("diff-container").innerHTML = diffHtml;

// Render in React
function DiffView({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

// Using custom diffAttribute
const customDiff = renderHtmlDiff({
  beforeHtml: `<p data-id="x">Hello</p>`,
  afterHtml: `<p data-id="x">Hello world</p>`,
  diffAttribute: "data-id"
});

```

--------------------------------

### Implementing Interactive Features with JavaScript

Source: https://github.com/opral/html-diff/blob/main/docs/guide/interactivity.mdx

This JavaScript code demonstrates how to generate an HTML diff, render it to the DOM, and then use DOM APIs to query for elements with specific diff statuses and keys. It shows how to attach event listeners for hover, click, and keyboard navigation, and how to store original data for comparison.

```javascript
// 1. Generate the diff
const diffResult = renderHtmlDiff({ beforeHtml, afterHtml });
// Or, if your HTML already includes stable IDs:
// const diffResult = renderHtmlDiff({ beforeHtml, afterHtml, diffAttribute: 'data-id' });

// 2. Render to DOM
container.innerHTML = diffResult;

// 3. Query for interactive elements
const modifiedElements = container.querySelectorAll(
  '[data-diff-status="modified"][data-diff-key]'
);
const addedElements = container.querySelectorAll(
  '[data-diff-status="added"][data-diff-key]'
);
const removedElements = container.querySelectorAll(
  '[data-diff-status="removed"][data-diff-key]'
);

// 4. Add any interactivity you want
modifiedElements.forEach((element) => {
  const diffKey = element.getAttribute("data-diff-key");

  // Add hover cards
  element.addEventListener("mouseenter", () => showHoverCard(diffKey));

  // Add click handlers
  element.addEventListener("click", () => showDetailedDiff(diffKey));

  // Add keyboard navigation
  element.setAttribute("tabindex", "0");
  element.addEventListener("keydown", handleKeyNavigation);

  // Add custom styling
  element.style.cursor = "pointer";
  element.style.position = "relative";
});

// 5. Store original data for comparisons
const originalData = extractOriginalData(beforeHtml, afterHtml);

function showHoverCard(diffKey) {
  const data = originalData[diffKey];
  // Create and position hover card showing data.before vs data.after
}

function showDetailedDiff(diffKey) {
  // Open modal or side panel with detailed change information
}

function handleKeyNavigation(event) {
  // Handle arrow keys to navigate between changes
  if (event.key === "ArrowRight") navigateToNextChange();
  if (event.key === "ArrowLeft") navigateToPreviousChange();
}
```

--------------------------------

### Generate and Render HTML Diff using TypeScript

Source: https://github.com/opral/html-diff/blob/main/README.md

This TypeScript code snippet demonstrates how to use the `renderHtmlDiff` function to generate a visual diff between two HTML strings. It also shows how to render the diff into a DOM element or a React component.

```typescript
import { renderHtmlDiff } from "@lix-js/html-diff";
import "@lix-js/html-diff/default.css";

const tableBefore = renderTable(beforeData);
const tableAfter = renderTable(afterData);

const diff = renderHtmlDiff({
  beforeHtml: tableBefore,
  afterHtml: tableAfter,
  // Optional: use a custom attribute to match elements
  // diffAttribute: 'data-id',
});

// Vanilla render
document.getElementById("diff-container")!.innerHTML = diff;

// React render
function DiffView({ html }: { html: string }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}
```

--------------------------------

### Importing Default HTML Diff Styles

Source: https://github.com/opral/html-diff/blob/main/docs/guide/styling.md

Shows two methods for including the default stylesheet provided with the html-diff package. This can be done directly in JavaScript imports or by linking the CSS file in HTML.

```javascript
import "@lix-js/html-diff/default.css";
```

```html
<link rel="stylesheet" href="/node_modules/@lix-js/html-diff/default.css" />
```

--------------------------------

### Enable Word-Level HTML Diff Granularity

Source: https://github.com/opral/html-diff/blob/main/docs/guide/index.mdx

Explains how to enable word-level highlighting for HTML diffs by adding the `data-diff-mode="words"` attribute to elements. This provides more granular diffs compared to element-level highlighting.

```html
<p data-diff-key="x9n4" data-diff-mode="words" class="my-text">The quick brown fox</p>
```

--------------------------------

### CSS for HTML Diff Highlighting

Source: https://github.com/opral/html-diff/blob/main/docs/guide/index.mdx

Provides CSS selectors to highlight added, modified, and removed elements in an HTML diff. These styles can be added to an existing application's CSS without affecting other elements.

```css
/* Your existing app styles */
.my-text {
  font-size: 24px;
  font-weight: bold;
  color: #2d3748;
  font-family: Georgia, serif;
  line-height: 1.4;
}

/* Only these selectors needed for diff highlighting */
[data-diff-status="added"] {
  color: #22c55e;
}
[data-diff-status="modified"] {
  color: #f59e0b;
}
[data-diff-status="removed"] {
  color: #ef4444;
}
```

--------------------------------

### React HTML Diff Integration

Source: https://context7.com/opral/html-diff/llms.txt

Integrates HTML Diff into a React application for comparing document versions. It defines functions to render documents with diff keys and compare HTML content using `renderHtmlDiff`. The output is rendered within a React component using `dangerouslySetInnerHTML`.

```typescript
import { renderHtmlDiff } from "@lix-js/html-diff";
import "@lix-js/html-diff/default.css";

// Define a render function that adds diff keys to trackable elements
function renderDocument(data: DocumentData): string {
  return (
    `<article data-diff-key="doc-${data.id}">
      <h1 data-diff-key="title-${data.id}" data-diff-mode="words">
        ${data.title}
      </h1>
      <p data-diff-key="summary-${data.id}" data-diff-mode="words">
        ${data.summary}
      </p>
      <table>
        <tbody data-diff-key="items-${data.id}">
          ${data.items.map(item => `
            <tr data-diff-key="item-${item.id}" data-diff-show-when-removed>
              <td>${item.name}</td>
              <td>${item.value}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
      <div class="metadata" data-diff-key="meta-${data.id}" data-diff-mode="element">
        <span>Last updated: ${data.updatedAt}</span>
        <span>Author: ${data.author}</span>
      </div>
    </article>`
  );
}

// Generate diff between two document versions
function compareVersions(before: DocumentData, after: DocumentData): string {
  const beforeHtml = renderDocument(before);
  const afterHtml = renderDocument(after);

  return renderHtmlDiff({ beforeHtml, afterHtml });
}

// React component for displaying the diff
function DocumentDiff({ beforeDoc, afterDoc }) {
  const diffHtml = compareVersions(beforeDoc, afterDoc);

  return (
    <div className="document-diff-container">
      <div dangerouslySetInnerHTML={{ __html: diffHtml }} />
    </div>
  );
}

// Usage
const oldVersion = {
  id: "doc1",
  title: "Project Proposal",
  summary: "Initial draft of the project",
  items: [
    { id: "1", name: "Budget", value: "$10,000" },
    { id: "2", name: "Timeline", value: "3 months" }
  ],
  updatedAt: "2024-01-01",
  author: "Alice"
};

const newVersion = {
  id: "doc1",
  title: "Project Proposal - Revised",
  summary: "Updated draft with feedback incorporated",
  items: [
    { id: "1", name: "Budget", value: "$15,000" },
    { id: "2", name: "Timeline", value: "4 months" },
    { id: "3", name: "Team Size", value: "5 people" }
  ],
  updatedAt: "2024-02-15",
  author: "Alice"
};

// Renders diff showing: title word changes, summary word changes,
// Budget and Timeline rows modified, Team Size row added,
// metadata block shown as removed/added pair

```

--------------------------------

### Render HTML Diff (TypeScript)

Source: https://github.com/opral/html-diff/blob/main/docs/guide/index.mdx

Generates an HTML diff by comparing two HTML strings. It uses `data-diff-key` attributes to match elements. The output is an HTML string that can be rendered directly or within a framework.

```typescript
import { renderHtmlDiff } from "@lix-js/html-diff";

const tableBefore = renderTable(beforeData);
const tableAfter = renderTable(afterData);

const diff = renderHtmlDiff({
  beforeHtml: tableBefore,
  afterHtml: tableAfter,
  // Optional: configure which attribute is used to match elements
  // diffAttribute: 'data-id',
});

render(diff, document.getElementById("diff-container"));
```

--------------------------------

### Import Default Styling for HTML Diff

Source: https://github.com/opral/html-diff/blob/main/README.md

This import statement includes the default CSS styles provided by the HTML Diff library. This is an optional step if you want to use the library's pre-defined styling.

```typescript
import "@lix-js/html-diff/default.css";
```

--------------------------------

### Displaying Removed Elements in HTML Diff with TypeScript

Source: https://context7.com/opral/html-diff/llms.txt

Illustrates how to use the 'data-diff-show-when-removed' attribute to ensure removed elements are still present in the diff output, marked with 'data-diff-status="removed"'. This is particularly useful for maintaining the structure of lists or tables where deletions need to be visually indicated.

```typescript
import { renderHtmlDiff } from "@lix-js/html-diff";

const beforeHtml = `
  <table>
    <tbody data-diff-key="table-body">
      <tr data-diff-key="row1" data-diff-show-when-removed>
        <td>Product A</td><td>$10</td>
      </tr>
      <tr data-diff-key="row2" data-diff-show-when-removed>
        <td>Product B</td><td>$20</td>
      </tr>
      <tr data-diff-key="row3" data-diff-show-when-removed>
        <td>Product C</td><td>$30</td>
      </tr>
    </tbody>
  </table>
`;

const afterHtml = `
  <table>
    <tbody data-diff-key="table-body">
      <tr data-diff-key="row1" data-diff-show-when-removed>
        <td>Product A</td><td>$10</td>
      </tr>
      <tr data-diff-key="row3" data-diff-show-when-removed>
        <td>Product C</td><td>$30</td>
      </tr>
    </tbody>
  </table>
`;

const result = renderHtmlDiff({ beforeHtml, afterHtml });
// Result: Product B row is shown with data-diff-status="removed"
// and contenteditable="false" to prevent editing

// CSS for styling removed rows:
const css = `
  [data-diff-status="removed"] {
    color: red;
    text-decoration: line-through;
    opacity: 0.7;
  }
`;
```

--------------------------------

### Generate HTML Diff with TypeScript

Source: https://github.com/opral/html-diff/blob/main/docs/guide/index.mdx

Compares two HTML strings and generates a diff. It requires the `renderHtmlDiff` function from the `@lix-js/html-diff` library. The output highlights modified and added elements with `data-diff-status` attributes.

```typescript
import { renderHtmlDiff } from "@lix-js/html-diff";

const beforeHtml = `<p data-diff-key="x9n4">The quick brown fox</p>`;
const afterHtml = `
  <p data-diff-key="x9n4">The fast red fox</p>
  <p data-diff-key="k7m2">The lazy dog sleeps</p>
`;

const diff = renderHtmlDiff({ beforeHtml, afterHtml });

// The diff now contains:
// - "The fast red fox" with data-diff-status="modified"
// - "The lazy dog sleeps" with data-diff-status="added"
```

--------------------------------

### Word-Level HTML Diffing with TypeScript

Source: https://context7.com/opral/html-diff/llms.txt

Demonstrates how to perform word-level HTML diffing using the renderHtmlDiff function. This mode highlights individual word changes by wrapping them in span elements with 'data-diff-status'. It's ideal for text-heavy content like paragraphs and headings.

```typescript
import { renderHtmlDiff } from "@lix-js/html-diff";

const beforeHtml = `
  <p data-diff-key="description" data-diff-mode="words">
    The quick brown fox jumps over the lazy dog.
  </p>
`;

const afterHtml = `
  <p data-diff-key="description" data-diff-mode="words">
    The quick red fox leaps over the lazy cat.
  </p>
`;

const result = renderHtmlDiff({ beforeHtml, afterHtml });
// Result: Individual words are highlighted
// "brown" wrapped with data-diff-status="removed"
// "red" wrapped with data-diff-status="added"
// "jumps" wrapped with data-diff-status="removed"
// "leaps" wrapped with data-diff-status="added"
// "dog" wrapped with data-diff-status="removed"
// "cat" wrapped with data-diff-status="added"

console.log(result);
// Output:
// <p data-diff-key="description" data-diff-mode="words">
//   The quick <span data-diff-status="removed">brown</span>
//   <span data-diff-status="added">red</span> fox
//   <span data-diff-status="removed">jumps</span>
//   <span data-diff-status="added">leaps</span> over the lazy
//   <span data-diff-status="removed">dog.</span>
//   <span data-diff-status="added">cat.</span>
// </p>
```

--------------------------------

### Atomic Element Diffing with data-diff-mode="element"

Source: https://context7.com/opral/html-diff/llms.txt

Illustrates the use of 'data-diff-mode="element"' for atomic element diffing. This mode is suitable for complex components where word-level diffing might disrupt the structure. It displays both the removed and added versions of the element with corresponding 'data-diff-status' attributes.

```typescript
import { renderHtmlDiff } from "@lix-js/html-diff";

const beforeHtml = `
  <div class="card" data-diff-key="my-card" data-diff-mode="element">
    <h3>Product A</h3>
    <p>Price: $99</p>
    <button>Buy Now</button>
  </div>
`;

const afterHtml = `
  <div class="card" data-diff-key="my-card" data-diff-mode="element">
    <h3>Product A - Sale!</h3>
    <p>Price: $79</p>
    <button>Buy Now</button>
  </div>
`;

const result = renderHtmlDiff({ beforeHtml, afterHtml });
// Result: Shows both versions - old card with data-diff-status="removed",
// new card with data-diff-status="added"

console.log(result);
// Output:
// <div>
//   <div class="card" data-diff-key="my-card" data-diff-mode="element"
//        data-diff-status="removed" contenteditable="false">
//     <h3>Product A</h3><p>Price: $99</p><button disabled="true"
//        style="pointer-events: none">Buy Now</button>
//   </div>
//   <div class="card" data-diff-key="my-card" data-diff-mode="element"
//        data-diff-status="added">
//     <h3>Product A - Sale!</h3><p>Price: $79</p><button>Buy Now</button>
//   </div>
// </div>

```

--------------------------------

### Selective Display of Removed Elements

Source: https://github.com/opral/html-diff/blob/main/docs/guide/attributes.mdx

Demonstrates how to selectively apply `data-diff-show-when-removed` to specific elements within a group, allowing some removed elements to be displayed with strikethrough while others are hidden. This provides fine-grained control over diff output.

```html
<tbody data-diff-key="table-body">
  <tr data-diff-key="safe-row" data-diff-show-when-removed>
    <td>This row shows when removed</td>
  </tr>
  <tr data-diff-key="unsafe-row">
    <td>This row doesn't show when removed</td>
  </tr>
</tbody>
```

--------------------------------

### Render HTML Diff View with Styling (React)

Source: https://github.com/opral/html-diff/blob/main/docs/guide/interactivity.mdx

This React component renders a visual representation of HTML differences. It includes distinct sections for 'before' and 'after' content, each with specific styling for borders, padding, font, and background. The component relies on `hoverCard` prop which should contain 'before' and 'after' properties.

```jsx
function DiffView({
  hoverCard,
}) {
  return (
    <div>
      {hoverCard && (
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: "16px",
            padding: "16px",
            border: "1px solid #e2e8f0",
            borderRadius: "8px",
            background: "#ffffff",
          }}
        >
          <div>
            <h4
              style={{
                margin: "0 0 6px 0",
                fontSize: "11px",
                color: "#6b7280",
                textTransform: "uppercase",
              }}
            >
              BEFORE
            </h4>
            <div
              style={{
                background: "#f8fafc",
                border: "1px solid #e2e8f0",
                borderRadius: "4px",
                padding: "8px 10px",
                fontFamily: "monospace",
                fontSize: "13px",
              }}
            >
              {hoverCard.before}
            </div>
          </div>
          <div>
            <h4
              style={{
                margin: "0 0 6px 0",
                fontSize: "11px",
                color: "#6b7280",
                textTransform: "uppercase",
              }}
            >
              AFTER
            </h4>
            <div
              style={{
                background: "#f8fafc",
                border: "1px solid #e2e8f0",
                borderRadius: "4px",
                padding: "8px 10px",
                fontFamily: "monospace",
                fontSize: "13px",
              }}
            >
              {hoverCard.after}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
```

--------------------------------

### CSS Specificity for Diff Styling

Source: https://github.com/opral/html-diff/blob/main/docs/guide/styling.md

Demonstrates how attribute selectors for `data-diff-status` have the same specificity as class selectors, allowing normal cascade rules to apply. This ensures that diff styles can override conflicting properties from existing styles.

```css
/* Your existing styles work as normal */
.card {
  padding: 20px;
  border: 1px solid #ccc;
}
.featured {
  border-color: gold;
}

/* Diff styles override conflicting properties */
[data-diff-status="modified"] {
  color: orange;
} /* This color wins */
[data-diff-status="added"] {
  color: green;
} /* This color wins */
[data-diff-status="removed"] {
  color: red;
} /* This color wins */
```

--------------------------------

### Showcase Removed Elements Without data-diff-show-when-removed

Source: https://github.com/opral/html-diff/blob/main/docs/guide/attributes.mdx

This showcase demonstrates the HTML Diff component's behavior when the `data-diff-show-when-removed` attribute is omitted. Removed rows in the table are not rendered in the final output, showing only the remaining and modified elements.

```html
<Showcase
  before="<table><tbody data-diff-key='table-body'><tr data-diff-key='row1'><td>Product A</td><td>$10</td></tr><tr data-diff-key='row2'><td>Product B</td><td>$20</td></tr><tr data-diff-key='row3'><td>Product C</td><td>$30</td></tr></tbody></table>"
  after="<table><tbody data-diff-key='table-body'><tr data-diff-key='row1'><td>Product A</td><td>$10</td></tr><tr data-diff-key='row3'><td>Product C</td><td>$30</td></tr></tbody></table>"
  css="table { border-collapse: collapse; } td { border: 1px solid #ccc; padding: 8px; } [data-diff-status='added'] { color: green; } [data-diff-status='modified'] { color: orange; } [data-diff-status='removed'] { color: red; }"
/>
```

--------------------------------

### HTML: Track Element Changes with data-diff-key

Source: https://github.com/opral/html-diff/blob/main/docs/guide/attributes.mdx

The `data-diff-key` attribute is essential for uniquely identifying elements between 'before' and 'after' states, enabling the diff algorithm to track changes. It is required for all elements whose modifications you want to monitor.

```html
<p data-diff-key="kx8m">Hello World</p>
```

```html
<!-- Before -->
<div>
  <p data-diff-key="ixn4">First paragraph</p>
</div>

<!-- After -->
<div>
  <p data-diff-key="ixn4">First paragraph</p>
  <p data-diff-key="zm7q">Second paragraph</p>
</div>
```

```html
<!-- Before -->
<div>
  <p data-diff-key="bw5c">Keep this</p>
  <p data-diff-key="ft9x">Remove this</p>
</div>

<!-- After -->
<div>
  <p data-diff-key="bw5c">Keep this</p>
</div>
```

--------------------------------

### HTML Structure with Diff Attributes

Source: https://github.com/opral/html-diff/blob/main/docs/guide/interactivity.mdx

This HTML snippet illustrates the structure of an element after the diff engine has processed it. It includes `data-diff-key`, `data-diff-mode`, and `data-diff-status` attributes, marking changes within the content.

```html
<p data-diff-key="intro" data-diff-mode="words" data-diff-status="modified">
  Welcome to our <span data-diff-status="removed">comprehensive</span>
  <span data-diff-status="added">updated</span> guide for new
  <span data-diff-status="removed">users</span
  ><span data-diff-status="added">developers</span>.
</p>
```

--------------------------------

### Interactive HTML Diff Component in React

Source: https://github.com/opral/html-diff/blob/main/docs/guide/interactivity.mdx

This React component utilizes the renderHtmlDiff function from @lix-js/html-diff to display differences between two HTML strings. It implements interactive hover cards that appear when a user hovers over modified elements, showing the 'before' and 'after' values. The component manages state for the hover card and uses useEffect to perform the diffing and attach event listeners.

```javascript
import { useRef, useEffect, useState } from "react";
import { renderHtmlDiff } from "@lix-js/html-diff";

export function InteractiveHtmlDiff() {
  const ref = useRef(null);
  const [hoverCard, setHoverCard] = useState(null);

  // Define your before and after HTML
  const beforeHtml = `
    <table class="pricing-table">
      <tbody>
        <tr>
          <td>Monthly Price</td>
          <td data-diff-key="basic-price">$9</td>
          <td data-diff-key="pro-price">$29</td>
        </tr>
      </tbody>
    </table>
  `;

  const afterHtml = `
    <table class="pricing-table">
      <tbody>
        <tr>
          <td>Monthly Price</td>
          <td data-diff-key="basic-price">$12</td>
          <td data-diff-key="pro-price">$39</td>
        </tr>
      </tbody>
    </table>
  `;

  // Store original values for hover cards
  const originalData = {
    "basic-price": { before: "$9", after: "$12" },
    "pro-price": { before: "$29", after: "$39" },
  };

  useEffect(() => {
    if (!ref.current) return;

    // Generate diff and render
    const diffResult = renderHtmlDiff({ beforeHtml, afterHtml });
    ref.current.innerHTML = diffResult;

    // Add event listeners to modified elements
    const modifiedElements = ref.current.querySelectorAll(
      '[data-diff-status="modified"][data-diff-key]'
    );

    const handleMouseEnter = (e) => {
      const element = e.target;
      const diffKey = element.getAttribute("data-diff-key");

      if (!diffKey || !originalData[diffKey]) return;

      const rect = element.getBoundingClientRect();
      const data = originalData[diffKey];

      setHoverCard({
        x: rect.left,
        y: rect.bottom + 8,
        diffKey,
        before: data.before,
        after: data.after,
      });
    };

    const handleMouseLeave = () => {
      setHoverCard(null);
    };

    modifiedElements.forEach((element) => {
      element.addEventListener("mouseenter", handleMouseEnter);
      element.addEventListener("mouseleave", handleMouseLeave);
    });

    return () => {
      modifiedElements.forEach((element) => {
        element.removeEventListener("mouseenter", handleMouseEnter);
        element.removeEventListener("mouseleave", handleMouseLeave);
      });
    };
  }, []);

  return (
    <div style={{ position: "relative" }}>
      {/* CSS Styles */}
      <style>{`
        .pricing-table {
          border-collapse: collapse;
          width: 100%;
          font-family: system-ui, sans-serif;
        }
        .pricing-table td {
          border: 1px solid #e5e7eb;
          padding: 12px 16px;
        }
        [data-diff-status="modified"] {
          color: #f59e0b;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        [data-diff-status="modified"]:hover {
          background-color: rgba(245, 158, 11, 0.1);
          transform: scale(1.02);
        }
      `}</style>

      {/* Diff Container */}
      <div ref={ref} />

      {/* Hover Card */}
      {hoverCard && (
        <div
          style={{
            position: "fixed",
            left: hoverCard.x,
            top: hoverCard.y,
            background: "white",
            border: "1px solid #e5e7eb",
            borderRadius: "8px",
            boxShadow: "0 10px 25px rgba(0, 0, 0, 0.15)",
            maxWidth: "300px",
            zIndex: 9999,
            fontSize: "14px",
            pointerEvents: "none",
          }}
        >
          {/* Header */}
          <div
            style={{
              padding: "12px 16px",
              borderBottom: "1px solid #e5e7eb",
              display: "flex",
              justifyContent: "space-between",
              background: "#f9fafb",
              borderRadius: "8px 8px 0 0",
            }}
          >
            <span
              style={{
                background: "#fef3c7",
                color: "#92400e",
                padding: "3px 8px",
                borderRadius: "12px",
                fontSize: "10px",
                fontWeight: 600,
                textTransform: "uppercase",
              }}
            >
              MODIFIED
            </span>
            <span
              style={{
                fontFamily: "monospace",
                fontSize: "11px",
                color: "#6b7280",
              }}
            >
              {hoverCard.diffKey}
            </span>
          </div>

          {/* Content */}
          <div style={{ padding: "16px" }}>
            <div style={{ marginBottom: "12px" }}>
              <h4
                style={{
                  margin: "0 0 6px 0",
                  fontSize: "11px",
                  color: "#6b7280",
                  textTransform: "uppercase",
                }}
              >
                BEFORE
              </h4>
              <div
                style={{
                  background: "#f8fafc",

```

--------------------------------

### Avoid data-diff-mode='words' on Complex Components

Source: https://github.com/opral/html-diff/blob/main/docs/guide/attributes.mdx

Demonstrates how using `data-diff-mode="words"` on complex HTML components can break the layout by inserting unnecessary `<span>` elements. It's recommended to use `data-diff-mode="element"` or omit the mode for such components.

```html
<!-- ❌ DON'T: Using words mode on complex component -->
<div class="card" data-diff-key="jx9w" data-diff-mode="words">
  <h3>Old Title</h3>
  <p>Some content here</p>
</div>

<!-- After -->
<div class="card" data-diff-key="jx9w" data-diff-mode="words">
  <h3>New Title</h3>
  <p>Different content here</p>
</div>
```

--------------------------------

### Custom CSS for HTML Diff Statuses

Source: https://github.com/opral/html-diff/blob/main/docs/guide/styling.md

Provides CSS rules to override the default styling for elements with `data-diff-status` attributes. This allows for custom themes and branding by targeting added, modified, and removed elements.

```css
[data-diff-status="added"] {
  color: #080;
  background: #efe;
}
[data-diff-status="modified"] {
  color: #f60;
  background: #ffc;
}
[data-diff-status="removed"] {
  color: #b00;
  background: #fee;
}
```

--------------------------------

### Show Removed Table Rows with data-diff-show-when-removed

Source: https://github.com/opral/html-diff/blob/main/docs/guide/attributes.mdx

Illustrates the use of the `data-diff-show-when-removed` attribute to display removed elements, such as table rows, with strikethrough styling in the diff result. This is useful for elements that can be safely re-inserted without breaking layout.

```html
<!-- Before -->
<tbody data-diff-key="table-body">
  <tr data-diff-key="row1" data-diff-show-when-removed>
    <td>Product A</td>
    <td>$10</td>
  </tr>
  <tr data-diff-key="row2" data-diff-show-when-removed>
    <td>Product B</td>
    <td>$20</td>
  </tr>
  <tr data-diff-key="row3" data-diff-show-when-removed>
    <td>Product C</td>
    <td>$30</td>
  </tr>
</tbody>

<!-- After -->
<tbody data-diff-key="table-body">
  <tr data-diff-key="row1" data-diff-show-when-removed>
    <td>Product A</td>
    <td>$10</td>
  </tr>
  <tr data-diff-key="row3" data-diff-show-when-removed>
    <td>Product C</td>
    <td>$30</td>
  </tr>
</tbody>
```

--------------------------------

### HTML: Control Diffing Behavior with data-diff-mode

Source: https://github.com/opral/html-diff/blob/main/docs/guide/attributes.mdx

The `data-diff-mode` attribute offers granular control over how changes within an element are diffed. Options include 'element' for atomic diffing of the entire element and 'words' for word-level diffing.

```html
<!-- Before -->
<div class="card" data-diff-key="my-card" data-diff-mode="element">
  <h3>Old Title</h3>
  <p>Old content here</p>
</div>

<!-- After -->
<div class="card" data-diff-key="my-card" data-diff-mode="element">
  <h3>New Title</h3>
  <p>New content here</p>
</div>
```

```html
<!-- Without data-diff-mode (atomic block diffing) -->
<!-- Before -->
<p data-diff-key="qr8n">Hello there</p>

<!-- After -->
<p data-diff-key="qr8n">Hello world</p>
```

```html
<!-- With data-diff-mode="words" (granular word diffing) -->
<!-- Before -->
<p data-diff-key="kv3m" data-diff-mode="words">Hello there</p>

<!-- After -->
<p data-diff-key="kv3m" data-diff-mode="words">Hello world</p>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.