kunstwerk-react

React bindings for rendering serialized Kunstwerk sketches.

Install

npm install kunstwerk-react kunstwerk

Render an exported file

The data prop accepts a gzip-compressed .kw File or Blob, an ArrayBuffer, a typed-array view, or an uncompressed serialized JSON string.

import { KunstwerkPlayer } from "kunstwerk-react";

export function Preview({ file }: { file: File }) {
  return (
    <KunstwerkPlayer
      data={file}
      loop
      padding={24}
      style={{ width: 480, height: 320, color: "#b711c6" }}
      aria-label="Sketch preview"
    />
  );
}

Set autoplay={false} to render the completed sketch without playing its animation. The component also supports alignment, loopDelay, playbackRate, onLoad, and onError props, along with standard div attributes. Stroke paths use currentColor, so they inherit normal CSS color and can also be styled individually with selectors.

Storybook

Add an exported example file at packages/react/public/demo.kw, then run Storybook from the repository root:

pnpm storybook

The stories demonstrate looping animation, a completed static sketch, slow playback, alignment, resizable frames, colored strokes, padding, and the component controls. Build the static Storybook with:

pnpm --filter kunstwerk-react build-storybook