ComfyUI Node

UI Divider

A colored line for taming your collapsed node

By pixelpainter·Created 8 months ago·Updated 7 months ago· 12
UI Divider
  • divider

    When you collapse a workflow into a SubGraph, the front face of that node is just a vertical stack of widgets. Titles help you tell the sections apart, but sometimes you don't need a heading - you need a horizontal line. That's the whole job of UI Divider: a thin colored separator you drop inside a subgraph and promote to the frontside, so the collapsed node's face reads like a form instead of a list.

    Like the rest of the tiny UI-Decorators pack (UI Title, UI Spacer, UI Note), it's pure decoration. It has no outputs, returns nothing, and never touches your generation. If that sounds like a waste of a node, you haven't rebuilt a workflow after a month away and squinted at an unlabeled column of widgets.

    How it works

    The Python side is a stub: one required divider input of a custom UI_SUB_DIVIDER widget type, OUTPUT_NODE = True, empty returns. The actual drawing lives in js/simple_ui_decorators.js, which paints a single 1px line across the node's width (with a small inset on both edges) and adds a color control to the node face. You can click the "pick" button for a popup HSV color picker, or just type a hex value into the field directly.

    Here's a small detail worth knowing: when the divider is mirrored to the subgraph's frontside, the JS deliberately matches only inner DividerNode instances - never TitleNodes. That's not an accident. The author hit the bug where a frontside divider would "steal" a title's color via fallback matching, and fixed it by scoping the lookup. So a divider stays the color you picked, even when a bright-red title sits right above it.

    The one input that matters

    divider - and it carries no options or default. The real controls live on the node face (the color field plus its "pick" button). That's the whole surface area of this node, which is refreshing after packs that bury ten dropdowns in a divider.

    Installing

    Standard small-pack drill: ComfyUI Manager → search "UI-Decorators", or:

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

    Restart ComfyUI and you're done. No pip requirements, no model downloads - this pack is frontend JavaScript only, and the repo's pyproject.toml is just Comfy Registry metadata. The line renders on the inner canvas and, once promoted, on the collapsed node's face.

    Common issues

    • Line not showing on the frontside? It only appears there after you promote or link the widget to the outer SubGraph node. Inside the subgraph it renders immediately, but that's not where you're looking.
    • Wrong line getting the wrong color? Like its siblings, matching falls back to vertical order among inner DividerNodes when a clean id match isn't available. Reorder them top-to-bottom in the order you want on the front.
    • Expecting a thick decorative rule? It's a single 1px line. It's a separator, not an accent - if you want visual weight, that's what the colored Note node in the same pack is for.
    CategoryCustom/UI Decorators

    Inputs (1)

    NameTypeDefaultDescription
    dividerUI_SUB_DIVIDER

    Outputs (0)

    No outputs