{"id":35746426,"url":"https://github.com/WASasquatch/ComfyUI_Viewer","last_synced_at":"2026-01-12T20:00:47.777Z","repository":{"id":331069714,"uuid":"1125115448","full_name":"WASasquatch/ComfyUI_Viewer","owner":"WASasquatch","description":"ComfyUI Content Viewer - Renders HTML, Markdown, and code in an iframe","archived":false,"fork":false,"pushed_at":"2025-12-31T02:16:05.000Z","size":2648,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-02T19:08:34.247Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WASasquatch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-30T07:02:01.000Z","updated_at":"2025-12-31T02:16:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/WASasquatch/ComfyUI_Viewer","commit_stats":null,"previous_names":["wasasquatch/comfyui_viewer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/WASasquatch/ComfyUI_Viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WASasquatch%2FComfyUI_Viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WASasquatch%2FComfyUI_Viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WASasquatch%2FComfyUI_Viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WASasquatch%2FComfyUI_Viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WASasquatch","download_url":"https://codeload.github.com/WASasquatch/ComfyUI_Viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WASasquatch%2FComfyUI_Viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28354968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T16:14:38.383Z","status":"ssl_error","status_checked_at":"2026-01-12T16:14:34.289Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-06T18:00:43.710Z","updated_at":"2026-01-12T20:00:47.717Z","avatar_url":"https://github.com/WASasquatch.png","language":"JavaScript","funding_links":[],"categories":["Workflows created in 7 days"],"sub_categories":[],"readme":"# ComfyUI Content Viewer\r\n\r\n![ComfyUI](https://img.shields.io/badge/ComfyUI-Custom_Node-blue) \r\n![Frontend Extension](https://img.shields.io/badge/ComfyUI_Frontend-Extension-purple)\r\n![License](https://img.shields.io/badge/License-MIT-green)\r\n\r\nA 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.\r\n\r\n![Screenshot 9](screenshots/screenshot_14.jpg)\r\n\r\n## Table of Contents\r\n\r\n- [Screenshots](#screenshots)\r\n- [Features](#features)\r\n- [Third-Party Views](#third-party-views)\r\n- [Built-in Views](#built-in-views)\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n- [Creating Extensions](#creating-extensions)\r\n- [Troubleshooting](#troubleshooting)\r\n- [Third-Party Licenses](#third-party-licenses)\r\n- [License](#license)\r\n\r\n# Screenshots\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cstrong\u003eScreenshots\u003c/strong\u003e\u003c/summary\u003e\r\n\r\n![Screenshot 1](screenshots/screenshot_1.jpg)\r\n![Screenshot 2](screenshots/screenshot_2.gif)\r\n![Screenshot 3](screenshots/screenshot_3.jpg)\r\n![Screenshot 4](screenshots/screenshot_4.jpg)\r\n![Screenshot 5](screenshots/screenshot_5.jpg)\r\n![Screenshot 6](screenshots/screenshot_6.jpg)\r\n![Screenshot 7](screenshots/screenshot_7.jpg)\r\n![Screenshot 8](screenshots/screenshot_8.jpg)\r\n![Screenshot 9](screenshots/screenshot_9.jpg)\r\n![Screenshot 6](screenshots/screenshot_10.jpg)\r\n![Screenshot 7](screenshots/screenshot_11.jpg)\r\n![Screenshot 8](screenshots/screenshot_12.jpg)\r\n![Screenshot 9](screenshots/screenshot_13.jpg)\r\n![Screenshot 9](screenshots/screenshot_14.jpg)\r\n\r\n\u003c/details\u003e\r\n\r\n## Features\r\n\r\n### Views Extension System\r\n- **Modular architecture** - Each content type is handled by its own view extension\r\n- **Dynamic loading** - Views are auto-discovered from `web/views/view_manifest.js`\r\n- **Priority-based detection** - Higher priority views are checked first for content matching\r\n- **Extensible** - Add custom views without modifying core viewer code\r\n- **Theme integration** - All views receive ComfyUI theme tokens for consistent styling\r\n\r\n### Multi-View Support\r\n- **Automatic detection** - When multiple views can handle the same content, a view selector appears\r\n- **View switching** - Toggle between different visualizations of the same data (e.g., tensor as Canvas vs Object inspector)\r\n- **Priority-based default** - The highest priority matching view is shown by default\r\n- **Common use case** - IMAGE tensors are detected by both Canvas (for compositing) and Object (for metrics/inspection) views\r\n\r\n### Controls\r\n- **Edit** - Modify content directly in the node (supports both single and list content)\r\n- **Clear** - Reset all content\r\n- **Fullscreen** - Expand viewer to full screen (press Escape to exit)\r\n- **Download** - Save content with auto-detected file extension\r\n  - Single content → Downloads with appropriate extension (`.html`, `.svg`, `.md`, `.py`, etc.)\r\n  - List content → Downloads as `.zip` containing individually named files\r\n\r\n### String List Support\r\n- **Multiple items** - Displays list  inputs as individual indexed containers\r\n- **Per-item checkboxes** - Filter which items to include in output\r\n- **Per-item copy buttons** - Copy individual list items to clipboard\r\n- **Per-item editing** - Edit each list item in its own textarea\r\n\r\n### Data Flow\r\n- **Flexible input** - Accepts any type via `content` input (STRING, lists, objects, IMAGE tensors)\r\n- **Content priority** - User edits \u003e Backend execution \u003e Connected content\r\n- **Workflow persistence** - Manual edits saved with the workflow\r\n\r\n### Security\r\n- **Sandboxed iframe** - Content runs in isolated sandbox without access to parent page\r\n- **No same-origin** - Iframe cannot access ComfyUI's JavaScript context or localStorage\r\n\r\n---\r\n\r\n## Third-Party Views\r\n\r\n| View Name | View Description | View Link |\r\n|-----------|------------------|-----------|\r\n| **Image Search** | Search input/output/temp directories for images by input image | [Image Search](https://github.com/WASasquatch/ComfyUI_Viewer_Image_Search_Extension) |\r\n\r\n## Built-in Views\r\n\r\nThe Content Viewer includes 12 built-in views, listed by detection priority:\r\n\r\n| View | Priority | Detection | Description |\r\n|------|----------|-----------|-------------|\r\n| **SVG** | 110 | `\u003csvg` tag with xmlns | Renders SVG graphics centered in viewport |\r\n| **HTML** | 100 | `\u003c!DOCTYPE`, `\u003chtml`, common HTML tags | Full HTML rendering with scripts |\r\n| **Canvas** (alpha wip) | 95 | JSON with `type: \"canvas_composer\"` | Beta implementation of a infinite canvas image compositor with layers |\r\n| **JSON** | 90 | Valid JSON starting with `{` or `[` | Collapsible tree view with syntax highlighting |\r\n| **Terminal** | 80 | ANSI escape codes (`\\x1b[`, `\\033[`) | Colored terminal output parser |\r\n| **Markdown** | 70 | Headers, lists, links, code blocks | Full MD with Mermaid diagrams \u0026 KaTeX math |\r\n| **Python** | 60 | `import`, `def`, `class`, `self.` | Prism.js syntax highlighting |\r\n| **JavaScript** | 55 | `function`, `const`, `let`, arrow functions | Prism.js syntax highlighting |\r\n| **CSV** | 50 | Comma-separated values across lines | Styled table rendering |\r\n| **CSS** | 45 | Selectors with `{}`, properties | Prism.js syntax highlighting |\r\n| **YAML** | 40 | Key-value pairs, `---` markers | Syntax highlighted display |\r\n| **Text** | 0 | Default fallback | Monospace plain text |\r\n\r\n### View Details\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cstrong\u003eCanvas View\u003c/strong\u003e - Infinite canvas image compositor\u003c/summary\u003e\r\n\r\nThe Canvas view provides a full-featured image compositing workspace:\r\n\r\n- **Layer management** - Add, reorder, hide/show, delete layers\r\n- **Transform tools** - Move, scale, rotate layers with handles\r\n- **Brush tools** - Paint, erase, clone stamp with adjustable size/hardness/opacity\r\n- **Layer effects** - Opacity, blend modes (16 modes), stroke, shadow\r\n- **Layer masks** - Non-destructive masking with brush tools\r\n- **Export** - Download PNG or send composite to node output as IMAGE tensor\r\n- **Navigator** - Mini-map for large canvas navigation\r\n- **Keyboard shortcuts** - V (select), H (pan), B (brush), Delete, Ctrl+Z/Y\r\n\r\nThe Canvas view outputs `IMAGE` and `MASK` tensors that can be connected to other ComfyUI nodes.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cstrong\u003eMarkdown View\u003c/strong\u003e - Rich text with diagrams and math\u003c/summary\u003e\r\n\r\nSupports full Markdown syntax plus:\r\n\r\n- **Mermaid diagrams** - Flowcharts, sequence diagrams, etc. in ` ```mermaid ` blocks\r\n- **KaTeX math** - LaTeX formulas via `$$...$$` (block) or `$...$` (inline)\r\n- **Tables** - Styled with zebra striping\r\n- **Code blocks** - Syntax highlighted with Prism.js\r\n- **Task lists** - Checkbox items `- [x]` and `- [ ]`\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cstrong\u003eJSON View\u003c/strong\u003e - Interactive tree viewer\u003c/summary\u003e\r\n\r\n- **Collapsible nodes** - Click to expand/collapse objects and arrays\r\n- **Syntax highlighting** - Keys, strings, numbers, booleans, null\r\n- **Copy on click** - Click any value to copy it\r\n- **Nested formatting** - Proper indentation for deep structures\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cstrong\u003eTerminal View\u003c/strong\u003e - ANSI escape code parser\u003c/summary\u003e\r\n\r\nRenders terminal output with full ANSI support:\r\n\r\n- **16 colors** - Standard terminal colors\r\n- **256 colors** - Extended color palette\r\n- **24-bit colors** - True color RGB\r\n- **Styles** - Bold, italic, underline, strikethrough\r\n- **Reset codes** - Proper handling of reset sequences\r\n\r\n\u003c/details\u003e\r\n\r\n---\r\n\r\n## Installation\r\n\r\n**Option A (git clone)**\r\n```bash\r\ncd ComfyUI/custom_nodes\r\ngit clone https://github.com/WASasquatch/ComfyUI_Viewer.git\r\n```\r\n\r\n**Option B (ComfyUI Manager)**\r\n- Open Manager and search for **ComfyUI_Viewer**\r\n\r\n**Option C (zip)**\r\n- Download and extract to `ComfyUI/custom_nodes/ComfyUI_Viewer`\r\n\r\n---\r\n\r\n## Usage\r\n\r\n### Basic Usage\r\n1. Add the **Content Viewer** node (found in `WAS/View` category)\r\n2. Connect any STRING output to the `content` input\r\n3. Content type is auto-detected and rendered with the appropriate view\r\n\r\n### As a Notes/Documentation Node\r\n1. Add the **Content Viewer** node\r\n2. Click **Edit** in the controls bar\r\n3. Enter your HTML, Markdown, or text content\r\n4. Click **Save** to render\r\n\r\n### Using the Canvas Compositor\r\n1. Connect IMAGE outputs to the Canvas Composer node\r\n2. Images appear in the source panel - drag them onto the canvas\r\n3. Use transform handles to position and scale\r\n4. Use brush tools to paint or mask\r\n5. Click **Send to Output** to pass the composite downstream\r\n\r\n---\r\n\r\n## Creating Extensions\r\n\r\nThe Content Viewer supports custom view extensions for adding new content types, interactive UIs, and visualizations.\r\n\r\n**📖 See the [Extension Development Guide](extensions/README.md) for complete documentation on:**\r\n\r\n- Creating extension packages for distribution\r\n- Adding frontend views (JavaScript)\r\n- Adding backend parsers (Python)\r\n- Parser + View integration\r\n- Troubleshooting\r\n\r\n**Quick install for users:**\r\n1. Download an extension `.zip` file\r\n2. Place it in `ComfyUI_Viewer/extensions/`\r\n3. Restart ComfyUI\r\n\r\n---\r\n\r\n## Troubleshooting\r\n\r\n### Content not updating\r\n- Ensure the connected node is executing (queue the workflow)\r\n- Try disconnecting and reconnecting the input\r\n\r\n### View not detecting content\r\n- Check the browser console (F12) for `[WAS Viewer]` messages\r\n- Verify your view's `detect()` returns a score \u003e 0 for your content\r\n- Check priority - higher priority views are tested first\r\n\r\n### Canvas images not loading\r\n- Ensure images are in ComfyUI's input directory.\r\n  - Search for a folder that looks like `was_viewer_032bb95c` where the last part is a unique hash for that nodes canvas content. \r\n- Check for CORS errors in browser console\r\n\r\n### Custom view not appearing\r\n- Verify the file is listed in `view_manifest.js`\r\n- Check for JavaScript errors in browser console\r\n- Ensure `export default YourViewClass` is present\r\n\r\n---\r\n\r\n## Third-Party Licenses\r\n\r\nThis project includes the following third-party libraries:\r\n\r\n| Library | License | Description | Location |\r\n|---------|---------|-------------|----------|\r\n| [Prism.js](https://prismjs.com/) | MIT | Syntax highlighting for code blocks | `web/views/code_scripts/` |\r\n| [KaTeX](https://katex.org/) | MIT | LaTeX math rendering | `web/views/markdown_scripts/` |\r\n| [Mermaid](https://mermaid.js.org/) | MIT | Diagram and flowchart rendering | `web/views/markdown_scripts/` |\r\n| [KaTeX Fonts](https://katex.org/) | SIL OFL 1.1 | Math fonts for KaTeX | `fonts/` |\r\n\r\nFull license texts are included with each library in their respective directories.\r\n\r\n---\r\n\r\n## License\r\n\r\nMIT License - See [LICENSE](LICENSE) for details\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWASasquatch%2FComfyUI_Viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWASasquatch%2FComfyUI_Viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWASasquatch%2FComfyUI_Viewer/lists"}