google-labs-jules[bot]andAEmotionStudio
07374a8306
- Replaced read-only hex code span with an editable text input in `createColorPicker` - Implemented bidirectional sync between text input and color picker - Added validation for hex codes and auto-correction on change/blur - Ensured keydown propagation is stopped to prevent triggering global shortcuts - Added aria-label for accessibility - Updated unit tests to verify sync logic and event handling - Added CSS styles for `magnify-color-preview` input to match UI design Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
ComfyUI-MagnifyGlass
A powerful, customizable magnifying glass extension for ComfyUI.
Inspect fine details in your generated images, node connections, and canvas with ease.
Features • Installation • Usage • Configuration • Known Issues • Contributing • Changelog
🚀 What's New in v1.13.1 (February 7, 2026)
Stability & Cross-Browser Fixes
- 🐛 Glass Drag Fixed: Resolved an issue where dragging the magnify glass would corrupt LiteGraph canvas state, leaving the cursor stuck in grab/pan mode and all canvas clicks non-functional. Now works reliably across Chromium, Firefox, and Brave.
- 🐛 Ghost Interactions Fixed: Fixed cursor actions (grab, text-input, pointer) persisting after hiding the info panel via the X key toggle.
- 🔧 Cross-Browser Compatibility: Glass drag now uses pointer events to match LiteGraph's event model, ensuring consistent behavior across all browsers.
📄 See CHANGELOG.md for the complete version history.
NotebookLM Overview: Exploring the features and updates of the ComfyUI-MagnifyGlass extension. (Click to watch on YouTube)
✨ Features
🔍 Magnifying Glass
|
ℹ️ Inspector Panel
|
⚙️ Sidebar Integration
|
🖥️ Multi-Monitor Pop-Out
|
♿ Accessibility Suite
|
📦 Installation
Option 1: ComfyUI Manager (Recommended)
- Open ComfyUI Manager.
- Search for
ComfyUI-MagnifyGlass. - Click Install.
Option 2: Manual Install
cd /path/to/ComfyUI/custom_nodes
git clone https://github.com/AEmotionStudio/ComfyUI-MagnifyGlass.git
🎮 Usage
| Key | Action |
|---|---|
X |
Activate / Toggle Tool (Master Switch) |
H |
Toggle Follow Cursor Mode |
I |
Toggle Inspector Panel Visibility |
G |
Toggle Glass Preview (Enters "Inspector Only" Mode) |
Shift+P |
Open Pop-Out Viewer in New Tab |
U |
Pin/Unpin Inspector Panel |
O |
Reset Offsets |
* |
Focus Current Node (Center canvas on inspected node) |
Left/Right |
Navigate Previous/Next node in execution order |
D |
Force Direct Capture (Optional after v1.11.0 improvements) |
| Arrows | Nudge Glass Position (When not navigating nodes) |
Pro Tip: Toggle the Glass Preview (
G) off to keep the Inspector Panel active but hide the magnifying preview.
⚙️ Configuration
Access settings via the new Sidebar Panel or the ComfyUI Settings (⚙️) menu.
🔍 Magnify Glass
| Setting | Default | Description |
|---|---|---|
| Zoom Factor | 300% |
Magnification level (100% - 1000%). |
| Glass Size | 300px |
Diameter/Size of the lens (50px - 500px). |
| Shape | Rounded Square |
Circle, Square, or Rounded Square. |
| Position | Top-Right |
Offset position relative to cursor. |
| Filtering | Linear |
Texture filtering: Linear (smooth) or Nearest (pixelated). |
| Border Width | 2px |
Width of the glass border. |
| Border Color | #FFFFFF |
Color of the glass border. |
| Show Border | On |
Toggle the glass border visibility. |
| Follow Cursor | Off |
If On, glass moves with your mouse. |
| Always Active | On |
Keep the glass visible after activation. |
| Force Direct Capture | Off |
High-accuracy mode for low zoom levels. |
| Show Mini Cursor | Off |
Displays a cursor preview inside the glass. |
ℹ️ Information Panel
| Setting | Default | Description |
|---|---|---|
| Enable Panel | On |
Toggle the visibility of the node inspector. |
| Persist Info | Off |
Keep last node info visible when not hovering a node. |
| Node Highlight | On |
Show high-contrast border around inspected node. |
| Position | Bottom |
Position relative to the glass (Top/Bottom/Left/Right). |
| Width | 300px |
Width of the inspector panel. |
| Max Height | 300px |
Maximum vertical size before scrolling. |
| Font Size | 14px |
Size of the text in the inspector. |
| Opacity | 100% |
Background transparency of the panel. |
| Font Family | System |
Custom font selection for the panel. |
| Text Color | #6B7280 |
Custom text color for node data. |
| Accent Color | #3B82F6 |
Color for headers and highlights. |
| Hover Controls | On |
Show floating quick-action buttons. |
| Controls Position | Left |
Anchor point for the floating controls. |
♿ Accessibility
| Setting | Default | Description |
|---|---|---|
| Enable Accessibility | Off |
Enable accessibility enhancements for the glass preview. |
| High Contrast | Off |
Boost text contrast with bright colors. |
| Text Glow | Off |
Add a glow effect behind text for better visibility. |
| Glow Color | #FFFF00 |
Customizable color for the text glow. |
| Glow Intensity | 5px |
Blur radius/intensity of the text glow. |
| Font Scale | 100% |
Increase text size within the glass view (up to 200%). |
| Bold Text | Off |
Force bold text weight for improved legibility. |
| Text Outline | Off |
Add a high-contrast outline around text. |
| Outline Color | #000000 |
Customizable color for the text outline. |
| Node Emphasis | Off |
Apply extra styling/weight to node titles. |
| Invert Colors | Off |
Invert all colors in the glass view. |
| Grayscale Mode | Off |
Remove all color saturation from the view. |
| Reduce Motion | Off |
Disable smooth animations for instant feedback. |
🐛 Known Issues
- FPS Counter Visual Bug: While the magnifying glass is active, the ComfyUI FPS counter may display inflated values (often reaching the ~10,000 FPS limit). This is a visual display issue only and does not appear to affect actual performance.
🤝 Contributing
Contributions are welcome! Please see the CONTRIBUTING.md for guidelines on how to get started. Whether it's bug reports, feature suggestions, or pull requests, your help is appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
📝 License
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.
Developed by Æmotion Studio
📺 STOP SQUINTING!
Are YOU tired of tiny nodes? Do messy workflows make you want to SCREAM? 😱 Get ComfyUI-MagnifyGlass TODAY! It ZOOMS! It INSPECTS! It POPS OUT! ⚡️🔍
(Click to watch on YouTube)