ComfyUI Node

UI Spacer

The invisible node that buys breathing room in a collapsed graph

By pixelpainter·Created 8 months ago·Updated 7 months ago· 12
UI Spacer
  • spacer

    UI Spacer is the least glamorous node in the UI-Decorators pack, and the one you'll quietly thank yourself for. When you promote several widgets to the front of a collapsed SubGraph node, they stack right on top of each other - title glued to title, note jammed against a divider, zero air between them. SpacerNode inserts vertical whitespace of a set height, so the front face of your collapsed node actually gets visual grouping instead of one long run-on column.

    It does absolutely nothing to your generation: no outputs, empty returns, pure layout. If that seems pointless, remember what you're fighting. ComfyUI's SubGraph frontside is notoriously picky about reordering and promotion - the community gripes about it constantly - and a spacer is the cheapest workaround for "this node face is too cramped to read."

    How it works

    One required input, spacer, of a custom UI_SPACER widget type, defaulting to 20 (pixels). The JavaScript in js/simple_ui_decorators.js handles everything else. On the inner canvas the node draws a faint dashed bracket at its top-left corner so you can actually see and select it - a spacer that renders as nothing would be impossible to grab - and adds a height_px number control to the node face (0–1000, default 20).

    Promote the widget to the subgraph's frontside and the bracket disappears; the JS instead reserves a blank block of exactly your chosen height, mirroring the value from the inner node by id, with a vertical-order fallback when there's no clean match. Result: your promoted widgets get real breathing room between sections.

    The one input that matters

    spacer - a number, in pixels, default 20. It's the only thing you'll touch. A good starting rhythm: 20px between related widgets, 40–60px to clearly separate distinct sections of the collapsed node. Setting it to 0 is the same as deleting the node, without the delete - handy while you're still figuring out the layout.

    Installing

    Same as the rest of the pack: ComfyUI Manager, search "UI-Decorators", or:

    cd ComfyUI/custom_nodes
    git clone https://github.com/pixelpainter/UI-Decorators
    

    Restart ComfyUI. No pip dependencies, no model files - the whole pack is frontend JavaScript, so this install is as light as custom nodes get.

    Common issues

    • Spacer collapsed to nothing? If the promoted widget isn't matching your inner SpacerNode cleanly, the height lookup falls back to vertical order among inner spacers. Keep them in display order and it maps correctly.
    • It shows a dashed bracket inside the subgraph? That's by design - it's the visible handle for an otherwise invisible node. It only renders as clean whitespace once promoted to the frontside.
    • Height not updating after you change it? The value is mirrored at draw time, so if the node face looks stale, that's the Nodes 2.0 frontend misbehaving - switch back to the legacy canvas, which is where this pack and most canvas-drawn custom widgets still expect to live.
    CategoryCustom/UI Decorators

    Inputs (1)

    NameTypeDefaultDescription
    spacerUI_SPACER20

    Outputs (0)

    No outputs