From 434c3b4a89a84fadc0b4e72d6493d3746fcadb83 Mon Sep 17 00:00:00 2001
From: Patrick Recher <3500621+patte@users.noreply.github.com>
Date: Wed, 24 Sep 2025 14:20:48 +0200
Subject: [PATCH] docs: svelte usage example

---
 docs/svelte.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 docs/svelte.md

diff --git a/docs/svelte.md b/docs/svelte.md
new file mode 100644
index 00000000..fdb622cb
--- /dev/null
+++ b/docs/svelte.md
@@ -0,0 +1,35 @@
+# How to render in svelte
+
+Here is an example of a reusable component for svelte 5:
+
+```svelte
+<script lang="ts">
+	import { create } from 'jsondiffpatch';
+	import { format as formatHtml } from 'jsondiffpatch/formatters/html';
+	import 'jsondiffpatch/formatters/styles/html.css';
+
+	let {
+		left,
+		right,
+		diffOptions = undefined,
+		hideUnchangedValues = false,
+	}: {
+		left: unknown;
+		right: unknown;
+		diffOptions?: Parameters<typeof create>[0] | undefined;
+		hideUnchangedValues?: boolean;
+	} = $props();
+
+	let htmlDiff = $derived.by(() => {
+		const jdp = create(diffOptions ?? {});
+		const delta = jdp.diff(left, right);
+		return formatHtml(delta, left);
+	});
+</script>
+
+<div class={`json-diff-container ${hideUnchangedValues ? 'jsondiffpatch-unchanged-hidden' : ''}`}>
+	<div class="jsondiffpatch-result" aria-label="Visual JSON diff">
+		{@html htmlDiff}
+	</div>
+</div>
+```