Solid.js bindings for Konva.js — declarative 2D canvas rendering with reactive primitives.
Write HTML5 Canvas applications using Solid components. No imperative Konva API calls needed.
import{Circle,Layer,Rect,Stage}from"solid-konva";functionApp(){return(<Stagestyle={{height: "100vh"}}><Layer><Circlex={100}y={100}width={100}height={50}fill="red"/><Rectx={200}y={100}width={100}height={50}fill="blue"draggable/></Layer></Stage>);}npm install solid-konva konva solid-jssolid-konva lists konva and solid-js as peer dependencies — you must install them yourself.
solid-konva mirrors the Konva node hierarchy: Stage → Layer → Shape.
The root container. Renders a <div> that hosts the Konva stage. Automatically resizes to fill its container using a ResizeObserver.
import{Stage}from"solid-konva";<Stagestyle={{height: "500px"}}>{/* layers go here */}</Stage>Props: all StageConfig properties from Konva (except container, which is managed internally), plus any HTML div attributes for the wrapper element.
A drawing layer. Must be a child of <Stage>. Provides a context for all shape children.
import{Layer}from"solid-konva";<Layer>{/* shapes go here */}</Layer>Props: all LayerConfig properties from Konva.
All Konva shapes are available as components. They must be children of a <Layer>.
| Component | Konva class |
|---|---|
<Rect /> | Konva.Rect |
<Circle /> | Konva.Circle |
<Ellipse /> | Konva.Ellipse |
<Line /> | Konva.Line |
<Text /> | Konva.Text |
<TextPath /> | Konva.TextPath |
<Image /> | Konva.Image |
<Sprite /> | Konva.Sprite |
<Star /> | Konva.Star |
<Ring /> | Konva.Ring |
<Arc /> | Konva.Arc |
<Wedge /> | Konva.Wedge |
<Path /> | Konva.Path |
<Arrow /> | Konva.Arrow |
<Tag /> | Konva.Tag |
<RegularPolygon /> | Konva.RegularPolygon |
<Group /> | Konva.Group |
<Shape /> | Konva.Shape |
<Transformer /> | Konva.Transformer |
Each shape accepts its corresponding ShapeConfig props from Konva, plus event handlers (see below).
import{Circle,Rect,Star}from"solid-konva";<Circlex={100}y={100}radius={50}fill="red"/><Rectx={200}y={100}width={100}height={50} fill="blue"draggable/><Starx={350}y={100}numPoints={5}innerRadius={20}outerRadius={50}fill="gold"/>Props are reactive — update a signal and the shape re-renders automatically.
const[x,setX]=createSignal(50);<Circlex={x()}y={100}radius={50}fill="red"/><inputtype="range"value={x()} onInput={(e)=>setX(+e.currentTarget.value)}/>Use Solid's <Show> control flow to mount/unmount shapes:
<Showwhen={isVisible()}><Circlex={100}y={100}radius={50}fill="red"/></Show>Attach Konva events with on + event name (camelCase or lowercase). Both forms work:
<CircleonClick={(e)=>console.log("clicked",e)}onDragMove={(e)=>console.log("dragging",e.target.position())}onmouseover={(e)=>console.log("mouse over")}draggable/>Supported events: MouseOver, MouseOut, MouseEnter, MouseLeave, MouseMove, MouseDown, MouseUp, Wheel, Click, DblClick, TouchStart, TouchMove, TouchEnd, Tap, DblTap, PointerDown, PointerMove, PointerUp, PointerCancel, PointerOver, PointerEnter, PointerOut, PointerLeave, PointerClick, PointerDblClick, DragStart, DragMove, DragEnd.
Transformer-specific events: TransformStart, Transform, TransformEnd.
All events also accept lowercase variants (e.g. onclick, ondragmove).
Use the useStage hook to access the underlying Konva.Stage instance from any descendant component:
import{useStage}from"solid-konva";functionDrawingCanvas(){conststage=useStage();createEffect(()=>{consts=stage?.stage();if(!s)return;constpos=s.getPointerPosition();// ...});return<Linepoints={...}/>;}- StackBlitz playground — interactive demo with sliders and draggable shapes.
src/FreeDrawingDemo.tsx— freehand drawing with brush/eraser tools.src/ShapeDemo.tsx— reactive shapes with conditional rendering and drag events.
| Export | Kind | Description |
|---|---|---|
Stage | Component | Root Konva stage container |
Layer | Component | Drawing layer (child of Stage) |
useStage | Hook | Access the Konva.Stage instance from context |
useLayer | Hook | Access the Konva.Layer instance from context |
Group, Rect, Circle, Ellipse, Wedge, Line, Sprite, Image, Text, TextPath, Star, Ring, Arc, Tag, Path, RegularPolygon, Arrow, Shape, Transformer | Components | Konva shape components |
The library ships with full TypeScript declarations. Shape components accept their corresponding Konva config types plus event handler props.
importtype{KonvaEvents,TransformerEvents}from"solid-konva";Each shape component is created via createEntity(), which:
- Instantiates the corresponding
Konva.Nodeon mount. - Adds it to the parent layer (provided via Solid context).
- Watches props reactively and calls
setAttrs()on changes. - Manages event binding/unbinding when event handlers change.
- Destroys the node on cleanup.
The Stage component uses @solid-primitives/resize-observer to automatically track container size and update the stage dimensions.
MIT