### Basic Stage, Layer, and Rect Setup

Source: https://github.com/konvajs/svelte-konva/blob/master/README.md

A minimal example demonstrating how to set up a Stage, Layer, and a Rect component in svelte-konva.

```svelte
<script>
  import { Stage, Layer, Rect } from 'svelte-konva';
</script>

<Stage width={1000} height={1000}>
  <Layer>
    <Rect x={100} y={100} width={400} height={200} fill="blue" />
  </Layer>
</Stage>
```

--------------------------------

### Install svelte-konva and konva

Source: https://github.com/konvajs/svelte-konva/blob/master/README.md

Install the necessary packages using npm.

```bash
npm i svelte-konva konva
```

--------------------------------

### Basic Stage, Layer, and Rect Setup in Svelte

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Demonstrates the basic setup of a Stage, Layer, and Rect component in svelte-konva. The Stage component manages the canvas container and exposes its Konva instance via bind:this. It also shows how to handle click events on the stage.

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { Stage, Layer, Rect } from 'svelte-konva';
  import type { KonvaMouseEvent } from 'svelte-konva';

  let stageRef: ReturnType<typeof Stage> | undefined = $state();

  onMount(() => {
    // node is immediately available — no tick() needed
    console.log('Stage size:', stageRef!.node.width(), stageRef!.node.height());
    const dataUrl = stageRef!.node.toDataURL({ mimeType: 'image/png' });
    console.log('Canvas snapshot:', dataUrl.substring(0, 40));
  });

  function handleStageClick(e: KonvaMouseEvent) {
    console.log('Clicked at', e.target.getType());
  }
</script>

<Stage
  width={800}
  height={600}
  bind:this={stageRef}
  onclick={handleStageClick}
  divWrapperProps={{ id: 'canvas-container', class: 'my-canvas' }}
>
  <Layer>
    <Rect x={50} y={50} width={200} height={100} fill="steelblue" />
  </Layer>
</Stage>
```

--------------------------------

### Svelte Konva v1 Config Prop Reactivity Example (Svelte 5 Runes)

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

In v1, individual props replace the single `config` object, enabling fine-grained reactivity. Changes by Konva no longer 'leak' into parent state unless explicitly bound. This example demonstrates the new behavior with Svelte 5 runes.

```svelte
<script>
	import { Stage, Layer, Rect } from 'svelte-konva';

	let myX = $state(100);
	let myY = $state(100);

	$effect(() => {
		console.log('x changed:', config.x);
	});
</script>

<Stage width={window.innerWidth} height={window.innerHeight}>
	<Layer>
		<Rect x={myX} y={myY} width={400} height={200} fill="blue" draggable />
	</Layer>
</Stage>
```

--------------------------------

### Svelte Konva v0 Config Prop Reactivity Example

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

In v0, the `config` prop was a single object. Changes made by Konva (e.g., on dragend) would 'leak' into the parent's object, causing issues with Svelte's reactivity unless the prop was bound. This example shows the old behavior.

```svelte
<script>
	import { Stage, Layer, Rect } from 'svelte-konva';

	let myConfig = { x: 100, y: 100, width: 400, height: 200, fill: 'blue', draggable: true };

	$: console.log('x changed:', config.x);
</script>

<Stage config={{ width: window.innerWidth, height: window.innerHeight }}>
	<Layer>
		<Rect config={myConfig} />
	</Layer>
</Stage>
```

--------------------------------

### Animate Sprites with Sprite Sheet in Svelte Konva

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Use the `Sprite` component with an `image`, `animations` map, `animation` name, and `frameRate`. Load the image using `onMount` and start the animation with `spriteRef?.node.start()`.

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { Stage, Layer, Sprite } from 'svelte-konva';

  let spriteSheet: HTMLImageElement | undefined = $state();
  let spriteRef: ReturnType<typeof Sprite> | undefined;

  const animations = {
    idle:   [0,   0, 64, 64,  64,  0, 64, 64, 128,  0, 64, 64],
    walk:   [0,  64, 64, 64,  64, 64, 64, 64, 128, 64, 64, 64],
    attack: [0, 128, 64, 64,  64,128, 64, 64]
  };

  onMount(() => {
    const img = new window.Image();
    img.src = '/assets/spritesheet.png';
    img.onload = () => {
      spriteSheet = img;
      // Start the animation loop once the sprite is mounted
      setTimeout(() => spriteRef?.node.start(), 50);
    };
  });
</script>

<Stage width={400} height={300}>
  <Layer>
    {#if spriteSheet}
      <Sprite
        bind:this={spriteRef}
        x={168} y={118}
        image={spriteSheet}
        animation="idle"
        {animations}
        frameRate={7}
        frameIndex={0}
      />
    {/if}
  </Layer>
</Stage>
```

