ComfyUI-NodeHider

English | Русский

---

A lightweight ComfyUI extension that lets you hide any node on the canvas behind a stylish spoiler overlay. Hover over the node to reveal it — perfect for keeping your workspace clean while working on complex workflows.

<img width="1231" height="643" alt="изображение" src="https://github.com/user-attachments/assets/58c3660f-5b83-4102-8b07-19abee76dcdb" />

Features

• Universal — works with every node type: image previews, video previews, custom nodes, etc.
• Hover to reveal — spoiler disappears when you move the mouse over the node
• Canvas-aware — correctly hides both DOM widgets and canvas-drawn content (images, videos)
• Zero dependencies — pure JavaScript, no external libraries
• Persists across sessions — spoiler state is saved in node properties

Installation

Via ComfyUI Manager

1. Open ComfyUI Manager
2. Search for ComfyUI-NodeHider
3. Click Install
4. Restart ComfyUI

Manual Installation

cd ComfyUI/custom_nodes
git clone https://github.com/bananasss00/ComfyUI-NodeHider.git

Then restart ComfyUI.

Usage

1. Right-click on any node in the canvas
2. Select 🔒 Add spoiler from the context menu
3. The node will be covered with a striped spoiler overlay
4. Hover over the node to reveal it — move the mouse away to hide again
5. To remove: right-click the node and select 🔓 Remove spoiler

How It Works

The extension hooks into ComfyUI's canvas rendering pipeline and handles three layers of node content:

| Layer | Method | Examples | |-------|--------|----------| | DOM widgets | CSS opacity + pointer-events | Text inputs, dropdowns, buttons | | Canvas previews | Temporarily suppresses drawWidget | SaveImage, PreviewImage, SaveVideo | | Overlay | Canvas 2D drawing | Diagonal-stripe pattern + text label |

Mouse detection uses a dual approach (node_over + coordinate-based bounding box check) to handle cases where DOM widgets intercept mouse events.

Project Structure

ComfyUI-NodeHider/
├── js/
│   └── nodeHider.js    # Main extension logic
├── __init__.py         # ComfyUI entry point
└── pyproject.toml      # Package metadata

Compatibility

• ComfyUI (latest)
• Works with all built-in and custom nodes
• No conflicts with other extensions

---

<a name="russian"></a>

🇷🇺 Русский

ComfyUI-NodeHider — лёгкое расширение для ComfyUI, позволяющее скрывать любую ноду на канвасе за стильным спойлером. Наведите мышь, чтобы увидеть содержимое — идеально для поддержания порядка в сложных воркфлоу.

Возможности

• Универсальность — работает со всеми типами нод: превью изображений, видео, кастомные ноды и т.д.
• Наведение для раскрытия — спойлер исчезает при наведении курсора
• Полное скрытие — корректно скрывает как DOM-виджеты, так и контент, отрисованный на canvas (изображения, видео)
• Без зависимостей — чистый JavaScript, без внешних библиотек
• Сохранение состояния — состояние спойлера хранится в свойствах ноды и сохраняется между сессиями

Установка

Через ComfyUI Manager

1. Откройте ComfyUI Manager
2. Найдите ComfyUI-NodeHider
3. Нажмите Install
4. Перезапустите ComfyUI

Вручную

cd ComfyUI/custom_nodes
git clone https://github.com/bananasss00/ComfyUI-NodeHider.git

Затем перезапустите ComfyUI.

Использование

1. Кликните правой кнопкой по любой ноде на канвасе
2. Выберите 🔒 Скрыть под спойлер в контекстном меню
3. Нода будет закрыта спойлером с диагональной штриховкой
4. Наведите мышь на ноду, чтобы раскрыть — уберите курсор, чтобы снова скрыть
5. Чтобы убрать: кликните правой кнопкой и выберите 🔓 Убрать спойлер

Как это работает

Расширение встраивается в процесс рендеринга канваса ComfyUI и обрабатывает три уровня содержимого нод:

| Уровень | Метод | Примеры | |---------|-------|---------| | DOM-виджеты | CSS opacity + pointer-events | Текстовые поля, выпадающие списки, кнопки | | Canvas-превью | Временное отключение drawWidget | SaveImage, PreviewImage, SaveVideo | | Оверлей | Отрисовка через Canvas 2D | Диагональная штриховка + текстовая метка |

Определение наведения мыши использует двойную проверку (node_over + проверка координат), чтобы корректно работать в ситуациях, когда DOM-виджеты перехватывают события мыши.

Структура проекта

ComfyUI-NodeHider/
├── js/
│   └── nodeHider.js    # Основная логика расширения
├── __init__.py         # Точка входа ComfyUI
└── pyproject.toml      # Метаданные пакета

Совместимость

• ComfyUI (последняя версия)
• Работает со всеми встроенными и кастомными нодами
• Не конфликтует с другими расширениями