svelte-konva


svelte-konva is a component-based svelte wrapper for the Konva HTML5 2D canvas library. For further information and examples please visit the docs.

Compatibility

Refer to the following table for a compatibility overview:

| Svelte | Konva | svelte-konva | _notes_ |
| ------ | ----- | ------------ | ------------------------------------------------------ |
| v5 | v8-10 | v1 | migration guide |
| v3-4 | v8-9 | v0.3 | v0 docs |

Install

``npm
npm i svelte-konva konva
`

Quick start

`svelte







`

$3

You can listen to Konva events by using callback props named on{konva event name}. All Konva events are supported.

`svelte







`

$3

In some cases you might need to access the underlying Konva node of the svelte-konva component directly. You can do this by accessing the node property of the corresponding component instance (example below) or by accessing it in the payload of a Konva event.

`svelte







`

$3

Svelte-Konva is able to keep certain props in sync with the internal state of Konva (position, rotation, scale, ...) after dragend and transformend events in case the prop is bound. In case you don't want svelte-konva to sync those changes internally (mainly due to performance reasons) you can pass the staticConfig prop to the component.

`svelte







`

$3

Generally, svelte-konva is a client-side only library. When using SvelteKit, special care needs to be taken if svelte-konva/Konva functionality is used on prerendered and server side rendered (SSR) components. Prerendering and SSR happens in a Node.js environment. In case you use any svelte-konva functionality in such a context it will throw an error on the server:

> Error: svelte-konva: Library can only be used in a browser context but is currently used in a server environment.

There are multiple solutions to this problem:

Wrap your svelte-konva Components into browser checks

A rudimental solution is to wrap all your svelte-konva code into SvelteKit browser checks. This is only recommended in case your project is small as all the if-blocks can get messy quickly. For larger projects use dynamic imports outlined below.

`html


{#if browser}





{/if}
`

Dynamically import your svelte-konva stage:

A better approach is to dynamically import your svelte-konva canvas on the client-side only. Suppose you have a Svelte component containing your stage with various svelte-konva components:

_MyCanvas.svelte_

`html









`

To use this component inside a SvelteKit prerendered/SSR page you can dynamically import it inside onMount() and render it once it becomes defined:

_+page.svelte_

`html



`

For further examples please consult the docs or clone the repo and run npm i && npm run examples`.

Changelog

Please refer to the CHANGELOG.md or releases page.