ComfyUI-Drawer

A mobile-friendly modular UI platform for ComfyUI

Overview • Why Drawer? • Installation • Samples • Gadgets • Utilities • UI System • Nodes • Development • Changelog • License

日本語 • 简体中文

--- ## Feature Demo https://github.com/user-attachments/assets/a9ba848f-11eb-42f7-9fc8-31616ed82df5 Note: This demo includes third-party custom nodes that are not included with ComfyUI-Drawer. --- ## What is ComfyUI-Drawer? ComfyUI-Drawer turns complex ComfyUI workflows into compact, touch-friendly control panels. Keep your node graph intact, expose only the parameters you actually want to touch, and manage outputs, model assets, masks, and parameter sweeps from one bottom drawer. The drawer is modular, so it can host workflow controls, media management, model browsing, plotting tools, and custom extensions in one place. --- ## Why Drawer? On desktop, ComfyUI-Drawer adds a remote-control layer to the ComfyUI canvas: keep the graph open, but operate the controls, assets, and inspection tools you actually touch from one bottom drawer. On mobile and small displays, that same drawer becomes the main working surface. It makes active creation practical by keeping parameter control, output review, model browsing, mask editing, prompt dictionaries, and XYZ sweeps within reach. Unlike APP mode, Drawer is designed for editing, testing, and iterating on workflows without turning them into separate apps. --- ## Installation ### Via ComfyUI-Manager (Recommended) Search for **ComfyUI-Drawer** in the [ComfyUI-Manager](https://github.com/ltdrdata/ComfyUI-Manager) install menu. ### Manual Installation ```bash cd ComfyUI/custom_nodes git clone https://github.com/Kuroi961/ComfyUI-Drawer.git pip install -r ComfyUI-Drawer/requirements.txt ``` ### Dependencies `requirements.txt` lists the Python packages this extension installs directly. ComfyUI normally already provides Pillow and SQLite support, which Drawer uses for image thumbnails, media metadata, and the Gallery search index. Video thumbnails and video/audio metadata use the external `ffmpeg` / `ffprobe` binaries when available. They are optional system tools, not Python packages; without them, images and model browsing still work, while video thumbnails fall back to a placeholder and some video/audio metadata may be unavailable. --- ## Sample Workflows

You can open ComfyUI-Drawer sample workflows from ComfyUI's template browser. - `drawer-sample-anima` — A sample workflow that demonstrates the basic Drawer workflow - `drawer-sample-anima-advanced` — A more practical workflow using external custom nodes. Additional models and nodes are required (`rgthree-comfy`, `comfyui-impact-pack`, `comfyui-ppm`, `comfyui-kjnodes`, `comfyui-easy-use`, `seedvr2_videoupscaler`) - `drawer-tutorial-deck-ja` / `drawer-tutorial-deck-en` / `drawer-tutorial-deck-zh` — Tutorials for displaying workflow nodes in Deck --- ## Built-in Gadgets In ComfyUI-Drawer, each tool that lives inside the drawer is called a **gadget**. ### Deck

A gadget for quick parameter control of your workflow. **Display Control:** Add **markers** to node or group titles to control what appears in Deck. | Marker | Target | Effect | |--------|--------|--------| | `📝` | Node title | Shows that node's widgets on the Deck main screen | | `⚡` | Node or group title | Adds a bypass ON/OFF switch | | `[label]` | Node or group title | Creates an exclusive bypass switch among items with the same label | Nodes are sorted by Y position from top to bottom. Groups are sorted by X position from left to right. **Other behavior:** - Groups are always shown as sections if they contain at least one visible node - Ungrouped nodes are collected at the end under Other - A bottom-left button can show nodes that do not contain `📝` --- ### XYZ Plot

