KonvaJS Devtools

Tracking since Apr 21, 2026.

Changelog

• Apr 21, 2026
  description

  Browser extension for debugging Konva app.
  
  Features:
  - Support inspect all Konva objects (Text, Image, Rect, Star,....)
  - Edit object attributes in place, right in the extension
  - Changing Filter is supported
  - Select object by Cursor
  - Dark theme supported
  - Multiple stages supported

  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.

Permissions & access

Permissions

storage

Host access

<all_urls>

Screenshots

Similar extensions

Alternatives to KonvaJS Devtools, ranked by description similarity.

Karomia Scan

X-Ray debug overlay for Karomia report pages

15

★ 5.0

Konva Dev Tool

devtool for konva

583

★ 5.0

Datadog Browser SDK developer extension

Browser extension to investigate Datadog Browser SDK integration by: - displaying collected events - visualising the render of…

1.0K

★ 5.0

Better Debugger

This extension improves debugger of the Bubble.io editor.

4

★ 5.0

Dev Canvas Studio

Visual design editor for modifying UI properties with Claude Code integration

10

Console Logger

Captures JavaScript console messages from the active tab, displays them live, and automatically saves them to a file.

24

Salesforce Experience Cloud Debugger

This light debugging tool provides view on APEX request tree to understand application bottlenecks

35

ChatGPT Diagram Renderer

Renders Diagrams like PlantUML directly in the ChatGPT Webinterface via kroki.io.

5