Click → sidebar
Slide in a contextual panel. Same listener as the modal example, different placement — useful when option editing happens mid-flow without leaving the canvas.
Try it
Click a node to load its options in the sidebar. Click empty canvas to close it.
Click any node
Click a node to load its options in the sidebar. Click empty canvas to close it.
The pattern
The handler also listens for pane.click to clear selection — clicking empty canvas closes the inspector. Mount WireOptionPanel in your sidebar with the same node id; everything else is just layout.
tsx
import { useState } from "react";
import { WireProvider, WireCanvas, WireOptionPanel } from "@aigentive/wire-react";
function FlowWithSidebar({ diagram, options }) {
const [openId, setOpenId] = useState<string>();
return (
<WireProvider
defaultDiagram={diagram}
onEvent={(event) => {
if (event.type === "node.click") setOpenId(event.nodeId);
else if (event.type === "pane.click") setOpenId(undefined);
}}
>
<div className="grid grid-cols-[1fr_320px]">
<WireCanvas mode="view" />
{openId && (
<aside>
<WireOptionPanel catalog={options} nodeId={openId} />
</aside>
)}
</div>
</WireProvider>
);
}