diff --git a/src/lib/panzoom/Panzoom.svelte b/src/lib/panzoom/Panzoom.svelte
new file mode 100644
index 0000000..6f70812
--- /dev/null
+++ b/src/lib/panzoom/Panzoom.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { initPanzoom } from './util';
+</script>
+
+<div use:initPanzoom>
+	<slot />
+</div>
diff --git a/src/lib/panzoom/index.ts b/src/lib/panzoom/index.ts
new file mode 100644
index 0000000..4ee7eab
--- /dev/null
+++ b/src/lib/panzoom/index.ts
@@ -0,0 +1,2 @@
+export * from './util'
+export {default as Panzoom} from './Panzoom.svelte'
\ No newline at end of file
diff --git a/src/lib/panzoom/util.ts b/src/lib/panzoom/util.ts
new file mode 100644
index 0000000..3a30776
--- /dev/null
+++ b/src/lib/panzoom/util.ts
@@ -0,0 +1,23 @@
+import panzoom from 'panzoom';
+import type { PanZoom } from 'panzoom';
+import { writable } from 'svelte/store';
+
+export const pz = writable<PanZoom | undefined>(undefined);
+
+export function initPanzoom(node: HTMLElement) {
+  pz.set(
+    panzoom(node, {
+      bounds: false,
+      maxZoom: 10,
+      minZoom: 0.1,
+      zoomDoubleClickSpeed: 1,
+      enableTextSelection: true,
+      beforeMouseDown: (e) => {
+        const nodeName = (e.target as HTMLElement).nodeName;
+        return nodeName === 'P';
+      },
+      beforeWheel: (e) => e.altKey,
+      onTouch: (e) => e.touches.length > 1
+    })
+  );
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 91ea0d5..5872de0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,29 +1,7 @@
 <script lang="ts">
 	import img from '$lib/assets/000a.jpg';
 	import Button from '$lib/components/Button.svelte';
-	import panzoom from 'panzoom';
-	import type { PanZoom } from 'panzoom';
-	import { writable } from 'svelte/store';
-
-	export const pz = writable<PanZoom | undefined>(undefined);
-
-	function initPanzoom(node: any) {
-		pz.set(
-			panzoom(node, {
-				bounds: false,
-				maxZoom: 10,
-				minZoom: 0.1,
-				zoomDoubleClickSpeed: 1,
-				enableTextSelection: true,
-				beforeMouseDown: (e) => {
-					const nodeName = (e.target as HTMLElement).nodeName;
-					return nodeName === 'P';
-				},
-				beforeWheel: (e) => e.altKey,
-				onTouch: (e) => e.touches.length > 1
-			})
-		);
-	}
+	import { pz, Panzoom } from '$lib/panzoom';
 
 	function test() {
 		$pz?.moveTo(0, 0);
@@ -33,8 +11,8 @@
 <div>
 	<Button variant="primary" on:click={test}>Click</Button>
 
-	<div id="container" use:initPanzoom>
+	<Panzoom>
 		<p draggable="false">my selectable tex</p>
 		<img draggable="false" src={img} alt="a" />
-	</div>
+	</Panzoom>
 </div>