{"id":13406841,"url":"https://github.com/konvajs/react-konva","last_synced_at":"2025-09-09T20:52:59.255Z","repository":{"id":37502802,"uuid":"48938908","full_name":"konvajs/react-konva","owner":"konvajs","description":"React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.","archived":false,"fork":false,"pushed_at":"2025-09-09T14:17:58.000Z","size":2617,"stargazers_count":6099,"open_issues_count":3,"forks_count":283,"subscribers_count":62,"default_branch":"master","last_synced_at":"2025-09-09T17:27:00.094Z","etag":null,"topics":["canvas","draw-graphics","konva","konva-framework","react","visualization"],"latest_commit_sha":null,"homepage":"https://konvajs.github.io/docs/react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/konvajs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["lavrton"],"patreon":"lavrton","open_collective":"konva","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2016-01-03T08:14:17.000Z","updated_at":"2025-09-09T14:14:59.000Z","dependencies_parsed_at":"2022-07-12T16:19:42.267Z","dependency_job_id":"990a4654-3f83-475e-81de-b1bd2a35b1cb","html_url":"https://github.com/konvajs/react-konva","commit_stats":{"total_commits":430,"total_committers":43,"mean_commits":10.0,"dds":"0.16046511627906979","last_synced_commit":"9613a7ead46f82584255fc00e575f91ea57165b6"},"previous_names":["lavrton/react-konva"],"tags_count":109,"template":false,"template_full_name":null,"purl":"pkg:github/konvajs/react-konva","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Freact-konva","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Freact-konva/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Freact-konva/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Freact-konva/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/konvajs","download_url":"https://codeload.github.com/konvajs/react-konva/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Freact-konva/sbom","scorecard":{"id":567238,"data":{"date":"2025-08-11","repo":{"name":"github.com/konvajs/react-konva","commit":"5f6157d88b340b2f622fe1c915ae160b74d082b6"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.4,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 1/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":10,"reason":"15 commit(s) and 7 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/konvajs/react-konva/release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/konvajs/react-konva/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/konvajs/react-konva/test.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/test.yml:24","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/release.yml:1","Warn: no topLevel permission defined: .github/workflows/test.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 4 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-20T15:18:17.686Z","repository_id":37502802,"created_at":"2025-08-20T15:18:17.686Z","updated_at":"2025-08-20T15:18:17.686Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274360132,"owners_count":25270920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","draw-graphics","konva","konva-framework","react","visualization"],"created_at":"2024-07-30T19:02:40.723Z","updated_at":"2025-09-09T20:52:59.247Z","avatar_url":"https://github.com/konvajs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/lavrton","https://patreon.com/lavrton","https://opencollective.com/konva"],"categories":["TypeScript","UI Components","JavaScript","Render"],"sub_categories":["Canvas"],"readme":"# React Konva\n\n[![Financial Contributors on Open Collective](https://opencollective.com/konva/all/badge.svg?label=financial+contributors)](https://opencollective.com/konva)\n[![npm version](https://badge.fury.io/js/react-konva.svg)](http://badge.fury.io/js/react-konva)\n[![Build Status](https://github.com/konvajs/react-konva/actions/workflows/test.yml/badge.svg)](https://github.com/konvajs/react-konva/actions/workflows/test.ym)\n\n![ReactKonva Logo](https://cloud.githubusercontent.com/assets/1443320/12193428/3bda2fcc-b623-11e5-8319-b1ccfc95eaec.png)\n\nReact Konva is a JavaScript library for drawing complex canvas graphics using\n[React](http://facebook.github.io/react/).\n\nIt provides declarative and reactive bindings to the\n[Konva Framework](http://konvajs.github.io/).\n\n# [OPEN DEMO](https://codesandbox.io/s/5m3nwp787x)\n\nAn attempt to make [React](http://facebook.github.io/react/) work with the HTML5\ncanvas library. The goal is to have similar declarative markup as normal React\nand to have similar data-flow model.\n\n**At the current moment, `react-konva` is not supported in React Native environment.**\n\nCurrently you can use all `Konva` components as React components and all `Konva`\nevents are supported on them in same way as normal browser events are supported.\n\n## Installation\n\n```bash\nnpm install react-konva konva --save\n```\n\n## [Tutorials and Documentation](https://konvajs.github.io/docs/react/)\n\n## Example\n\n```javascript\nimport React, { useState } from 'react';\nimport { render } from 'react-dom';\nimport { Stage, Layer, Rect, Text } from 'react-konva';\nimport Konva from 'konva';\n\nconst ColoredRect = () =\u003e {\n  const [color, setColor] = useState('green');\n\n  const handleClick = () =\u003e {\n    setColor(Konva.Util.getRandomColor());\n  };\n\n  return \u003cRect x={20} y={20} width={50} height={50} fill={color} shadowBlur={5} onClick={handleClick} /\u003e;\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cStage width={window.innerWidth} height={window.innerHeight}\u003e\n      \u003cLayer\u003e\n        \u003cText text=\"Try click on rect\" /\u003e\n        \u003cColoredRect /\u003e\n      \u003c/Layer\u003e\n    \u003c/Stage\u003e\n  );\n};\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\nTo get more info about `Konva` you can read\n[Konva Overview](http://konvajs.github.io/docs/overview.html).\n\n**Actually you don't need to learn `react-konva`. Just learn `Konva` framework, you will understand how to use `react-konva`**\n\n## Core API\n\n`react-konva` supports all shapes, that `Konva` supports with the same names, and also it supports all the same events like `click`, `touchmove`, `dragend`, etc with \"on\" prefix like `onClick`, `onTouchMove`, `onDragEnd`.\n\n### Getting reference to Konva objects\n\nTo get reference of `Konva` instance of a node you can use `ref` property.\n\n```javascript\nimport React, { useEffect, useRef } from 'react';\n\nconst MyShape = () =\u003e {\n  const circleRef = useRef();\n\n  useEffect(() =\u003e {\n    // log Konva.Circle instance\n    console.log(circleRef.current);\n  }, []);\n\n  return \u003cCircle ref={circleRef} radius={50} fill=\"black\" /\u003e;\n};\n```\n\n### Strict mode\n\nBy default `react-konva` works in \"non-strict\" mode. If you changed a property **manually** (or by user action like `drag\u0026drop`) properties of the node will be not matched with properties from `render()`. `react-konva` updates ONLY properties changed in `render()`.\n\nIn strict mode `react-konva` will update all properties of the nodes to the values that you provided in `render()` function, no matter changed they or not.\n\nYou should decide what mode is better in your actual use case.\n\nTo enable strict mode globally you can do this:\n\n```javascript\nimport { useStrictMode } from 'react-konva';\n\nuseStrictMode(true);\n```\n\nOr you can enable it only for some components:\n\n```javascript\n\u003cRect width={50} height={50} fill=\"black\" _useStrictMode /\u003e\n```\n\nTake a look into this example:\n\n```javascript\nimport { Circle } from 'react-konva';\nimport Konva from 'konva';\n\nconst Shape = () =\u003e {\n  const [color, setColor] = React.useState();\n\n  return (\n    \u003cCircle\n      x={0}\n      y={0}\n      draggable\n      radius={50}\n      fill={color}\n      onDragEnd={() =\u003e {\n        setColor(Konva.Util.getRandomColor());\n      }}\n    /\u003e\n  );\n};\n```\n\nThe circle is `draggable` and it changes its color on `dragend` event. In `strict` mode position of the node will be reset back to `{x: 0, y: 0}` (as we defined in render). But in `non-strict` mode the circle will keep its position, because `x` and `y` are not changed in render.\n\n### Minimal bundle\n\nBy default `react-konva` imports full `Konva` version. With all the shapes and all filters. To minimize bundle size you can use minimal core version of `react-konva`:\n\n```javascript\n// load minimal version of 'react-konva`\nimport { Stage, Layer, Rect } from 'react-konva/lib/ReactKonvaCore';\n\n// minimal version has NO support for core shapes and filters\n// if you want import a shape into Konva namespace you can just do this:\nimport 'konva/lib/shapes/Rect';\n```\n\nDemo: [https://codesandbox.io/s/6l97wny44z](https://codesandbox.io/s/6l97wny44z)\n\n## Usage with Next.js\n\n**From `konva@10.0.0`, you don't need to do any extra steps. It will work out-of-the-box.**\n\nIf you use konva verion \u003c= 9, continue reading.\n\nNote: `react-konva` is designed to work in the client-side. On the server side, it will render just empty div. So it doesn't make much sense to use react-konva for server-side rendering. In Next.js you may have issue like\n\n\u003e Module not found: Can't resolve 'canvas'\n\nWhy do we see this error? `canvas` module is used for canvas rendering in Node.JS environment. `konva` library will use it there, but it doesn't have this dependency explicitly.\n\nHow to solve this issue? There are two approaches:\n\n### Approach 1: manually install canvas module\n\nYou can install `canvas` module manually.\n\n```bash\nnpm install canvas@next\n```\n\nThe solution will solve the issue, but it will have unnecessary dependency on `canvas` module which may increase build time a little bit.\n\n### Approach 2: Use dynamic import\n\nNext.js docs: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading\n\nWith this approach your canvas component will be loaded on the client-side only. So you will not have any issues with server-side rendering. Also `next.js` will automatically understand that it doesn't need to load `canvas` module, because it is used for server-side rendering only.\n\n#### Step 1 - Create canvas component\n\nYou need to define your canvas components somewhere in your `components` folder.\n\n**It must be placed outside of `pages` or `app` folder (because they are used for server rendering).**\n\nYour `components/canvas.js` file may look like this:\n\n```js\nimport { Stage, Layer, Circle } from 'react-konva';\n\nfunction Canvas(props) {\n  return (\n    \u003cStage width={window.innerWidth} height={window.innerHeight}\u003e\n      \u003cLayer\u003e\n        \u003cCircle x={200} y={100} radius={50} fill=\"green\" /\u003e\n      \u003c/Layer\u003e\n    \u003c/Stage\u003e\n  );\n}\n\nexport default Canvas;\n```\n\n#### Step 2 - Use dynamic import\n\nThen you can use it in your page. Notice, it is imported to have `'use client';`.\n\n```js\n'use client';\nimport dynamic from 'next/dynamic';\n\nconst Canvas = dynamic(() =\u003e import('../components/canvas'), {\n  ssr: false,\n});\n\nexport default function Page(props) {\n  return \u003cCanvas /\u003e;\n}\n```\n\n#### Step 3 - Setup next.config.js\n\n1. In some versions of next.js you may need to set up `next.config.js` to make it work:\n\n```js\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  webpack: (config) =\u003e {\n    config.externals = [...config.externals, { canvas: 'canvas' }]; // required to make Konva \u0026 react-konva work\n    return config;\n  },\n};\n\nmodule.exports = nextConfig;\n```\n\nIf you are using `turbopack` you may need to use this configuration:\n\n```js\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  experimental: {\n    turbo: {\n      resolveAlias: {\n        canvas: './empty.js',\n      },\n    },\n  },\n};\n\nmodule.exports = nextConfig;\n```\n\nAlso create empty file `empty.js` in the root of your project. That file will be used as replacement for `canvas` library. As we don't really need to use it, it will be just empty file.\n\n### Usage with React Context\n\n**Note: this section may be not relevant, because this issue was fixed in `react-konva@18.2.2`. So context should work by default.**\n\nDue to a [known issue](https://github.com/facebook/react/issues/13336) with React, Contexts are not accessible by children of the react-konva `Stage` component. If you need to subscribe to a context from within the `Stage`, you need to \"bridge\" the context by creating a `Provider` as a child of the `Stage`. For more info, see [this discussion](https://github.com/konvajs/react-konva/issues/188#issuecomment-478302062) and this [react-redux demo](https://github.com/konvajs/react-konva/issues/311#issuecomment-454411007). Here is an example of bridging the context ([live demo](https://codesandbox.io/s/ykqw8r4r21)):\n\n```js\nimport React, { Component } from 'react';\nimport Konva from 'konva';\nimport { render } from 'react-dom';\nimport { Stage, Layer, Rect } from 'react-konva';\n\nconst ThemeContext = React.createContext('red');\n\nconst ThemedRect = () =\u003e {\n  const value = React.useContext(ThemeContext);\n  return \u003cRect x={20} y={50} width={100} height={100} fill={value} shadowBlur={10} /\u003e;\n};\n\nconst Canvas = () =\u003e {\n  return (\n    \u003cThemeContext.Consumer\u003e\n      {(value) =\u003e (\n        \u003cStage width={window.innerWidth} height={window.innerHeight}\u003e\n          \u003cThemeContext.Provider value={value}\u003e\n            \u003cLayer\u003e\n              \u003cThemedRect /\u003e\n            \u003c/Layer\u003e\n          \u003c/ThemeContext.Provider\u003e\n        \u003c/Stage\u003e\n      )}\n    \u003c/ThemeContext.Consumer\u003e\n  );\n};\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cThemeContext.Provider value=\"blue\"\u003e\n        \u003cCanvas /\u003e\n      \u003c/ThemeContext.Provider\u003e\n    );\n  }\n}\n```\n\n## Comparisons\n\n### react-konva vs react-canvas\n\n[react-canvas](https://github.com/Flipboard/react-canvas) is a completely\ndifferent react plugin. It allows you to draw DOM-like objects (images, texts)\non canvas element in very performant way. It is NOT about drawing graphics, but\nreact-konva is exactly for drawing complex graphics on `\u003ccanvas\u003e` element from\nReact.\n\n### react-konva vs react-art\n\n[react-art](https://github.com/reactjs/react-art) allows you to draw graphics on\na page. It also supports SVG for output. But it has no support of events of\nshapes.\n\n### react-konva vs vanilla canvas\n\nVanilla canvas is faster because when you use `react-konva` you have two layers of abstractions. Konva framework is on top of canvas and React is on top of Konva.\nDepending on the use case this approach can be slow.\nThe purpose of `react-konva` is to reduce the complexity of the application and use well-known declarative way for drawing on canvas.\n\n## [CHANGELOG](https://github.com/konvajs/react-konva/releases)\n\n**Note: you can find a lot of demos and examples of using Konva there:\n[http://konvajs.github.io/](http://konvajs.github.io/). Really, just go there and take a look what Konva can do for you. You will be able to do the same with `react-konva` too.**\n\n```\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonvajs%2Freact-konva","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkonvajs%2Freact-konva","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonvajs%2Freact-konva/lists"}