KonvaJS Devtools

KonvaJS Devtools adds a "Konva" panel to your browser DevTools for inspecting, debugging, and profiling any Konva.js canvas application — like React DevTools, but for Konva.

ELEMENTS

Browse the full scene graph — every Stage, Layer, Group, and Shape — in a fast, virtualized tree view that handles thousands of nodes.

• Select nodes by clicking directly on the canvas • Edit any attribute live with color pickers and drag-to-scrub number inputs • Add, remove, and configure Konva image filters (plus CSS filters on Konva v10) • Inspect event listeners and spot "listening: false" issues blocking pointer events • View cache status, dimensions, and memory usage; enable or clear cache in one click • Snapshot attributes and track changes in real time • Search by class name, /regex/, attr:value, or #id • Drag and drop nodes to reorder or reparent them • Export any stage as JSON and import it back • Copy a node as a new Konva.X({...}) constructor call • Toggle a hit-region overlay to visualize pointer event targets • Toggle a render heatmap to see which layers redraw most • Pin frequently inspected nodes for quick access across sessions • Resize, rotate, and move nodes with an interactive transform gizmo • Screenshot the full stage or a single node as a high-res PNG • Accessibility insights flag missing names, tiny hit areas, blocked listeners, and hidden interactive nodes • The selected node is available as $konva in the console

PROFILER

Record Layer.draw() calls and measure render performance per layer.

• Draw count, average time, max time, and total time for each layer • Visual bar charts for quick comparison • Timeline of recent draw events with timestamps

ANIMATIONS

Monitor every running Konva.Animation and Konva.Tween in real time.

• See target layers and animated properties at a glance • Stale entries from destroyed stages are filtered out automatically

KEYBOARD SHORTCUTS

• Arrow keys to navigate and expand/collapse the tree • Delete to remove nodes, H to toggle visibility, L to toggle listening • Cmd/Ctrl+F to search, Escape to deselect

Supports Konva v9 and v10. Multiple stages on the same page. Dark and light theme.