--------------------------------

### Multiple Layers with Shapes in Svelte

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Illustrates the use of multiple Layer components within a Stage to manage different drawing areas and z-ordering. This example shows a background layer with a Rect and a foreground layer with a Circle and another Rect.

```svelte
<script lang="ts">
  import { Stage, Layer, Rect, Circle } from 'svelte-konva';

  let layerRef: ReturnType<typeof Layer> | undefined;

  function exportLayer() {
    // Access the underlying Konva.Layer node
    console.log('Layer children count:', layerRef!.node.children?.length);
  }
</script>

<Stage width={800} height={600}>
  <!-- Background layer -->
  <Layer>
    <Rect x={0} y={0} width={800} height={600} fill="#f0f0f0" />
  </Layer>

  <!-- Foreground layer -->
  <Layer bind:this={layerRef}>
    <Circle x={200} y={200} radius={80} fill="coral" />
    <Rect x={400} y={150} width={150} height={100} fill="mediumseagreen" />
  </Layer>
</Stage>
```

--------------------------------

### Svelte Konva Event Handler Syntax Change

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

In v1, the `on:event` syntax for Konva events is deprecated. Use the `on<KonvaEventName>` callback prop syntax instead. This example shows the migration from the old to the new syntax.

```diff
<Rect
     x={100} y={100} width={400} height={200} fill="blue"
-    on:pointerclick={handleClick}
+    onpointerclick={handleClick}
/>
```

--------------------------------

### Attach Transformer to Shapes in Svelte Konva

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Use `bind:this` to get the Transformer instance and `transformer.node.nodes([...])` to attach it to target shapes. Deselect shapes by clicking on the stage.

```svelte
<script lang="ts">
  import { Stage, Layer, Rect, Circle, Transformer } from 'svelte-konva';
  import type { KonvaPointerEvent } from 'svelte-konva';

  let transformer: ReturnType<typeof Transformer> | undefined;
  let rectRef: ReturnType<typeof Rect> | undefined;
  let circleRef: ReturnType<typeof Circle> | undefined;
  let selected: string | null = $state(null);

  function selectShape(name: string, ref: any) {
    selected = name;
    if (transformer && ref) {
      transformer.node.nodes([ref.node]);
    }
  }

  function deselect(e: KonvaPointerEvent) {
    if (e.target.getType() === 'Stage') {
      selected = null;
      transformer?.node.nodes([]);
    }
  }
</script>

<Stage width={800} height={600} onpointerdown={deselect}>
  <Layer>
    <Rect
      x={80} y={80} width={160} height={100} fill="steelblue" draggable
      bind:this={rectRef}
      onpointerclick={() => selectShape('rect', rectRef)}
    />
    <Circle
      x={400} y={200} radius={70} fill="coral" draggable
      bind:this={circleRef}
      onpointerclick={() => selectShape('circle', circleRef)}
    />
    <Transformer bind:this={transformer} rotateEnabled keepRatio={false} />
  </Layer>
</Stage>
```

--------------------------------

### Svelte Konva Event Payload Change

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

The event payload structure has changed in v1. Konva event data is now directly accessible, not wrapped in `e.detail`. This example illustrates how to access the event type in the handler function.

```diff
function handleClick(e) {
-    const konvaEvent = e.detail;
-    window.alert(`Clicked on rectangle: ${konvaEvent.type}`);
+    window.alert(`Clicked on rectangle: ${e.type}`);
}
```

--------------------------------

### Load and Display an Image

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Demonstrates loading an image using `onMount` and displaying it on the canvas. Requires importing `onMount` and Konva components. The image source must be accessible.

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { Stage, Layer, Image } from 'svelte-konva';

  let imgElement: HTMLImageElement | undefined = $state();

  onMount(() => {
    const img = new window.Image();
    img.src = '/assets/photo.jpg';
    img.onload = () => { imgElement = img; };
  });
</script>

