A "Focus Mode" for Maximizing a Single Node (Want to Maximize the node))

[ashusnp]

Hi React Flow team 👋

I’m building a flow editor where some nodes (e.g. BlackBox) should open in a sort of “Focus Mode”:

When the user clicks Open, the node expands to take up most of the canvas (like a modal / zoomed-in view).

Other nodes in the background should be hidden or faded out.

Inside this “focused” BlackBox, I want to allow users to create and connect child nodes with full ReactFlow features (drag, zoom, pan, edges, typing, etc.).

When the user clicks Back, the canvas should restore to the original view, with the BlackBox returning to its normal size and all other nodes visible again.

My Attempt

I tried a couple of approaches:

1. Overlay approach: rendering a second inside an absolutely positioned container (like a modal).

Problem: basic interactions (drag/zoom/connect) stopped working smoothly because of nested providers.

2. Resize approach: changing the node’s style.width/style.height to full viewport size.

Problem: it overlaps other nodes, and managing z-index / background hiding is tricky.

👉 What is the recommended way to implement a focus/zoom mode for a single node in ReactFlow and how I can do it.

[ashusnp]

@moklick Can you please tell something about this point. I want some urgent help on this. Thanks in advance.

[moklick]

You can use fitView from useReactFlow and pass the node id as a param fitView({ nodes: [{ id: nodeId }] })

[ashusnp]

I tried, Actually I want below kind of functionality

I want a “Focus Mode” for certain nodes (like a BlackBox).

When I click a button on the node:

1. That node should expand to full canvas size (like a modal filling the viewport area, minus my left palette sidebar).
2. Other nodes should be hidden or faded in the background.
3. Inside this maximized node, I should still have full ReactFlow interactivity (drag, zoom, pan, connect child nodes, type, etc.).
4. When I exit Focus Mode, the node should shrink back to its original size and the rest of the graph should be visible again.
5. Important: Any child nodes dragged into this BlackBox during Focus Mode should still remain inside it after exit (their parent/child relationships must persist).

What I already tried:

fitView({ nodes: [id] }) → only zooms into the node, doesn’t resize to fullscreen.

Changing node width/height → it overlaps other nodes and managing zIndex is messy.

Nested ReactFlow → interactions break.

👉 What I really need: a clean way to simulate a fullscreen modal for a single node inside ReactFlow, while keeping ReactFlow interactions working, and ensuring its children stay inside after exit.

Hope you understand by requirement