A powerful, extensible ComfyUI custom node with a modular Views Extension System that renders content in a secure embedded iframe viewer. Views are dynamically loaded and can be added, removed, or modified without touching core code.
- Screenshots
- Features
- Third-Party Views
- Built-in Views
- Installation
- Usage
- Creating Extensions
- Troubleshooting
- Third-Party Licenses
- License
Screenshots
- Modular architecture - Each content type is handled by its own view extension
- Dynamic loading - Views are auto-discovered from
web/views/view_manifest.js - Priority-based detection - Higher priority views are checked first for content matching
- Extensible - Add custom views without modifying core viewer code
- Theme integration - All views receive ComfyUI theme tokens for consistent styling
- Automatic detection - When multiple views can handle the same content, a view selector appears
- View switching - Toggle between different visualizations of the same data (e.g., tensor as Canvas vs Object inspector)
- Priority-based default - The highest priority matching view is shown by default
- Common use case - IMAGE tensors are detected by both Canvas (for compositing) and Object (for metrics/inspection) views
- Edit - Modify content directly in the node (supports both single and list content)
- Clear - Reset all content
- Fullscreen - Expand viewer to full screen (press Escape to exit)
- Download - Save content with auto-detected file extension
- Single content → Downloads with appropriate extension (
.html,.svg,.md,.py, etc.) - List content → Downloads as
.zipcontaining individually named files
- Single content → Downloads with appropriate extension (
- Multiple items - Displays list inputs as individual indexed containers
- Per-item checkboxes - Filter which items to include in output
- Per-item copy buttons - Copy individual list items to clipboard
- Per-item editing - Edit each list item in its own textarea
- Flexible input - Accepts any type via
contentinput (STRING, lists, objects, IMAGE tensors) - Content priority - User edits > Backend execution > Connected content
- Workflow persistence - Manual edits saved with the workflow
- Sandboxed iframe - Content runs in isolated sandbox without access to parent page
- No same-origin - Iframe cannot access ComfyUI's JavaScript context or localStorage
| View Name | View Description | View Link |
|---|---|---|
| Image Search | Search input/output/temp directories for images by input image | Image Search |
| OpenReel Video | Edit videos generated within ComfyUI (e.g., from Wan, LTX,, etc.) | OpenReel Video |
The Content Viewer includes 12 built-in views, listed by detection priority:
| View | Priority | Detection | Description |
|---|---|---|---|
| SVG | 110 | <svg tag with xmlns |
Renders SVG graphics centered in viewport |
| HTML | 100 | <!DOCTYPE, <html, common HTML tags |
Full HTML rendering with scripts |
| Canvas (alpha wip) | 95 | JSON with type: "canvas_composer" |
Beta implementation of a infinite canvas image compositor with layers |
| JSON | 90 | Valid JSON starting with { or [ |
Collapsible tree view with syntax highlighting |
| Terminal | 80 | ANSI escape codes (\x1b[, \033[) |
Colored terminal output parser |
| Markdown | 70 | Headers, lists, links, code blocks | Full MD with Mermaid diagrams & KaTeX math |
| Python | 60 | import, def, class, self. |
Prism.js syntax highlighting |
| JavaScript | 55 | function, const, let, arrow functions |
Prism.js syntax highlighting |
| CSV | 50 | Comma-separated values across lines | Styled table rendering |
| CSS | 45 | Selectors with {}, properties |
Prism.js syntax highlighting |
| YAML | 40 | Key-value pairs, --- markers |
Syntax highlighted display |
| Text | 0 | Default fallback | Monospace plain text |
Canvas View - Infinite canvas image compositor
The Canvas view provides a full-featured image compositing workspace:
- Layer management - Add, reorder, hide/show, delete layers
- Transform tools - Move, scale, rotate layers with handles
- Brush tools - Paint, erase, clone stamp with adjustable size/hardness/opacity
- Layer effects - Opacity, blend modes (16 modes), stroke, shadow
- Layer masks - Non-destructive masking with brush tools
- Export - Download PNG or send composite to node output as IMAGE tensor
- Navigator - Mini-map for large canvas navigation
- Keyboard shortcuts - V (select), H (pan), B (brush), Delete, Ctrl+Z/Y
The Canvas view outputs IMAGE and MASK tensors that can be connected to other ComfyUI nodes.
Markdown View - Rich text with diagrams and math
Supports full Markdown syntax plus:
- Mermaid diagrams - Flowcharts, sequence diagrams, etc. in
```mermaidblocks - KaTeX math - LaTeX formulas via
$$...$$(block) or$...$(inline) - Tables - Styled with zebra striping
- Code blocks - Syntax highlighted with Prism.js
- Task lists - Checkbox items
- [x]and- [ ]
JSON View - Interactive tree viewer
- Collapsible nodes - Click to expand/collapse objects and arrays
- Syntax highlighting - Keys, strings, numbers, booleans, null
- Copy on click - Click any value to copy it
- Nested formatting - Proper indentation for deep structures
Terminal View - ANSI escape code parser
Renders terminal output with full ANSI support:
- 16 colors - Standard terminal colors
- 256 colors - Extended color palette
- 24-bit colors - True color RGB
- Styles - Bold, italic, underline, strikethrough
- Reset codes - Proper handling of reset sequences
Option A (git clone)
cd ComfyUI/custom_nodes
git clone https://github.com/WASasquatch/ComfyUI_Viewer.gitOption B (ComfyUI Manager)
- Open Manager and search for ComfyUI_Viewer
Option C (zip)
- Download and extract to
ComfyUI/custom_nodes/ComfyUI_Viewer
- Add the Content Viewer node (found in
WAS/Viewcategory) - Connect any STRING output to the
contentinput - Content type is auto-detected and rendered with the appropriate view
- Add the Content Viewer node
- Click Edit in the controls bar
- Enter your HTML, Markdown, or text content
- Click Save to render
- Connect IMAGE outputs to the Canvas Composer node
- Images appear in the source panel - drag them onto the canvas
- Use transform handles to position and scale
- Use brush tools to paint or mask
- Click Send to Output to pass the composite downstream
The Content Viewer supports custom view extensions for adding new content types, interactive UIs, and visualizations.
📖 See the Extension Development Guide for complete documentation on:
- Creating extension packages for distribution
- Adding frontend views (JavaScript)
- Adding backend parsers (Python)
- Parser + View integration
- Troubleshooting
Quick install for users:
- Download an extension
.zipfile - Place it in
ComfyUI_Viewer/extensions/ - Restart ComfyUI
- Ensure the connected node is executing (queue the workflow)
- Try disconnecting and reconnecting the input
- Check the browser console (F12) for
[WAS Viewer]messages - Verify your view's
detect()returns a score > 0 for your content - Check priority - higher priority views are tested first
- Ensure images are in ComfyUI's input directory.
- Search for a folder that looks like
was_viewer_032bb95cwhere the last part is a unique hash for that nodes canvas content.
- Search for a folder that looks like
- Check for CORS errors in browser console
- Verify the file is listed in
view_manifest.js - Check for JavaScript errors in browser console
- Ensure
export default YourViewClassis present
This project includes the following third-party libraries:
| Library | License | Description | Location |
|---|---|---|---|
| Prism.js | MIT | Syntax highlighting for code blocks | web/views/code_scripts/ |
| KaTeX | MIT | LaTeX math rendering | web/views/markdown_scripts/ |
| Mermaid | MIT | Diagram and flowchart rendering | web/views/markdown_scripts/ |
| KaTeX Fonts | SIL OFL 1.1 | Math fonts for KaTeX | fonts/ |
Full license texts are included with each library in their respective directories.
MIT License - See LICENSE for details