<Stage width={800} height={600}>
  <Layer>
    {#if imgElement}
      <Image
        x={100}
        y={50}
        image={imgElement}
        width={300}
        height={200}
        cornerRadius={12}
        shadowBlur={20}
        draggable
      />
    {/if}
  </Layer>
</Stage>
```

--------------------------------

### Implement Freehand Drawing with Lines

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Shows how to create a freehand drawing tool using the Line component. It captures pointer events on the Stage to draw continuous lines. Requires Stage, Layer, and Line imports.

```svelte
<script lang="ts">
  import { Stage, Layer, Line } from 'svelte-konva';

  // Freehand drawing example
  let strokes = $state<Array<{ points: number[]; stroke: string; strokeWidth: number }>>([]);
  let isDrawing = false;
  let stageRef: any = $state();

  function startDraw() {
    if (!stageRef) return;
    const pos = stageRef.node.getPointerPosition()!;
    strokes.push({ points: [pos.x, pos.y, pos.x, pos.y], stroke: 'black', strokeWidth: 5 });
    strokes = strokes;
    isDrawing = true;
  }

  function continueDraw() {
    if (!isDrawing || !stageRef) return;
    const pos = stageRef.node.getPointerPosition()!;
    (strokes[strokes.length - 1].points as number[]).push(pos.x, pos.y);
    strokes = strokes;
  }

  function stopDraw() { isDrawing = false; }
</script>

<Stage width={800} height={600} bind:this={stageRef}
  onpointerdown={startDraw} onpointermove={continueDraw} onpointerup={stopDraw}>
  <Layer>
    {#each strokes as stroke}
      <Line
        points={stroke.points}
        stroke={stroke.stroke}
        strokeWidth={stroke.strokeWidth}
        lineCap="round"
        lineJoin="round"
        tension={0.5}
      />
    {/each}
  </Layer>
</Stage>
```

--------------------------------

### Render and Interact with a Circle

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Demonstrates rendering a draggable circle with dynamic fill color changes on click. Requires importing Stage, Layer, and Circle from svelte-konva.

```svelte
<script lang="ts">
  import { Stage, Layer, Circle } from 'svelte-konva';
  import type { KonvaPointerEvent } from 'svelte-konva';

  let color = $state('tomato');

  function handleClick(e: KonvaPointerEvent) {
    color = color === 'tomato' ? 'gold' : 'tomato';
  }
</script>

<Stage width={600} height={400}>
  <Layer>
    <Circle
      x={300}
      y={200}
      radius={80}
      fill={color}
      stroke="black"
      strokeWidth={3}
      draggable
      onpointerclick={handleClick}
    />
  </Layer>
</Stage>
```

--------------------------------

### Bind Individual Props from Config Object

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

Migrate from `bind:config` to spreading the config object and binding individual properties like `x` and `y`. This allows for fine-grained reactivity and clearer control over which properties are two-way bound.

```html
<script>
  let config = $state({
    x: 100,
    y: 100,
    width: 400,
    height: 200,
    fill: 'blue',
    draggable: true
  });
</script>

<Rect
-      bind:config
+      {...config}
+      bind:x={config.x}
+      bind:y={config.y}
/>
```

--------------------------------

### Dynamically Import svelte-konva Stage in SvelteKit

Source: https://github.com/konvajs/svelte-konva/blob/master/README.md

A recommended approach for larger projects to dynamically import svelte-konva components on the client-side only. This prevents errors during SSR or prerendering.

```html
<script>
  import { Stage, Layer, Rect } from 'svelte-konva';
  import OtherComponentUsingSvelteKonva from './OtherComponentUsingSvelteKonva.svelte';

  const rectangleConfig = {
    /*...*/
  };
</script>

<Stage width="{1000}" height="{1000}">
  <Layer>
    <Rect {...rectangleConfig} />

    <OtherComponentUsingSvelteKonva />
  </Layer>
</Stage>
```

```html
<script>
  import { browser } from '$app/environment';

  const MyCanvas = browser
    ? import('./MyCanvas.svelte').then((module) => module.default)
    : new Promise(() => {});
</script>

<div>
  <p>This is my fancy server side rendered (or prerendered) page.</p>

  <!-- Use your dynamically imported svelte-konva canvas component once it becomes defined, you can pass any component props as usual -->
  {#await MyCanvas}
  <p>Loading...</p>
  {:then Component}
  <Component someProp="someString" />
  {:catch error}
  <p>Something went wrong: {error.message}</p>
  {/await}
</div>
```

--------------------------------

### Create Tooltip Labels with Label and Tag in Svelte Konva

Source: https://context7.com/konvajs/svelte-konva/llms.txt

The `Label` component must contain `Tag` first, followed by `Text`. Configure `Tag` for background and pointer, and `Text` for the label content.

```svelte
<script lang="ts">
  import { Stage, Layer, Label, Tag, Text } from 'svelte-konva';
</script>

<Stage width={600} height={400}>
  <Layer>
    <Label x={200} y={150} opacity={0.85} draggable>
      <Tag
        fill="black"
        pointerDirection="down"
        pointerWidth={12}
        pointerHeight={12}
        lineJoin="round"
        shadowBlur={8}
        shadowColor="rgba(0,0,0,0.3)"
      />
      <Text
        text="Hello from Label!"
        fontSize={16}
        fontFamily="Arial"
        fill="white"
        padding={10}
      />
    </Label>
  </Layer>
</Stage>
```

--------------------------------

### Spread Old Config Object to Individual Props

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

Use the spread syntax `{...config}` to pass properties from an existing config object to individual props. This is a common pattern for migrating from the v0 `config` prop.

```html
<script>
  let config = {
    x: 100,
    y: 100,
    width: 400,
    height: 200,
    fill: 'blue'
  };
</script>

<Rect
-      {config}
+      {...config}
/>
```

--------------------------------

### Wrap svelte-konva Components in Browser Checks

Source: https://github.com/konvajs/svelte-konva/blob/master/README.md

Use this method for small projects to conditionally render svelte-konva components only in the browser. Ensure '$app/environment' is imported.

```html
<script>
  import { browser } from '$app/environment';
  import { Stage, Layer, Rect } from 'svelte-konva';
</script>

{#if browser}
<Stage width="{1000}" height="{1000}">
  <Layer>
    <Rect x="{100}" y="{100}" width="{400}" height="{200}" fill="blue" />
  </Layer>
</Stage>
{/if}
```

--------------------------------

### Accessing Konva Stage Node Immediately

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

The Konva `node` is now available immediately after component instantiation using `bind:this`. No need to wait for `tick()`.

```svelte
<script>
	import { onMount } from 'svelte';
	import { Stage, Layer, Rect } from 'svelte-konva';

	let stage;

	onMount(async () => {
		const json = stage.node.toJSON();
		window.alert(`Stage as JSON: ${json}`);
	});
</script>

<Stage width={1000} height={1000} bind:this={stage}>
	<Layer>
		<Rect x={100} y={100} width={400} height={200} fill="blue" />
	</Layer>
</Stage>
```

--------------------------------

### Handling Konva Events with Callbacks

Source: https://github.com/konvajs/svelte-konva/blob/master/README.md

Listen to Konva events using callback props named `on{konva event name}`. All Konva events are supported.

```svelte
<script>
  import { Stage, Layer, Rect } from 'svelte-konva';

  function handleClick(e) {
    window.alert(`Clicked on rectangle: ${e.type}`);
  }
</script>

<Stage width={1000} height={1000}>
  <Layer>
    <Rect x={100} y={100} width={400} height={200} fill="blue" onpointerclick={handleClick} />
  </Layer>
</Stage>
```

--------------------------------

### Previous Konva Stage Access with tick()

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

In previous versions, `tick()` was required to wait for the Konva stage handle to be defined after DOM rendering.

```svelte
<script>
	import { onMount, tick } from 'svelte';
	import { Stage, Layer, Rect } from 'svelte-konva';

	let stage;

	onMount(async () => {
		// Wait for dom update so the stage handle becomes defined
		await tick();

		const json = stage.toJSON(); // Caution: stage can be null if the stage has not been created yet (eg. canvas HTML component has not yet been rendered)
		window.alert(`Stage as JSON: ${json}`);
	});
</script>

<Stage config={...} bind:handle={stage}>
	<Layer>
		<Rect config={...} />
	</Layer>
</Stage>
```

--------------------------------

### Display and Interact with Text

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Renders text on the canvas with customizable font properties and allows interaction. Imports Stage, Layer, and Text from svelte-konva.

```svelte
<script lang="ts">
  import { Stage, Layer, Text } from 'svelte-konva';

  let message = $state('Hello, svelte-konva!');
</script>

<Stage width={600} height={200}>
  <Layer>
    <Text
      x={50}
      y={60}
      text={message}
      fontSize={28}
      fontFamily="Georgia"
      fill="darkslategray"
      fontStyle="bold"
      align="left"
      letterSpacing={1}
      draggable
      onpointerclick={() => (message = 'Clicked!')}
    />
  </Layer>
</Stage>
```

--------------------------------

### Group and Transform Multiple Shapes

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Illustrates grouping multiple shapes (Circles and Rect) into a single `Group` component that can be dragged together. Imports Stage, Layer, Group, Circle, and Rect.

```svelte
<script lang="ts">
  import { Stage, Layer, Group, Circle, Rect } from 'svelte-konva';

  let groupX = $state(100);
  let groupY = $state(100);
</script>

<Stage width={800} height={600}>
  <Layer>
    <!-- All children move together when the group is dragged -->
    <Group bind:x={groupX} bind:y={groupY} draggable>
      <Circle x={0}   y={0}   radius={50} fill="red"   />
      <Circle x={80}  y={0}   radius={50} fill="green" />
      <Circle x={160} y={0}   radius={50} fill="blue"  />
      <Rect   x={-20} y={60}  width={220} height={10} fill="black" />
    </Group>
  </Layer>
</Stage>

<!-- groupX / groupY automatically update on dragend because they are bound -->
<p>Group position: {groupX}, {groupY}</p>
```

--------------------------------

### Binding Config Props for State Synchronization

Source: https://github.com/konvajs/svelte-konva/blob/master/README.md

Bind props like `x` and `y` to synchronize component state with the Konva node's internal state after drag or transform events. Use `staticConfig` to disable internal syncing.

```svelte
<script>
  import { Stage, Layer, Rect } from 'svelte-konva';

  let rectX = $state(100);
  let rectY = $state(100);

  $effect(() => {
    console.log(`Rectangle was dragged. New x: ${rectX}. New y: ${rectY}.`);
  });
</script>

<Stage width={1000} height={1000}>
  <Layer>
    <Rect bind:x={rectX} bind:y={rectY} width={400} height={200} fill="blue" draggable />
  </Layer>
</Stage>
```

--------------------------------

### Browser-Safe Dynamic Import for SvelteKit SSR

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Use a browser-conditional dynamic import in SvelteKit to load svelte-konva components only on the client-side, preventing server-side errors.

```svelte
<!-- +page.svelte (SvelteKit, SSR-enabled route) -->
<script lang="ts">
  import { browser } from '$app/environment';

  // Dynamically load the canvas component only on the client
  const MyCanvas = browser
    ? import('./MyCanvas.svelte').then((m) => m.default)
    : new Promise<never>(() => {});
</script>

<main>
  <h1>My App</h1>

  {#await MyCanvas}
    <p>Loading canvas…</p>
  {:then Component}
    <Component title="Interactive Canvas" />
  {:catch err}
    <p>Failed to load canvas: {err.message}</p>
  {/await}
</main>

```

```svelte
<!-- MyCanvas.svelte — safe to import Stage etc. directly here -->
<script lang="ts">
  import { Stage, Layer, Rect } from 'svelte-konva';
  let { title }: { title: string } = $props();
</script>

<p>{title}</p>
<Stage width={800} height={500}>
  <Layer>
    <Rect x={50} y={50} width={200} height={100} fill="dodgerblue" />
  </Layer>
</Stage>

```

--------------------------------

### Access Underlying Konva Node via `bind:this`

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Access the underlying Konva node immediately via the `node` property on the component instance using `bind:this`. This avoids the need for `await tick()`.

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { Stage, Layer, Rect, Transformer } from 'svelte-konva';

  let stageRef: ReturnType<typeof Stage> | undefined = $state();
  let rectRef: ReturnType<typeof Rect> | undefined;
  let transformer: ReturnType<typeof Transformer> | undefined;

  onMount(() => {
    // Immediately available — no await tick()
    const stageJSON = stageRef!.node.toJSON();
    console.log('Stage JSON:', stageJSON);

    // Programmatically attach transformer to rect
    if (transformer && rectRef) {
      transformer.node.nodes([rectRef.node]);
    }

    // Export stage as PNG
    const dataUrl = stageRef!.node.toDataURL({ mimeType: 'image/png', pixelRatio: 2 });
    console.log('High-DPI snapshot ready, length:', dataUrl.length);
  });
</script>

<Stage width={600} height={400} bind:this={stageRef}>
  <Layer>
    <Rect x={100} y={100} width={200} height={120} fill="teal" bind:this={rectRef} />
    <Transformer bind:this={transformer} />
  </Layer>
</Stage>

```

--------------------------------

### Create Rotating Star Shapes in Svelte Konva

Source: https://context7.com/konvajs/svelte-konva/llms.txt

The `Star` component allows configuration of `numPoints`, `innerRadius`, and `outerRadius`. Rotation can be controlled via a bound variable.

```svelte
<script lang="ts">
  import { Stage, Layer, Star } from 'svelte-konva';

  let rotation = $state(0);
  const spin = () => setInterval(() => (rotation = (rotation + 1) % 360), 16);
</script>

<Stage width={400} height={400}>
  <Layer>
    <Star
      x={200} y={200}
      numPoints={5}
      innerRadius={60}
      outerRadius={120}
      fill="gold"
      stroke="orange"
      strokeWidth={3}
      bind:rotation={rotation}
    />
  </Layer>
</Stage>
```

--------------------------------

### Stage Component

Source: https://context7.com/konvajs/svelte-konva/llms.txt

The `Stage` component is the root element for your canvas. It creates a `<div>` wrapper and exposes the Konva.Stage instance via the `node` property. It accepts `divWrapperProps` to customize the wrapper `<div>`.

```APIDOC
## Stage Component

### Description
The `Stage` component is the top-level component that creates a `<div>` wrapper for the Konva canvas. It exposes the underlying `Konva.Stage` instance immediately via the `node` property. The `divWrapperProps` prop allows forwarding arbitrary attributes to the wrapper `<div>`.

### Props
- `width` (number) - The width of the canvas.
- `height` (number) - The height of the canvas.
- `bind:this` - Binds the Konva.Stage instance to a variable.
- `onclick` - Callback for stage click events.
- `divWrapperProps` (object) - Props to be applied to the wrapper `<div>`.

### Example
```svelte
<script lang="ts">
  import { Stage, Layer, Rect } from 'svelte-konva';
  import type { KonvaMouseEvent } from 'svelte-konva';

  let stageRef: ReturnType<typeof Stage> | undefined = $state();

  function handleStageClick(e: KonvaMouseEvent) {
    console.log('Clicked at', e.target.getType());
  }
</script>

<Stage
  width={800}
  height={600}
  bind:this={stageRef}
  onclick={handleStageClick}
  divWrapperProps={{ id: 'canvas-container', class: 'my-canvas' }}
>
  <Layer>
    <Rect x={50} y={50} width={200} height={100} fill="steelblue" />
  </Layer>
</Stage>
```
```

--------------------------------

### Accessing Konva Node with bind:this

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

Access the underlying Konva node using `bind:this` on the component and accessing the `node` property. The `handle` prop has been removed and renamed to `node`.

```diff
<script>
  import { onMount, tick } from 'svelte';
  import { Stage, Layer, Rect } from 'svelte-konva';

  let rectangle;

  onMount(async () => {
-    const json = rectangle.toJSON();
+    const json = rectangle.node.toJSON();
     window.alert(`Rectangle as JSON: ${json}`);
  });
</script>

<Stage width={1000} height={1000}>
  <Layer>
    <Rect
       x={100} y={100} width={400} height={200} fill="blue"
-      bind:handle={rectangle}
+      bind:this={rectangle}
    />
  </Layer>
</Stage>
```

--------------------------------

### Layer Component

Source: https://context7.com/konvajs/svelte-konva/llms.txt

The `Layer` component represents a drawing layer within the `Stage`. It must be a direct child of `Stage` and supports bindable transform props like `x`, `y`, `rotation`, etc.

```APIDOC
## Layer Component

### Description
The `Layer` component is a drawing layer that must be a direct child of `Stage`. Multiple layers can be used for z-ordering. It supports bindable transform props.

### Props
- `bind:this` - Binds the Konva.Layer instance to a variable.
- `x` (number) - X position of the layer.
- `y` (number) - Y position of the layer.
- `scaleX` (number) - X scale of the layer.
- `scaleY` (number) - Y scale of the layer.
- `rotation` (number) - Rotation of the layer in degrees.
- `skewX` (number) - Skew on the X axis.
- `skewY` (number) - Skew on the Y axis.

### Example
```svelte
<script lang="ts">
  import { Stage, Layer, Rect, Circle } from 'svelte-konva';

  let layerRef: ReturnType<typeof Layer> | undefined;
</script>

<Stage width={800} height={600}>
  <Layer>
    <Rect x={0} y={0} width={800} height={600} fill="#f0f0f0" />
  </Layer>

  <Layer bind:this={layerRef}>
    <Circle x={200} y={200} radius={80} fill="coral" />
    <Rect x={400} y={150} width={150} height={100} fill="mediumseagreen" />
  </Layer>
</Stage>
```
```

--------------------------------

### Rect Component

Source: https://context7.com/konvajs/svelte-konva/llms.txt

The `Rect` component renders a rectangle shape on the canvas. It accepts all `Konva.Rect` configuration properties as Svelte props and supports bindable transform properties.

```APIDOC
## Rect Component

### Description
Renders a rectangle shape. Accepts all `Konva.Rect` config props and supports bindable transform props.

### Props
- `x` (number) - X position of the rectangle.
- `y` (number) - Y position of the rectangle.
- `width` (number) - Width of the rectangle.
- `height` (number) - Height of the rectangle.
- `fill` (string) - Fill color of the rectangle.
- `stroke` (string) - Stroke color of the rectangle.
- `strokeWidth` (number) - Stroke width of the rectangle.
- `cornerRadius` (number) - Corner radius of the rectangle.
- `draggable` (boolean) - Enables dragging of the rectangle.
- `shadowBlur` (number) - Blur radius of the shadow.
- `shadowColor` (string) - Color of the shadow.
- `ondragend` - Callback for drag end event.
- `bind:x` - Binds the x position.
- `bind:y` - Binds the y position.

### Example
```svelte
<script lang="ts">
  import { Stage, Layer, Rect } from 'svelte-konva';
  import type { KonvaDragTransformEvent } from 'svelte-konva';

  let rectX = $state(100);
  let rectY = $state(100);
</script>

<Stage width={800} height={600}>
  <Layer>
    <Rect
      bind:x={rectX}
      bind:y={rectY}
      width={200}
      height={100}
      fill="royalblue"
      stroke="navy"
      strokeWidth={2}
      cornerRadius={8}
      draggable
      shadowBlur={10}
      shadowColor="rgba(0,0,0,0.4)"
      ondragend={(e: KonvaDragTransformEvent) => console.log('Drag ended', e.target.x())}
    />
  </Layer>
</Stage>
```
```

--------------------------------

### Draw Directed Arrows with Arrow in Svelte Konva

Source: https://context7.com/konvajs/svelte-konva/llms.txt

The `Arrow` component uses `points` similar to `Line`, with configurable `pointerLength`, `pointerWidth`, and `pointerAtBeginning` for double-headed arrows.

```svelte
<script lang="ts">
  import { Stage, Layer, Arrow } from 'svelte-konva';
</script>

<Stage width={600} height={400}>
  <Layer>
    <Arrow
      points={[100, 200, 250, 100, 400, 200, 500, 150]}
      tension={0.5}
      pointerLength={15}
      pointerWidth={15}
      fill="darkorange"
      stroke="darkorange"
      strokeWidth={4}
    />
    <!-- Double-headed arrow -->
    <Arrow
      x={0} y={80}
      points={[100, 200, 500, 200]}
      pointerLength={12}
      pointerWidth={12}
      pointerAtBeginning
      fill="purple"
      stroke="purple"
      strokeWidth={3}
    />
  </Layer>
</Stage>
```

--------------------------------

### Disable Automatic Prop Synchronization with `staticConfig`

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Pass `staticConfig` to disable automatic synchronization of bindable props with Konva's internal state on `dragend` and `transformend`. This reduces Svelte reactivity overhead.

```svelte
<script lang="ts">
  import { Stage, Layer, Rect, Circle } from 'svelte-konva';
</script>

<Stage width={800} height={600}>
  <Layer>
    <!-- Position is managed only by Konva internally; no Svelte state sync on drag -->
    <Rect
      x={100} y={100} width={150} height={80}
      fill="slateblue" draggable
      staticConfig
    />

    <!-- Normal mode: bind x/y to track position in Svelte state -->
    <Circle x={400} y={200} radius={60} fill="tomato" draggable />
  </Layer>
</Stage>

```

--------------------------------

### Importing and Using Konva Event Types in svelte-konva

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Import Konva event types for precise event handling in your Svelte components. Use KonvaEventHooks to type props for custom wrapper components, ensuring type safety for event callbacks.

```typescript
import type {
  KonvaMouseEvent,
  KonvaWheelEvent,
  KonvaTouchEvent,
  KonvaPointerEvent,
  KonvaDragTransformEvent,
  KonvaEventHooks
} from 'svelte-konva';

// KonvaEventHooks can be used to type a props object for a custom wrapper component
type MyShapeProps = {
  x: number;
  y: number;
} & KonvaEventHooks;
```

--------------------------------

### Update Config Prop to Individual Props in svelte-konva

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

Migrate from using a single `config` object to individual props for Konva node properties. This change aligns with react-konva's approach.

```html
<Rect
-      config={{ x: 100, y: 100, width: 400, height: 200, fill: 'blue' }}
+      x={100} y={100} width={400} height={200} fill="blue"
/>
```

--------------------------------

### Draggable Rectangle with Bound Position in Svelte

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Shows how to create a draggable Rect component in svelte-konva. The x and y properties of the rectangle are bound to Svelte state variables, allowing for two-way data binding. The dragend event is logged to the console.

```svelte
<script lang="ts">
  import { Stage, Layer, Rect } from 'svelte-konva';
  import type { KonvaDragTransformEvent } from 'svelte-konva';

  let rectX = $state(100);
  let rectY = $state(100);

  $effect(() => {
    console.log(`Rect position updated: x=${rectX}, y=${rectY}`);
  });
</script>

<Stage width={800} height={600}>
  <Layer>
    <!-- Draggable rect with bound position — x/y update after dragend -->
    <Rect
      bind:x={rectX}
      bind:y={rectY}
      width={200}
      height={100}
      fill="royalblue"
      stroke="navy"
      strokeWidth={2}
      cornerRadius={8}
      draggable
      shadowBlur={10}
      shadowColor="rgba(0,0,0,0.4)"
      ondragend={(e: KonvaDragTransformEvent) => console.log('Drag ended', e.target.x())}
    />
  </Layer>
</Stage>
```

--------------------------------

### Pass Props to Wrapper Div in Svelte Konva

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

Use the `divWrapperProps` prop on the `Stage` component to pass attributes like `id` and `class` to the wrapper div. This replaces the previous method of using rest props.

```svelte
<Stage
     width={1000} height={1000} bind:this={stage}
     divWrapperProps={{
        id: "myWrapperDiv",
        class: "wrapperDivClass otherClass"
      }}
>
</Stage>
```

--------------------------------

### Handle Konva Events with Typed Callbacks

Source: https://context7.com/konvajs/svelte-konva/llms.txt

Use typed `on<konvaEventName>` props for all svelte-konva components. The payload is the raw `KonvaEventObject`. Event bubbling can be cancelled by setting `e.cancelBubble = true`.

```svelte
<script lang="ts">
  import { Stage, Layer, Rect, Circle } from 'svelte-konva';
  import type {
    KonvaMouseEvent,
    KonvaPointerEvent,
    KonvaDragTransformEvent,
    KonvaTouchEvent
  } from 'svelte-konva';

  let log = $state<string[]>([]);
  const add = (msg: string) => (log = [...log.slice(-4), msg]);
</script>

<Stage width={700} height={400}>
  <Layer>
    <Rect
      x={50} y={50} width={200} height={120}
      fill="royalblue" draggable
      onmouseenter={(e: KonvaMouseEvent)  => add(`Enter ${e.target.getType()}`)}
      onmouseleave={(e: KonvaMouseEvent)  => add(`Leave`)}
      onclick={(e: KonvaMouseEvent)       => add(`Click at ${e.evt.clientX},${e.evt.clientY}`)}
      ondblclick={(e: KonvaMouseEvent)    => add(`Double-click`)}
      ondragstart={(e: KonvaDragTransformEvent) => add(`Drag start`)}
      ondragend={(e: KonvaDragTransformEvent)   => { add(`Drag end x=${e.target.x().toFixed(0)}`); }}
      oncontextmenu={(e: KonvaPointerEvent) => { e.evt.preventDefault(); add('Context menu'); }}
    />
    <Circle
      x={500} y={200} radius={80} fill="coral" draggable
      ontouchstart={(e: KonvaTouchEvent) => add(`Touch start`)}
      ontouchend={(e: KonvaTouchEvent)   => add(`Touch end`)}
      onpointerclick={(e: KonvaPointerEvent) => {
        e.cancelBubble = true; // stop bubbling to Stage
        add('Pointer click (bubble stopped)');
      }}
    />
  </Layer>
</Stage>

<ul>{#each log as entry}<li>{entry}</li>{/each}</ul>

```

--------------------------------

### Cancel Event Bubbling in svelte-konva

Source: https://github.com/konvajs/svelte-konva/blob/master/docs/svelte-konva-v1-migration.md

To cancel event bubbling, set `e.cancelBubble = true` on the event payload. `e.preventDefault()` is no longer supported for this purpose.

```diff
function handleClick(e) {
     window.alert(`Clicked on rectangle: ${e.type}`);
-    e.preventDefault();
+    e.cancelBubble = true;
}
```

--------------------------------

### Accessing Underlying Konva Node

Source: https://github.com/konvajs/svelte-konva/blob/master/README.md

Access the underlying Konva node of a svelte-konva component using the `node` property. This is useful for direct manipulation or serialization.

```svelte
<script>
  import { onMount } from 'onMount';
  import { Stage, Layer, Rect } from 'svelte-konva';

  let rectangle;

  onMount(async () => {
    const json = rectangle.node.toJSON();
    window.alert(`Rectangle as JSON: ${json}`);
  });
</script>

<Stage width={1000} height={1000}>
  <Layer>
    <Rect x={100} y={100} width={400} height={200} fill="blue" bind:this={rectangle} />
  </Layer>
</Stage>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.