Package Exports

svelte-konva
svelte-konva/Arc.svelte
svelte-konva/Arrow.svelte
svelte-konva/Circle.svelte
svelte-konva/Ellipse.svelte
svelte-konva/Group.svelte
svelte-konva/Image.svelte
svelte-konva/Label.svelte
svelte-konva/Layer.svelte
svelte-konva/Line.svelte
svelte-konva/Path.svelte
svelte-konva/Rect.svelte
svelte-konva/RegularPolygon.svelte
svelte-konva/Ring.svelte
svelte-konva/Shape.svelte
svelte-konva/Sprite.svelte
svelte-konva/Stage.svelte
svelte-konva/Star.svelte
svelte-konva/Tag.svelte
svelte-konva/Text.svelte
svelte-konva/TextPath.svelte
svelte-konva/Transformer.svelte
svelte-konva/Wedge.svelte
svelte-konva/package.json

Readme

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

Currently compatible with Svelte v3 & 4, SvelteKit v1 and Konva v8 & 9.

Install

npm i svelte-konva konva

Quick start

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

<Stage config={{ width: 1000, height: 1000 }}>
  <Layer>
    <Rect config={{ x: 100, y: 100, width: 400, height: 200, fill: 'blue' }} />
  </Layer>
</Stage>

Events

You can listen to Konva events by using the Svelte on:event Syntax. All Konva events are supported.

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

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

<Stage config={{ width: 1000, height: 1000 }}>
  <Layer>
    <Rect
      config={{ x: 100, y: 100, width: 400, height: 200, fill: 'blue' }}
      on:pointerclick={handleClick}
    />
  </Layer>
</Stage>

Accessing the underlying Konva node

In various cases it is useful and required to be able to access the underlying Konva node object. In svelte-konva you can do this by binding the handle prop.

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

  let rectangle;

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

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

<Stage config={{ width: 1000, height: 1000 }}>
  <Layer>
    <Rect
      config={{ x: 100, y: 100, width: 400, height: 200, fill: 'blue' }}
      bind:handle={rectangle}
    />
  </Layer>
</Stage>

Binding the config prop

By default svelte-konva keeps your config in sync (position, rotation, scale, etc.) with the Konva node after dragend and transformend events. If you bind the config prop any reactive blocks depending on the config will also be triggered once such changes happen. In case you don't want svelte-konva to sync those changes you can pass the staticConfig prop to the component.

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

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

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

<Stage config={{ width: 1000, height: 1000 }}>
  <Layer>
    <Rect bind:config={rectangleConfig} />
  </Layer>
</Stage>

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.