rc3

Author: metaory

README.md

@@ -1,6 +1,8 @@
 # json-diff-viewer
 
-Vanilla JS web component for side-by-side JSON diff visualization.
+**Compare JSON side-by-side, visually**
+
+A zero-dependency web component for visualizing JSON differences with synchronized scrolling, collapsible nodes, and syntax highlighting. Perfect for debugging, API comparisons, and configuration diffs
 
 ## Features
 
@@ -24,41 +26,41 @@ npm i json-diff-viewer-component
 ### ES Module
 
 ```js
-import 'json-diff-viewer-component'
+import "json-diff-viewer-component";
 
-const viewer = document.querySelector('json-diff-viewer')
-viewer.setData(leftObj, rightObj)
+const viewer = document.querySelector("json-diff-viewer");
+viewer.setData(leftObj, rightObj);
 ```
 
 ### HTML Attributes
 
 ```html
-<json-diff-viewer 
-  left='{"name":"foo"}' 
+<json-diff-viewer
+  left='{"name":"foo"}'
   right='{"name":"bar"}'
 ></json-diff-viewer>
 ```
 
 ### Properties
 
 ```js
-viewer.left = { name: 'foo' }
-viewer.right = { name: 'bar' }
+viewer.left = { name: "foo" };
+viewer.right = { name: "bar" };
 ```
 
 ### Method
 
 ```js
-viewer.setData(leftObj, rightObj)
+viewer.setData(leftObj, rightObj);
 ```
 
 ## Diff Types
 
-| Type | Color | Description |
-|------|-------|-------------|
-| Added | Green | Key exists only in right |
-| Removed | Red | Key exists only in left |
-| Modified | Yellow | Value changed |
+| Type         | Color  | Description                          |
+| ------------ | ------ | ------------------------------------ |
+| Added        | Green  | Key exists only in right             |
+| Removed      | Red    | Key exists only in left              |
+| Modified     | Yellow | Value changed                        |
 | Type Changed | Orange | Type mismatch (e.g. number → string) |
 
 ## Styling
@@ -93,7 +95,7 @@ json-diff-viewer {
 
   /* Layout */
   --radius: 12px;
-  --font: 'JetBrains Mono', monospace;
+  --font: "JetBrains Mono", monospace;
 }
 ```
 
@@ -130,4 +132,4 @@ npm run build    # build for production
 
 ## License
 
-MIT
+[MIT](LICENSE)

src/main.js

@@ -5,6 +5,6 @@ import "./style.css";
 const viewer = document.querySelector("json-diff-viewer");
 
 Promise.all([
-  fetch("/data/a1.json").then((r) => r.json()),
-  fetch("/data/a2.json").then((r) => r.json()),
+  fetch(`${import.meta.env.BASE_URL}data/a1.json`).then((r) => r.json()),
+  fetch(`${import.meta.env.BASE_URL}data/a2.json`).then((r) => r.json()),
 ]).then(([left, right]) => viewer.setData(left, right));

vite.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  base: '/json-diff-viewer-component/',
+});