inspector-customization

Name: inspector-customization
Availability: InStock
Author: trkbt10

Build custom inspector UIs for node editors using renderInspector and InspectorPanel.

6|Updated Oct 12, 2025

Search Tags:#react #TypeScript #inspector #node-editor #renderInspector #InspectorPanel #custom-inspector

Ready to run

npx skills add https://github.com/trkbt10/react-wireflow --skill inspector-customization

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: inspector-customization
Source: https://github.com/trkbt10/react-wireflow/tree/main/skills/inspector
Command: npx skills add https://github.com/trkbt10/react-wireflow --skill inspector-customization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create and customize inspector panels for node editors.

Core Features & Use Cases

Per-node inspector rendering with renderInspector in NodeDefinition.
Custom inspector tabs via InspectorPanel with a configurable tab list.
Extensible settings through InspectorSettingsTab and custom panels.
Ready-to-use inspector UI components (InspectorPanel, PropertySection, InspectorInput, etc.) for consistent theming.

Quick Start

Define a node with a renderInspector function to customize editing UI for the node's data, e.g., const MyNode = createNodeDefinition({ type: "person", displayName: "Person", ports: [...], renderInspector: PersonInspectorRenderer });
Or wrap your editor with an InspectorPanel and provide custom tabs via a tab config array.
For advanced usage, implement custom settings panels and pass them to InspectorSettingsTab.

Frequently Asked Questions about inspector-customization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I customize inspector panels for node editors in React?▼

You can customize inspector panels by wrapping your editor with an InspectorPanel and providing a configurable tab list array to manage various node settings and properties.

How does renderInspector work for per-node UI customization?▼

The renderInspector function works as a property within NodeDefinition to render a custom editing UI, allowing you to update node data and manage settings directly for individual nodes.

Can I add custom tabs to an inspector panel?▼

Yes, you can add custom tabs by configuring a tab list array within the InspectorPanel component, enabling extensible settings and custom panels for your editor workflow.

What React components are available for building inspector UIs?▼

Available React components for building inspector UIs include InspectorPanel, PropertySection, and InspectorInput, which provide ready-to-use elements for consistent theming across node editors.

Does this approach require TypeScript for node definitions?▼

While TypeScript is used for NodeDefinition typing to ensure structure, the underlying mechanism relies on React-based definitions and components to render and update node data dynamically.