A browser DevTools extension for inspecting and debugging Konva.js canvas applications. Think "React DevTools" but for Konva.
- Scene graph tree — browse every Stage, Layer, Group, and Shape in a virtualized tree view
- Attribute editor — edit any node attribute in place with color pickers and number scrubbing
- Filter editor — add, remove, and tweak Konva filters (+ native CSS filters on Konva v10)
- Select by cursor — click nodes on the canvas to select them in the tree
$konvaconsole variable — the selected node is available as$konvain the browser console- Event listener inspector — see all registered event listeners and detect
listening: falseissues - Cache inspector — view cache dimensions/memory, enable or clear cache on any node
- Change tracking — snapshot a node's attributes and watch for changes in real time
- Enhanced search — search by class name,
/regex/,attr:value, or#id - Drag-and-drop reorder — rearrange nodes in the tree to change z-order or reparent
- Export / Import — export any stage as JSON, import JSON back into the scene
- Copy as code — copy a node as a
new Konva.X({...})constructor call - Hit region visualization — overlay showing which shapes receive pointer events
- Render heatmap — color-coded overlay showing which layers redraw most frequently
- Scene statistics — footer bar with node counts, cache memory, and Konva version
- Dark / light theme — follows system preference, toggleable
- Record layer draws — measure how long each
Layer.draw()takes - Per-layer summary — average, max, and total draw times with visual bars
- Recent draws timeline — table of individual draw events with timestamps
- Live animation monitor — see all running
Konva.Animationinstances and their target layers - Live tween monitor — see all active
Konva.Tweeninstances, their target nodes, and animated properties - Auto-cleanup — stale entries from destroyed stages are automatically filtered out
- Transform gizmo — toggle a native Konva Transformer on the selected node for interactive resize/rotate/move
- Screenshot tools — export the entire stage or just the selected node as a PNG image
- Keyboard shortcuts — Arrow keys to navigate, Enter/Escape to select/deselect, Delete to remove, H to toggle visibility, L to toggle listening, Cmd/Ctrl+F to search
- Bookmark / pin nodes — pin frequently inspected nodes for quick access (persisted across sessions)
- Accessibility insights — flag common issues on interactive nodes: missing names, tiny hit areas, blocked listeners, low opacity, hidden state
- Supports Konva v9 and v10
- Multiple stages supported
- Works on Chrome, Edge, and Firefox
git clone <repo-url>
pnpm install
pnpm dev # Chrome/Edge dev mode with HMR
pnpm dev:firefox # Firefox dev modeLoad the extension from the generated dist/ folder:
- Chrome:
chrome://extensions/→ Enable Developer mode → Load unpacked → selectdist/ - Edge:
edge://extensions/→ Enable Developer mode → Load unpacked → selectdist/ - Firefox:
about:debugging#/runtime/this-firefox→ Load Temporary Add-on → select any file indist/
For Firefox, right-click the Konva extension icon → "Always allow on..." to enable background script + popup.
A local test application is included at examples/konva-app/:
cd examples/konva-app && pnpm install && pnpm devFour modes: Basic Examples, Multi Stage (with dynamic add/delete stage controls), Accessibility (a11y issue test cases), and Stress Test (~10k nodes).
pnpm build # Chrome/Edge production build
pnpm build:firefox # Firefox production build
pnpm zip # Build + zip for store uploadSee ARCHITECTURE.md for a detailed explanation of how the extension works, including the bridge pattern, injected modules, and how each tab (Elements, Profiler, Animations) is implemented.
- pixi-inspector — great reference for structuring a canvas devtools extension
- React DevTools — UI inspiration
- chrome-extension-boilerplate-react-vite — boilerplate template