https://github.com/user-attachments/assets/dcb8cfd6-3a74-4cb3-8694-e9cd9c7f6282 A parameter sweep gadget familiar from Stable Diffusion web UI (A1111). Behavior is largely consistent with A1111. No dedicated XYZ nodes or extra wiring are required; sweep the widgets and bypass states already present in the current workflow. **Basic features:** - Assign any widget from any node to the X/Y/Z axes for sequential generation - Text widgets automatically use Prompt S/R (Search & Replace) mode - Bypass axes — use node ON/OFF, Deck group toggles, group switches, and node switches as sweep dimensions - **Zip mode** — pair two adjacent axes so they step in lock-step instead of producing a cartesian product (e.g. sweep `(model, lora)` pairs together on X+Y) - Automatically generates a labeled grid composite image and saves it to output **Technical details:** | Feature | Details | |---------|---------| | **Queue lock** | During a sweep, `app.queuePrompt` is monkey-patched to block external queue submissions. It is restored after the sweep finishes | | **Seed pinning** | A snapshot of all widget values is taken at sweep start. Before each iteration, the snapshot is restored, then axis values are applied on top | | **DrawerSeed integration** | DrawerSeed randomization is executed once just before the sweep. During the sweep, `window.__xyzSweepActive` suppresses DrawerSeed's queue hook randomization | | **batch_size enforcement** | Non-sweep `batch_size` widgets are forced to `1`. `control_after_generate` is forced to `fixed` | | **Zip mode** | A "Zip" checkbox between each axis pair locks them into lock-step iteration. X+Y zip with 3 values each → 3 generations instead of 9. Mismatched lengths are padded with no-ops and flagged in preflight | | **Preflight validation** | Widget type and value ranges are validated before the sweep starts; mismatches trigger a warning | | **Server disconnect detection** | WebSocket `status` / `reconnecting` events are monitored, and the sweep is aborted immediately if the server disconnects | | **Workflow embedding** | Embeds workflow JSON into composite images as PNG PngInfo or JPEG/WebP EXIF | --- ### Gallery

A gadget for browsing media and folders under the output, input, and temp directories. - Folder navigation with breadcrumbs, sorting by name/date/size - File rename, move (D&D / batch selection), and delete - Filename search works without an index; prompt, workflow, node type, and node title metadata search use an explicitly created SQLite search index - Search supports quoted phrases, space-separated AND terms, and NOT terms with `-word` or `-"quoted phrase"` - Node type-scoped search can target values from a specific node type with syntax such as `type:CLIPTextEncode[white hair -night]`. The `[...]` part acts like a virtual search box for values inside that node type, using the same phrase / AND / NOT rules as the main search field - Node title-scoped search is also available with syntax such as `title:My Prompt Node[school uniform]` or `title:"Prompt A"[blue sky]`. The title part matches node titles, and the `[...]` part searches values inside matching titled nodes - Third-party custom metadata can be searched when a custom node registers a Drawer index contributor. Custom fields use `namespace[value]` or `namespace:key[value]`, for example `myPlugin:tags[black hair]` - Search filters include target field, date range, and file size, with a compact mobile-friendly two-row search toolbar - Node type, user dictionary, Danbooru dictionary, and registered custom metadata key autocomplete are available in the Gallery search field - New folder creation, folder move, and folder delete --- ### Model Viewer

A gadget for browsing models and folders under ComfyUI's models directory and model paths added through `extra_model_paths.yaml`. - Supports all model types, such as checkpoints, loras, vae, embeddings, controlnet, upscale_models, and more - **CivitAI sync** — Fetch metadata and preview images by SHA256 hash matching, with `.red` / `.com` fallback - **Node matching** — From the info card, apply a model to compatible loader nodes in the current workflow. This scans all nodes, including subgraphs, Combo Clone widgets, and connected DrawerControls - **Trigger words** — CivitAI `trainedWords` are shown automatically. Custom words can also be added for LoRA models - Sidecar thumbnail support, with output-image picker and delete actions - Video previews (`.mp4` / `.webm`) in the grid and info card - Per-model user memos persisted in `.drawer.json` --- ## Workflow Utilities

