skills.rest
trkbt10
trkbt10COMMUNITY
Explore all skills by this author →
WebsiteGitHub

inspector-customization

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
One-click install
npx skills add https://github.com/trkbt10/react-wireflow --skill inspector-customization
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
trkbt10trkbt10
6

custom-node-definition

Define custom react-wireflow node definitions with ports and renderers.

Community
Advanced
linehaul-ailinehaul-ai
4

svelte-flow

Build node-based editors and interactive flow visualizations with Svelte Flow.

Official
Intermediate
gil00pitagil00pita

material-ui

Build React UIs with Material-UI components using themes and layouts.

Community
Intermediate
STier-AiSTier-Ai
5

react-flow-node-ts

Develop custom React Flow node components with TypeScript and Zustand.

Official
Intermediate