add quick start

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):