Does this skill include UI components for the inspector?

Yes, it covers a wide range of pre-built components including PropertySection, InspectorInput, and InspectorSelect to ensure consistent styling and accessibility.

Can I add custom tabs to the react-wireflow inspector?

Yes, the skill demonstrates how to use the InspectorPanel component and InspectorPanelTabConfig to add custom tabs such as statistics, layers, or project settings.

How do I handle node data updates within the inspector?

The skill details the use of InspectorRenderProps, specifically the onUpdateNode callback, which allows you to update node data directly from the inspector UI.

What is the primary purpose of the Inspector Customization skill?

It provides standardized guidance and code patterns for building and customizing the property inspector panels and sidebars used in react-wireflow node editors.

React Wireflow Inspector Customizer

Name: React Wireflow Inspector Customizer
Author: trkbt10

bytrkbt10

•

Design Tools

Facilitates the creation and customization of interactive inspector panels and node-specific settings for react-wireflow editors.

About

This skill empowers developers to build sophisticated property panels and settings sidebars for node-based applications using the react-wireflow library. It provides a comprehensive toolkit for implementing node-level data editing, custom tabs for layers or statistics, and extensible settings panels. By leveraging a rich set of pre-built UI components—from collapsible sections to specialized grid inputs—developers can maintain visual consistency and deep interactivity within their node editors while minimizing boilerplate code.

Key Features

Standardized props for node updates, deletion, and external data handling
5 GitHub stars
Custom node-level inspector rendering with React hooks
Extensible multi-tab system for layers, history, and properties
Integrated settings panel customization for editor-wide configurations
Pre-built UI component library for consistent styling across light and dark modes

Use Cases

Adding specialized 'Statistics' or 'Project Metadata' tabs to a wireflow editor sidebar
Building a data-heavy node editor where each node type requires unique configuration fields
Implementing custom export or theme settings panels within the inspector UI

About

Key Features

Standardized props for node updates, deletion, and external data handling
5 GitHub stars
Custom node-level inspector rendering with React hooks
Extensible multi-tab system for layers, history, and properties
Integrated settings panel customization for editor-wide configurations
Pre-built UI component library for consistent styling across light and dark modes

Use Cases

Adding specialized 'Statistics' or 'Project Metadata' tabs to a wireflow editor sidebar
Building a data-heavy node editor where each node type requires unique configuration fields
Implementing custom export or theme settings panels within the inspector UI