Extensions/ComfyUI-NodeHider
ComfyUI Extension

ComfyUI-NodeHider

Universal node hiding extension for ComfyUI. Hide any node on the canvas with a stylish spoiler overlay that disappears on hover.

By bananasss00·Created 5 months ago·Updated 2 months ago· 1
bananasss00/ComfyUI-NodeHider
Nodes—
On cloudLocal install
Stars1
Updated2 months ago
Readme

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" />

Version

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 (последняя версия)
  • Работает со всеми встроенными и кастомными нодами
  • Не конфликтует с другими расширениями