Konva.js - Declarative 2D Canvas for React, Vue, and Svelte • Hacker News Board

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#31

Post by spankalee » Wed, Mar 19, 2025, 4:12 PM UTC

gedy wrote: post #6

For folks who have used this, why would you choose this instead of SVG inside React, Svelte, etc?

That's my question, because SVG is declarative vector graphics. It has a ton of features, can be SSR'ed, written and used in various apps...

I wish the performance issue were either fixed or dispelled. I think I recall some SVG performance work being done couple of years back.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#32

Post by solardev » Wed, Mar 19, 2025, 4:13 PM UTC

probabletrain wrote: post #21

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.

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.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#33

Post by collingreen » Wed, Mar 19, 2025, 4:14 PM UTC

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.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#34

Post by solardev » Wed, Mar 19, 2025, 4:16 PM UTC

afavour wrote: post #19

tetris11 wrote: post #14

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

SVG export feels like it would be borderline impossible. Raster graphics to vector?

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.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#35

Post by [deleted] » Wed, Mar 19, 2025, 4:16 PM UTC

grav wrote: post #30

jonplackett wrote: post #27

Pricing is unbelievable

I give up, why?

[deleted]

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#36

Post by solardev » Wed, Mar 19, 2025, 4:17 PM UTC

grav wrote: post #30

jonplackett wrote: post #27

Pricing is unbelievable

I give up, why?

It's FOSS. And you get rickrolled by the pricing link.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#37

Post by solardev » Wed, Mar 19, 2025, 4:18 PM UTC

gedy wrote: post #6

For folks who have used this, why would you choose this instead of SVG inside React, Svelte, etc?

It is much much MUCH faster. SVGs really slow down on some browsers (especially Firefox) after a certain level of complexity and interactivity.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#38

Post by solardev » Wed, Mar 19, 2025, 4:19 PM UTC

rk06 wrote: post #9

gedy wrote: post #6

For folks who have used this, why would you choose this instead of SVG inside React, Svelte, etc?

it is not that people would chose svg inside react/vue but that people want react/vue to manage svg for the same reason as we use react/vue to maange html

Konva-React basically gives you the same ergonomics (declarative shapes as React components) without the performance penalty of SVGs.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#39

Post by solardev » Wed, Mar 19, 2025, 4:21 PM UTC

admiralrohan wrote: post #5

What is the purpose? React for Canvas tag?

A high level simple interactive graphics and shapes library for JS, including a React adapter, that make it much easier to build graphical dashboards, visualizations, charts, simple games, etc.

Instead of worrying about pixels you just mix and match vector shapes and imported rasters and turn them into declarative components that you pass props and handlers to, same as any other. Makes your Canvas a much more integrated part of your UI code than it otherwise would be.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#40

Post by gedy » Wed, Mar 19, 2025, 4:28 PM UTC

zdragnar wrote: post #17

gedy wrote: post #6

For folks who have used this, why would you choose this instead of SVG inside React, Svelte, etc?

Take react / svelte/ etc out of the equation. The important question is why would you use canvas vs svg? As a sibling comment noted, number of elements can be a big performance drag, since they all add weight in the DOM. Other considerations are animations- it's been a few years, but I recall a number of animations in SVG that would utterly destroy browser performance (I think it was animating a stroke with CSS but I…

I understand that, though this is not direct canvas access and manages a number of components to handle each shape. I'd assume this introduces some overhead too.