### User Dictionaries & Wildcards A built-in dictionary service for prompt autocomplete. https://github.com/user-attachments/assets/34237d5e-cd92-4a8e-a638-cb6d98256536 - **Danbooru tag dictionary** — Tag database with usage counts (CSV) - **User dictionaries** — Create custom tag → insert text mappings - **Wildcards** — Use `__name__` syntax to randomly select one line from a list - **CSV / TXT import** — Import existing tag files - **Comment syntax** — Use `//`, `#`, and `/* */` to comment out parts of prompts - **No nodes required** — Wildcards and comment stripping are applied automatically when the prompt is queued Dictionaries can be created, edited, and toggled from the Settings panel. You do not need to add wildcard, dictionary, or preprocessing nodes to the workflow. Normal prompt nodes, text passed through DrawerControls, and other string widgets can use comment stripping and wildcard expansion automatically when ComfyUI queues the prompt. **Prompt processing behavior:** - `__name__` expands to one line from an enabled wildcard dictionary with the same name - Expansion is based on `seed`, `noise_seed`, or `seed_value` in the workflow. If a seed is found, the same seed produces the same expansion. If no seed is found, normal random selection is used - Comments are removed from the execution prompt, but preserved in the workflow metadata embedded in output images - `/* ... */` is a block comment, `// ...` is a line comment, and `# ...` at the beginning of a line is also treated as a line comment - Escaped markers such as `\#` and `\/` are treated as literal characters, not comment starts **CSV / TXT import format:** User dictionaries are imported as CSV. Wildcards are imported as TXT. CSV files require a header row. ```csv tag,insert_text sky,"blue sky, clouds" masterpiece,"masterpiece, best quality" ``` - `tag` is the name shown in autocomplete - `insert_text` is the text inserted when selected. If empty, the `tag` itself is used - Values containing commas should be quoted like normal CSV Wildcard TXT files use one candidate per line. The imported filename, or the dictionary name set in Settings, becomes the name used in `__name__`. ```txt blue sky, sunlight night city, neon lights soft backlight, floating particles ``` - Empty lines are ignored - Lines beginning with `#` or `//` are not used as wildcard candidates - Recursive wildcard expansion is not performed. If a candidate contains `__other__`, that text remains as-is - Wildcards inside comments are not expanded ### Mask Editor A fullscreen mask editor available from image context menus. It saves generated masks under `input/drawer_masks` and can apply them directly to `LoadImageMask` nodes. --- ## Shared UI System ### Context Menu A right-click / long-press menu. It supports opening media in a new tab, sending images to LoadImage / LoadImageMask, opening media as a workflow, downloading, and gadget-specific custom menu actions. ### Lightbox A fullscreen media viewer for images, videos, and audio. It opens from Gallery, Deck, XYZ Plot, and shared media cards. - Keyboard navigation (←→ / A/D), swipe, and previous/next buttons - Click the current image, or use the context menu, to open media in a new tab - Images can be dragged from the lightbox onto the ComfyUI canvas - Context menu support inside the lightbox ### Popups & Dialogs Provides `showAlert`, `showConfirm`, `showPrompt`, and `showDialog`. ### File Picker A modal picker for media selection. It supports image, video, and audio selection with thumbnail folder navigation. ### Multi-language Support Supports English, Japanese, and Chinese (Simplified). The language automatically follows ComfyUI's Settings > Locale preference. --- ## Drawer Nodes 9 utility nodes with dedicated Deck-side UI support. | Node | Description | |------|-------------| | **DrawerSeed** | Seed node with randomize / fixed modes | | **DrawerControls1 / 4 / 8 / 12** | Compact parameter hubs. Only connected outputs appear as Deck controls: `int`, `float`, `combo`, `bool`, or `string`. Use `string \| Label` for single-line text and `string \| Label \| multiline` for multiline text. Combo options are read from the connected target widget | | **DrawerConcat** | Joins variable-length text inputs with a configurable delimiter | | **DrawerSize** | Resolution presets for landscape, portrait, and square outputs | | **DrawerSwitch** | Universal A/B switch for any data type. If B is connected and non-empty, B is returned; otherwise A is returned. Uses ComfyUI V3 API lazy evaluation so the unnecessary branch is not executed | | **DrawerSwitchChain** | Variable-length fallback chain. The last connected non-empty value wins | --- ## Developer / Agent Notes ComfyUI-Drawer is designed as an extensible platform. You can create **self-contained gadgets in a single file**: 1. Copy [docs/gadget-template.js](docs/gadget-template.js) 2. Place it in any `custom_nodes/*/web/js/` folder. It does not have to be inside ComfyUI-Drawer itself 3. Modify the class and restart ComfyUI ```js import { app } from "../../../scripts/app.js"; app.registerExtension({ name: "Comfy.Drawer.MyGadget", async setup() { const drawer = window.ComfyDrawer ?? await new Promise(resolve => window.addEventListener('comfy-drawer:ready', e => resolve(e.detail), { once: true }) ); const { GadgetBase } = drawer; class MyGadget extends GadgetBase { constructor() { super('my-gadget', { label: 'My Gadget', icon: '🔧', order: 10 }); } onMount(container, bus, bridge) { container.innerHTML = '

Hello World

'; } } drawer.registerGadget(new MyGadget()); }, }); ``` - `window.ComfyDrawer` exposes services such as `GadgetBase`, `bus`, `bridge`, `settings`, and `dict` - CSS can be injected with a `

Name	Type	Default	Description
value_1	STRING		—
def_1	STRING		—

📝 Controls 1 (Drawer)

Inputs (2)

Outputs (1)