Merge pull request #3758 from opral/update-docs

Update-docs

Author: samuelstroschein

README.md

@@ -7,10 +7,27 @@ HTML Diff is a simple way to generate and display diffs for any app UI.
 - 🎨 **Uses your styles**: Uses your existing CSS.
 - 🔧 **Framework Agnostic**: Works with React, Vue, Svelte, Angular, and more.
 
+Visit [the documentation](https://html-diff.lix.dev) for more information.
+
+## Installation
+
+```bash
+pnpm add @lix-js/html-diff
+```
+
+Optional default styling:
+
+```ts
+import "@lix-js/html-diff/default.css";
+```
+
+## Quickstart
+
 Assume you want to diff a table that's displayed to users. You render the before and after HTML, then pass both into the `renderHtmlDiff` function to get the diff:
 
 ```typescript
 import { renderHtmlDiff } from "@lix-js/html-diff";
+import "@lix-js/html-diff/default.css";
 
 const tableBefore = renderTable(beforeData);
 const tableAfter = renderTable(afterData);
@@ -22,7 +39,11 @@ const diff = renderHtmlDiff({
   // diffAttribute: 'data-id',
 });
 
-render(diff, document.getElementById("diff-container"));
-```
+// Vanilla render
+document.getElementById("diff-container")!.innerHTML = diff;
 
-For more information, [visit the documentation](https://html-diff.lix.dev).
+// React render
+function DiffView({ html }: { html: string }) {
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+}
+```

docs/guide/index.mdx

@@ -114,6 +114,32 @@ npm install @lix-js/html-diff
 
 ## Usage
 
+### Quickstart
+
+```ts
+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 }} />;
+}
+```
+
+Include the default styling if you want ready-made highlights:
+
+```ts
+import "@lix-js/html-diff/default.css";
+```
+
 ### Step 1: Add `data-diff-key` attributes
 
 Add unique [`data-diff-key`](/guide/attributes.html#data-diff-key) attributes to elements you want to track for changes. Use random, short identifiers (not semantic names):

docs/playground.mdx

@@ -1,7 +1,12 @@
 # Playground
 
 Try the HTML diff tool in real-time! Paste your "before" and "after" HTML to see how the diff would look.
-Make sure to include [`data-diff-key`](/guide/attributes.html#data-diff-key) attributes for elements.
+Make sure to include [`data-diff-key`](/guide/attributes.html#data-diff-key) attributes for elements you want to track changes for.
+
+You can also use these optional attributes to control diffing behavior:
+- [`data-diff-mode="words"`](/guide/attributes.html#words) - Enable word-level diffing within elements
+- [`data-diff-mode="element"`](/guide/attributes.html#element) - Use atomic element-level diffing
+- [`data-diff-show-when-removed`](/guide/attributes.html#data-diff-show-when-removed) - Show removed elements with strikethrough styling
 
 import DiffPlayground from "./components/diff-playground";
 

rspress.config.ts

@@ -133,7 +133,7 @@ export default defineConfig({
         icon: "github",
         mode: "link",
         content:
-          "https://github.com/opral/monorepo/tree/main/packages/lix/lix-html-diff",
+          "https://github.com/opral/monorepo/tree/main/packages/lix/html-diff",
       },
     ],
   },