Skip to main content

Object Explorer

This page demonstrates how to build a full object explorer experience on top of the Kritzel library, including hierarchical group navigation, multi-criteria filtering, object creation actions, and direct property editing in a live inspector.

Prerequisites​

Complete the Quick Start guide to have a working <KritzelEditor> rendered in your application. This example builds on that setup.

This example makes use of the following core concepts. Click on the links below to go into the details:

  • Objects - querying, updating, and removing canvas objects programmatically
  • Components - listening to objectsAdded, objectsUpdated, and objectsRemoved events to keep external UI in sync
  • Viewport - panning and zooming to focus on a selected object

Hierarchical Canvas Explorer with Live Inspector​

A presentation-style explorer layout with a dashboard header, grouped tree navigation, and an inline inspector for updating coordinates, dimensions, text, fill colors, and visibility behavior.

The object list is seeded in onReady() and kept in sync via the objectsAdded, objectsRemoved, and objectsUpdated event callbacks. Root objects are derived by filtering out any IDs that appear as children inside KritzelGroup objects. Selecting a tree node calls updateObject() to apply property changes from the inspector fields in real time.

Clicking a tree entry highlights the corresponding canvas object and pans the viewport to bring it into view using setViewport(). The tree supports expand/collapse for groups, text search across IDs and types, and type-based chip filters - all driven purely from the local signal state without additional API calls.