Component Children
Placeholder inside a component's visual tree marking where children given to an instance of that component are inserted.
Component Children is how a component becomes a wrapper. Placed somewhere in the component's own visual tree (typically inside a Group), it marks the insertion point: when a parent graph adds visual children to an instance of the component, those children render at exactly this position, surrounded by whatever chrome the component defines. The node has no inputs or outputs and renders nothing by itself — it is purely a structural marker. A component that contains one accepts children in the node picker; a component without one does not. A component has a single insertion point: adding more than one Component Children does not create multiple slots.
When to use it
Whenever you build a reusable container whose content varies per use — cards, page sections, modals, styled panels: define padding, borders, headers once in the wrapper component and drop Component Children where the caller's content goes. Not for repeating data-driven content (use For Each with a template component) and not for passing values into a component (use Component Inputs).
At a glance
| Category | Visual |
| Type name | Component Children |
| Available in | browser |
| SSR compatibility | safe |
| Provided by | noodl-editor |
Patterns
- Wrapper component: Group root with the shared styling, a Text header bound from Component Inputs, and Component Children below it — instances then supply arbitrary content children.
- Combine with Component Inputs: chrome configuration (title, variant) flows through inputs while free-form content flows through children.
Watch out for
- Placing several Component Children to try to create multiple named slots — only one insertion point exists per component; split into smaller wrapper components instead.
Examples
Wrapper component: Component Children marks the insertion point
Component Children is a placeholder with no ports: whatever children are given to an instance of the component are rendered where the placeholder sits. Here '/Media Frame' is a reusable framed panel — title bar on top, content slot below — and the consumer drops a Video inside its instance. The video's play/pause wiring lives at the consumer level; the frame knows nothing about its content.
A slot component that is still a component: Component Children plus a real interface
Component Children marks where the consumer's own children land, which is what lets one panel hold a form on one page and a table on the next — the alternative is a panel per kind of content, and nobody writes the third one. But a slot is not a substitute for an interface, and that is the mistake this example exists to correct: the panel still takes title and mounted, still lets the instance decide whether the close button exists (showClose), and still publishes closed so the page can act on the request rather than guess. Note what closed is: the panel does NOT hide itself when the button is pressed — it says the user asked, and the page decides, which is the same contract a controlled value has. A component that unmounts itself is a component whose parent can be surprised. The page places the same panel twice with different children inside it and different chrome, and the two instances share every line of the panel's graph.
Drag a file onto the page, or click to browse
A drop target built the way the browser actually requires: a Javascript2 node adds dragover/drop listeners to the element on Node.Signals.DidMount and removes them on WillUnmount, because a listener attached without a matching removal survives the component and fires against a node that is gone. Component Children means the drop zone wraps whatever you put inside it rather than dictating its own appearance, and Open File Picker gives the same component a click-to-browse path, so one part answers both ways a person supplies a file. ⚠️ One wire in the original had to be re-pointed to land here: it named an Open File Picker output called success, which was real when this was written and is now called done.
Related nodes
Group, Component Inputs, Component Outputs, Repeater
This page is generated from node-catalog-enriched.json. Do not edit it by hand — run npm run docs:nodes to regenerate, and fix the source enrichment instead.