Grouping
WebApp Grouping is your layout engine
- parent
- Parent
- Order + 1
Once your app has more than a couple of controls, a flat form reads like a wall. WebApp_Grouping is the ComfyUI_webapp node that imposes structure: tabs, columns, collapsible sections, and repeating rows. Every other control in the pack has a parent input, and this node is what you connect it to. Think of it as the "organizing the app" chapter of the pack's README, made flesh.
The core idea is simple and it's the thing that makes the whole pack scale: every node without a parent lands at the root of the app; every node whose parent is this Grouping lands inside it. Wire a Grouping's Parent output into another Grouping's parent input and you get nesting - tabs inside sections, columns inside tabs.
What you set
- mode (combo) - the shape of the group:
- Section - a labeled block, with a
collapsibletoggle (default on). - Tab - the group becomes one tab; tabs group by their parent, and the tab bar's position follows the first tab's order.
- Column - a side-by-side column.
- Repeating - the interesting one. It repeats its child controls a configurable number of times (you set a Minimum and Maximum repeat count). The README is blunt: connected nodes "should have the same number of values," and the app can render it as a table. This is your "upload three images" use case.
- Section - a labeled block, with a
- order (INT, default 10) - where the group sits.
- Advanced (BOOLEAN, default false) - only show the group's contents in advanced mode.
Outputs are Parent (the PARENT type, which is what you connect to children's parent inputs) and Order + 1, the usual auto-sequence chain slot.
How ordering actually works
This is where people get confused, so here's the rule straight from the README. Among siblings (same parent), the app sorts by: (1) the order number - lower first; (2) the node title, alphabetically, when orders tie; (3) the workflow id, lowest first, when everything else ties. The pack's interpret_json.py implements exactly that sort. So if your controls keep coming out in the wrong order, check that you actually set the order numbers - default is 10 for everything, and then it's alphabet soup.
Installing it
It's one node of the pack; install once, get all:
cd ComfyUI/custom_nodes
git clone https://github.com/MonkeyProof-Solutions-BV/ComfyUI_webapp
Restart ComfyUI, or use ComfyUI Manager → search ComfyUI_webapp ("WebApp API"). No models, no downloads; dependencies are pillow and torch only.
Gotchas
Two worth remembering. First, this is definition-only - no framework, no rendered app. Pair it with something like Simian WebApps or the Grouping node is a ghost in the canvas. Second, the version caveat: this pack uses the newer backend node API (comfy_api.latest), so a stale ComfyUI won't load it. Update first, then debug layout.
Inputs (4)
| Name | Type | Default | Description |
|---|---|---|---|
| order | INT | 10 | Control order in its section. Lowest value at the top. Highest at the bottom. |
| Advanced | BOOLEAN | false | Control is only shown when advanced is True. |
| mode | COMBO | Set the mode of this grouping. | |
| parentopt | PARENT | Web app parent to add the node to. |
Outputs (2)
| Name | Type | Description |
|---|---|---|
| Parent | PARENT | — |
| Order + 1 | INT | Order number for the next control. |