8 ms·
Konva.js - Declarative 2D Canvas for React, Vue, and Svelte
- arskeliss16387 2y agoLooks promising and quite handy for my project
- sebdufbeau 2y agoI 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.
- lukan 2y ago"We're working on performance-sensitive project" Konva looks awesome, but canvas based. For more performance I switched from canvas to pixi, which is webgl/webgpu based. Drawing can be also expensive there(in some cases even more so), but if you can manage to put it in a texture in time, you can have looooots of moving animated shapes even on mediocre mobile phones. https://www.goodboydigital.com/pixijs/bunnymark/ https://www.goodboydigital.com/pixijs/bunnymark/
- graftak 2y agoImpressive, it took me 113K bunnies for a single frame drop on an iPhone 14pro
- culopatin 2y agoAt 105 I started seeing dips while adding, but would level back to 60 during bounce. iPad Air 4. Is this the new benchmark? “The new iPad can handle 200k bunnies”
- octacat 2y agotrue, also declarative approach is amazing for wegbl, you need to draw many lines - pass start/end points in a buffer at once.
- lukan 2y agoI wanted to do something like this, but have not found a nice way, yet. You do this by hand? Meaning writing the shader code yourself?
- octacat 2y agoBy hand or regl library (almost by hand). I tried THREE, but it feels it gives me more pain than benefits (and you still end up tweaking their shaders sometimes). AI is pretty good at small tasks like tweaking shaders. I needed to draw a spectroscope, like a line connecting all pixels on the image one by one on the colorspace projection. Ended up 100 times more efficient in webgl comparing to browser API. But it is pretty low level. On another hand once you dig deeper into shaders, they are actually more powerful. Let's just say, API is just painful too :). Also, there is some fun with how transparency works and order of elements displayed (because of parallel processing). Oh, ideally I want web canvas API, but which allows to pass a buffer of lines to draw instead of one ;)
- lukan 2y agoThanks. I started getting into shaders with WebGPU, but that is not widespread yet and WebGL I did not liked, so I likely will get back to writing WebGPU shaders for better performance, once there is decent support. (And my current solution works, just could be more performant)
- Fauntleroy 2y agoThe site and docs for Konva are conspiciously pleasant and well fleshed out. The "price" link jumpscare is also something I haven't yet seen.
- stephenhandley 2y agoAgreed, love how clear their pricing page is.
- peterpost2 2y agoThe pricing page is well done indeed.
- mklarmann 2y agoimpressive! But know I am left wondering, what the price is...
- admiralrohan 2y agoWhat is the purpose? React for Canvas tag?
- solardev 2y agoA 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.
- gedy 2y agoFor folks who have used this, why would you choose this instead of SVG inside React, Svelte, etc?
- rk06 2y agoit 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
- solardev 2y agoKonva-React basically gives you the same ergonomics (declarative shapes as React components) without the performance penalty of SVGs.
- ayhanfuat 2y agoMain advantage of canvas is performance. If you have thousands of elements or if you are doing some complex animations SVG may become a performance bottleneck but in general it is a simpler solution that does the job.
- zdragnar 2y agoTake 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 could be wrong here). There's a sibling trend of animation editors exporting to wasm/canvas as well; see for example Lottie and Rive. Having settled on SVG vs canvas, and presuming you chose canvas, if you're already in react / svelte / etc, this library gives you a way to do so that fits in with what you're already doing.
- gedy 2y agoI 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.
- h1fra 2y agoDon't know about the library but the spreadsheet project built on top is impressive https://www.rowsncolumns.app/ https://www.rowsncolumns.app/
- rapnie 2y agoIs this a community-driven project, or is there a company behind the project?
- lavrton 2y agoIt is mostly community-driven. Recently, I started to use a bit of my company resources to improve the konva project. Currently, I am playing with AI tools for docs, so I have to pay for API usage.
- vekker 2y agoI'd highly recommend to add an "LLM Cheatsheet" page to your docs. Example: https://goatdb.dev/llm-cheatsheet/ https://goatdb.dev/llm-cheatsheet/ No doubt this would help increase adoption these days, and make implementation a lot easier.
- vile_wretch 2y agoI used this for a project a few years ago. It's quite intuitive and made developing a workflow/graph editor a relative breeze.
- slig 2y agoI 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.
- your_challenger 2y agoI haven't tried Konva. But have been using fabric js for an image editor I've been working on. I guess they both do a good job.
- tetris11 2y agoIs 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 2y agoIt 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 2y agoWe 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 2y agoSVG export feels like it would be borderline impossible. Raster graphics to vector?
- deleted 2y ago[deleted]
- solardev 2y agoThe 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.
- tetris11 2y ago
- boomskats 2y agoHow does this compare to tldraw in terms of featureset / target market?
- deleted 2y ago[deleted]
- probabletrain 2y agoI'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 2y agoKonva 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.
- recroad 2y agoPixiJS is too low level for anyone who wants to get something up quickly. For example, you have to implement your own dragging code (ew).
- Ezhik 2y agoReminds me of p5.js - I still fall back to it to do some quick graphics.
- salojoo 2y agoI 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 2y agoWhat 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?
- salojoo 2y agoI'm rendering charts. The native API conveniently provides the fundamentals with lines and rectangles. In addition masking and text have been very useful. Interaction is also supported by the API with hit regions, though I've opted to do my calculations. But I agree that interaction is where Konva would probably have shined.
- lukan 2y ago"pixi webgl has a limit on the number of canvases on the screen at the same time" But that limit is very high. What were you doing? https://www.goodboydigital.com/pixijs/bunnymark/ https://www.goodboydigital.com/pixijs/bunnymark/
- jonplackett 2y agoPricing is unbelievable
- grav 2y agoI give up, why?
- deleted 2y ago[deleted]
- solardev 2y agoIt's FOSS. And you get rickrolled by the pricing link.
- steve_adams_86 2y agoNever give up! https://www.youtube.com/watch?v=KxGRhd_iWuE https://www.youtube.com/watch?v=KxGRhd_iWuE I can't tell if your "give up" is a reference to the "never gonna give you up" line from the rick roll video. The internet is a web of labyrinthine references, and I don't know what means what, if anything anymore.
- collingreen 2y agoI 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.
- robertlagrant 2y agoSuch a catchy pricing page!
- I_am_tiberius 2y agoI 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.
- recroad 2y agoI PoC'd this and ended using PhaserJS for the 2D stuff I had to do - it's more game-oriented by much more full-featured. The API is intuitive as well.
- tbo47 2y agoKonva at esm format https://www.npmjs.com/package/konva-es https://www.npmjs.com/package/konva-es It's not a fork, just a different way to build the same project. ES2015 module is more efficient than the other formats and can facilitate the creation of smaller bundle size through tree-shaking technique. https://github.com/konvajs/konva/issues/1829 https://github.com/konvajs/konva/issues/1829