That's how our unified component registry powers search and drag-and-drop
Consolidating 150+ cloud resources into a single metadata schema that powers both visual sidebars and keyboard command palettes.
01The challenge of managing a large cloud resource catalog
An architecture diagramming tool needs to support a wide range of cloud resources, including databases, compute instances, messaging queues, and storage buckets. Managing this catalog across both a drag-and-drop sidebar and a keyboard-driven command palette can lead to code duplication, inconsistent styling, and outdated icons. We need a single registry to act as the source of truth for all component definitions.
02Designing a unified metadata schema
We define a unified component registry where each resource type is registered with its metadata, including display name, category, icon, default dimensions, and default visual styles (like border colors and backgrounds). This schema is read by both the sidebar and the command palette, ensuring that components look and behave consistently, regardless of how they are added to the canvas.
03Passing metadata through HTML5 drag-and-drop events
When a user drags a component from the sidebar, we serialize its registry metadata into the HTML5 drag event's data transfer object. When the component is dropped onto the canvas, the editor reads the data transfer payload, calculates the drop coordinates relative to the canvas zoom level, and initializes the new node using the registered defaults, making drag-and-drop smooth and reliable.
04Fuzzy search and instant command palette insertion
For keyboard-first users, the command palette (Cmd+K) provides a fast way to insert components. The palette reads the registry, filters items dynamically using a client-side fuzzy search algorithm, and displays the matching results. When a user selects a component, it is inserted at the center of the active canvas viewport, allowing users to build diagrams without touching the mouse.