ComfyUI Content Viewer
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.
Table of Contents
Screenshots
Features
Third-Party Views
Built-in Views
Installation
Usage
Creating Extensions
Troubleshooting
Third-Party Licenses
License
Screenshots
Screenshots
Features
Views Extension System
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
Multi-View Support
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
Controls
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 .zip containing individually named files
String List Support
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
Data Flow
Flexible input – Accepts any type via content input (STRING, lists, objects, IMAGE tensors)
Content priority – User edits > Backend execution > Connected content
Workflow persistence – Manual edits saved with the workflow
Security
Sandboxed iframe – Content runs in isolated sandbox without access to parent page
No same-origin – Iframe cannot access ComfyUI’s JavaScript context or localStorage
Third-Party Views
| 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 |
Built-in Views
The Content Viewer includes 12 built-in views, listed by detection priority:
| View | Priority | Detection | Description |
|——|———-|———–|————-|
| SVG | 110 | tag with xmlns | Renders SVG graphics centered in viewport |
| HTML | 100 | , , 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 |
View Details
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 `mermaid blocks
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
Installation
Option A (git clone)
cd ComfyUI/custom_nodes
git clone https://github.com/WASasquatch/ComfyUI_Viewer.git
Option B (ComfyUI Manager)
Open Manager and search for ComfyUI_Viewer
Option C (zip)
Download and extract to ComfyUI/custom_nodes/ComfyUI_Viewer
Usage
Basic Usage
Add the Content Viewer node (found in WAS/View category)
Connect any STRING output to the content input
Content type is auto-detected and rendered with the appropriate view
As a Notes/Documentation Node
Add the Content Viewer node
Click Edit in the controls bar
Enter your HTML, Markdown, or text content
Click Save to render
Using the Canvas Compositor
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
Creating Extensions
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 .zip file
Place it in ComfyUI_Viewer/extensions/
Restart ComfyUI
Troubleshooting
Content not updating
Ensure the connected node is executing (queue the workflow)
Try disconnecting and reconnecting the input
View not detecting content
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
Canvas images not loading
Ensure images are in ComfyUI's input directory.
Search for a folder that looks like was_viewer_032bb95c where the last part is a unique hash for that nodes canvas content.
Check for CORS errors in browser console
Custom view not appearing
Verify the file is listed in view_manifest.js
Check for JavaScript errors in browser console
Ensure export default YourViewClass is present
Third-Party Licenses
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.
License
MIT License - See LICENSE for details
