ComfyUI Node

UI Title

Make your SubGraph sections say what they do

By pixelpainter·Created 8 months ago·Updated 7 months ago· 12
UI Title
  • title

    Collapse a chunk of your workflow into a SubGraph (select nodes, right-click, collapse) and you get a tidy single node - but its front face is a wall of promoted widgets and you can't remember which one was the prompt and which was the seed. UI Title exists so that wall gets a heading. Drop it inside a subgraph, type a section name, promote the widget to the frontside, and the parent node now shows a proper titled section header you can still edit by clicking the text. It's one of four decorators in the small UI-Decorators pack, and it's the one you'll actually use most.

    The name is honest in a way ComfyUI custom nodes rarely are: this node does nothing to the generation. No outputs, no tensors, nothing to wire. It's a label that survives the collapse and keeps the frontside readable - the same job rgthree's Label and Bookmark do for the open canvas, but on the collapsed node's face.

    How it works

    The Python side is almost insultingly simple - one required input, title (a custom UI_SUB_TITLE widget, default "Section Title"), and RETURN_TYPES = () with OUTPUT_NODE = True. It returns nothing. All the real work is in js/simple_ui_decorators.js, which registers the custom widget and draws your text straight onto the canvas.

    Styling lives on the node face as a few extra controls the JS adds: font_size (a number, 8–64, default 14), a bold toggle, and a color field. Click the "pick" button next to the color field and you get a small HSV popup; or just type a hex like #ff6b6b straight into the field (three-digit shorthands like #f66 work too). When you promote the widget to the subgraph's frontside, the JS finds the matching inner node - by id when promoted, falling back to vertical order - and mirrors the color, size and boldness, so the front face looks exactly like what you styled inside. Because the frontside copy is a normal text widget, editing is just clicking it and typing.

    The one input that matters

    title - that's it. Set the default to "Section Title" when you drop the node in, then change it to whatever the section actually is. A tip from using it: name sections by what they do ("Upscale pass") rather than what's in them, because that's what stares back at you from the collapsed node.

    Installing

    It's in ComfyUI Manager - open Manager → Install Custom Nodes and search "UI-Decorators". Or the manual route:

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

    Then restart ComfyUI. That's the whole install: no pip dependencies, no model files, nothing heavy - the entire pack is frontend JavaScript. The repo's pyproject.toml exists for Comfy Registry publishing, not for pulling dependencies.

    Common issues

    • Nothing shows on the collapsed node until you promote the widget. The decorator only earns its keep on the frontside, so right-click the widget inside the subgraph and promote/link it to the outer node.
    • Styling lands on the wrong title? When promoted widgets don't carry a clean id match, the JS falls back to matching inner TitleNodes by vertical position. Keep them in the order you want them displayed and it'll map correctly.
    • Weird rendering under ComfyUI's Nodes 2.0 beta? The new Vue frontend has a track record of breaking custom canvas-drawn widgets. If things render wrong, switch back to the legacy canvas - most custom-node users have left Nodes 2.0 off for exactly this reason.
    CategoryCustom/UI Decorators

    Inputs (1)

    NameTypeDefaultDescription
    titleUI_SUB_TITLESection Title

    Outputs (0)

    No outputs