1"use strict";(globalThis.webpackChunkkonva_site_2||=[]).push([[1414],{6810(e,n,t){t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>a,metadata:()=>o,toc:()=>c});const o=JSON.parse('{"id":"docs/tools","title":"Konva.js Tools and Plugins","description":"Explore the official Konva integrations for React, Vue, Svelte, and Angular.","source":"@site/content/docs/tools.md","sourceDirName":"docs","slug":"/docs/tools.html","permalink":"/docs/tools.html","draft":false,"unlisted":false,"editUrl":"https://github.com/konvajs/site/edit/master/content/docs/tools.md","tags":[],"version":"current","sidebarPosition":10000,"frontMatter":{"sidebar_position":10000,"title":"Konva.js Tools and Plugins","sidebar_label":"Tools","slug":"tools.html","sidebar_class_name":"hidden","description":"Explore the official Konva integrations for React, Vue, Svelte, and Angular."},"sidebar":"tutorialsSidebar","previous":{"title":"Setup","permalink":"/docs/nodejs/nodejs-setup"}}');var s=t(4848),i=t(8453);const a={sidebar_position:1e4,title:"Konva.js Tools and Plugins",sidebar_label:"Tools",slug:"tools.html",sidebar_class_name:"hidden",description:"Explore the official Konva integrations for React, Vue, Svelte, and Angular."},l=void 0,r={},c=[{value:"Debugging",id:"debugging",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",li:"li",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://github.com/konvajs/react-konva/",children:"Konva + React"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://github.com/konvajs/vue-konva",children:"Konva + Vue"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://github.com/konvajs/svelte-konva",children:"Konva + Svelte"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://github.com/konvajs/ng2-konva",children:"Konva + Angular"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"debugging",children:"Debugging"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://github.com/konvajs/konva-devtool",children:"konva-devtool"})," \u2014 official browser extension that shows the Konva scene graph and node attributes, instead of the single ",(0,s.jsx)(n.code,{children:"<canvas>"})," element the built-in inspector sees"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://github.com/maitrungduc1410/konva-inspector",children:"konva-inspector"})," \u2014 community extension with a profiler and a ",(0,s.jsx)(n.code,{children:"$konva"})," console handle; supports Konva 9 and 10"]}),"\n"]})]})}function u(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453(e,n,t){t.d(n,{R:()=>a,x:()=>l});var o=t(6540);const s={},i=o.createContext(s);function a(e){const n=o.useContext(i);return o.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.