Konva.js - Declarative 2D Canvas for React, Vue, and Svelte
43 comments
·March 19, 2025salojoo
I evaluated this vs pixi and native canvas API. In the end I decided to use native API.
Konva didn't have enough performance for my use case and pixi webgl has a limit on the number of canvases on the screen at the same time
The native API is easy to use and well documented. It also performs well enough to animate charts at 60fps on modern hw for my use case. I also like that there are no libraries to update
solardev
What was your use case? Konva is a pretty high level abstraction, more like a lightweight interactive geometry & paint engine than a graphics API. It must've taken quite a bit of work to recreate similar functionality using native APIs?
collingreen
I discovered Konva just this week and it has been extremely helpful for jumpstarting my latest project. I've been impressed with the docs and the examples and the ergonomics of the api giving me an unusual amount of "it just works" moments.
h1fra
Don't know about the library but the spreadsheet project built on top is impressive https://www.rowsncolumns.app/
I_am_tiberius
I once tried creating a table component but couldn't solve the issue of having bad font quality when zooming into the canvas. I guess I would have needed to re-render things or so.
robertlagrant
Such a catchy pricing page!
slig
I made a jigsaw puzzle (featured in the Konva's home page) years ago. Recently did a full conversion to ReactKonva using Claude and it's a breeze.
null
jonplackett
Pricing is unbelievable
tetris11
Is this the successor library for KineticJS and ConcreteJS?
Kinetic was amazing back in it's day, but lacked SVG export. I wonder if that's built-in now
lavrton
It is a fork of KineticJS. SVG export isn't implemented and I don't think it will be. I, personally, see it as out of the focus of the project.
tetris11
We used Kinetic a lot for a specific type of visual analysis we had, but when it came to creating publish-worthy figures, working with PNG screenshots was less than desirable.
Would it be so difficult to crawl over a snapshot of the object hierarchy and render to a cairo-like library?
At one point I started implementing that myself using my own object representation that I had running parallel to Kinetic's internal one, but never finished it.
afavour
SVG export feels like it would be borderline impossible. Raster graphics to vector?
solardev
The underlying shapes are defined by geometries (so vectors) and then rasterized to canvas. So the SVG export could happen before the rasterization.
There are other libs that are native SVG though, so why even use Konva? The benefit of Canvas is that it can be a lot, LOT faster than having multiple complex SVGs. SVG is especially slow on Firefox IIRC.
null
Ezhik
Reminds me of p5.js - I still fall back to it to do some quick graphics.
probabletrain
I've used PixiJS and react-pixi-fiber to write a declarative 2D WebGL renderer in React with excellent results. PixiJS also has a Canvas2D fallback when WebGL isn't available. I wonder how this compares.
solardev
Konva is much easier to use for simpler apps, especially combined with React. You basically define some shapes similarly to how you would declare any component, pass props and event handlers to it, and it just magically works.
Pixi is lower level. It takes more scaffolding to get to the same level of functionality. But it can be more performant for some draw intensive operations. Not that Konva is particularly slow though.
I joined a project last year which uses Konva inside an Angular application. It was my first time doing any kind of canvas programming, but the ergonomics of konva can be picked up quite rapidly and I've been enjoying quite a lot.
We're working on performance-sensitive project, so one lesson we learned is that all shapes listen to all mouse events by default. We didn't even have lots of shapes, but this was enough to have a noticeable performance hit due to all the event handlers being registered. We pivoted to an opt-in approach instead and that fixed most of our problems.