diff --git a/.gitignore b/.gitignore
index c74ef74..e527dfb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -155,3 +155,9 @@ cython_debug/
# Ignore Windows ADS quarantine metadata files
*:Zone.Identifier
*:zone.identifier
+
+# Ruff
+.ruff_cache
+
+# WAS Architect
+.was_arch
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
index 266518a..513587b 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2025 WAS
+Copyright (c) 2025 Jordan "WASasquatch" Thompson
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 7ab3182..d1d1a9e 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
-A versatile ComfyUI custom node that renders HTML, SVG, Markdown, and code content in a secure embedded iframe viewer with full editing, download, and list support.
+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
@@ -13,72 +13,157 @@ A versatile ComfyUI custom node that renders HTML, SVG, Markdown, and code conte
-
-
-
-
+
+
+
+
+
+
+
+
+
## Features
-### Content Rendering
-- **Auto-detection** of content type: HTML, SVG, Markdown, JSON, YAML, CSV, Python, JavaScript, CSS, Terminal (ANSI), or plain text
-- **SVG support** - Renders SVG graphics centered in the viewport
-- **Markdown parsing** - Full support for headers, lists, links, images, code blocks, tables, emphasis, and Mermaid diagrams
-- **JSON viewer** - Collapsible tree view with syntax highlighting
-- **CSV/Tables** - Automatic table rendering with styled headers
-- **YAML** - Syntax highlighted display
-- **LaTeX/Math** - Renders mathematical formulas using KaTeX (`$$...$$` or `$...$`)
-- **Terminal output** - Parses ANSI escape codes for colored terminal logs
-- **Code formatting** - Code content displayed with monospace font and Prism.js syntax highlighting
-- **ComfyUI theme integration** - Automatically matches ComfyUI's theme colors
+### 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
-### List Support
-- **Multiple items** - Displays list inputs as individual indexed containers, filter what items to output.
-- **Per-item copy buttons** - Copy individual list items to clipboard
-- **Per-item editing** - Edit each list item in its own textarea
-- **List separator** - Items joined/split using `---LIST_SEPARATOR---`
+### 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 as `.html`, `.svg`, `.md`, `.py`, `.js`, `.css`, or `.txt`
- - List content → Downloads as `.zip` containing individually named files (`item_001.txt`, `item_002.txt`, etc.)
+ - 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
-- **STRING output** - Passes content downstream for further processing
-- **Flexible input** - Accepts any type via `content` input (STRING, lists, objects)
-- **Content priority** - User edits > Backend execution > Dynamic connected content
+- **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
+---
+
+## Built-in Views
+
+The Content Viewer includes 12 built-in views, listed by detection priority:
+
+| View | Priority | Detection | Description |
+|------|----------|-----------|-------------|
+| **SVG** | 110 | `
+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)**
- - Clone this repo into:
- - `ComfyUI/custom_nodes/ComfyUI_Viewer`
+**Option A (git clone)**
+```bash
+cd ComfyUI/custom_nodes
+git clone https://github.com/WASasquatch/ComfyUI_Viewer.git
+```
-- **Option B (Manager)**
- - Open Manager and install **ComfyUI_Viewer**
+**Option B (ComfyUI Manager)**
+- Open Manager and search for **ComfyUI_Viewer**
-- **Option C (zip)**
- - Download the repo as a zip.
- - Extract it to:
- - `ComfyUI/custom_nodes/ComfyUI_Viewer`
+**Option C (zip)**
+- Download and extract to `ComfyUI/custom_nodes/ComfyUI_Viewer`
+
+---
## Usage
### Basic Usage
1. Add the **Content Viewer** node (found in `WAS/View` category)
2. Connect any STRING output to the `content` input
-3. Content will be auto-detected and rendered
+3. Content type is auto-detected and rendered with the appropriate view
### As a Notes/Documentation Node
1. Add the **Content Viewer** node
@@ -86,24 +171,250 @@ A versatile ComfyUI custom node that renders HTML, SVG, Markdown, and code conte
3. Enter your HTML, Markdown, or text content
4. Click **Save** to render
-### Working with Lists
-When connecting a node that outputs multiple strings:
-1. Each string displays in its own container with an index label
-2. Click the copy button on any item to copy just that content
-3. Click **Edit** to modify individual items
-4. Click **Download** to get a `.zip` file with each item as a separate file
+### Using the Canvas Compositor
+1. Connect IMAGE outputs to the Canvas Composer node
+2. Images appear in the source panel - drag them onto the canvas
+3. Use transform handles to position and scale
+4. Use brush tools to paint or mask
+5. Click **Send to Output** to pass the composite downstream
-## Supported Content Types
+---
-| Type | Detection | File Extension |
-|------|-----------|----------------|
-| **HTML** | ` 0 if this view should handle the content
+ static detect(content) {
+ if (content.includes("MY_SPECIAL_MARKER")) {
+ return 100; // High confidence
+ }
+ return 0; // Cannot handle
+ }
+
+ // Render content to HTML for the iframe
+ static render(content, theme) {
+ return `
+
My Custom View
+
${escapeHtml(content)}
+
`;
+ }
+
+ // Optional: Add custom CSS
+ static getStyles(theme) {
+ return `
+ body { padding: 16px; }
+ h1 { color: ${theme.accent}; }
+ `;
+ }
+}
+
+export default MyView;
+```
+
+2. **Register in the manifest** - Add your file to `web/views/view_manifest.js`:
+
+```javascript
+export const VIEW_FILES = [
+ "canvas.js",
+ "html.js",
+ // ... existing views ...
+ "myview.js", // Add your view here
+];
+```
+
+3. **Restart ComfyUI** - Your view will be automatically loaded
+
+### BaseView Interface
+
+All views extend `BaseView` and can override these methods:
+
+| Method | Required | Description |
+|--------|----------|-------------|
+| `static id` | ✓ | Unique string identifier |
+| `static displayName` | ✓ | Human-readable name for UI |
+| `static priority` | ✓ | Detection priority (higher = checked first) |
+| `static detect(content)` | ✓ | Return score (0-100+) for content matching |
+| `static render(content, theme)` | ✓ | Return HTML string for iframe body |
+| `static getStyles(theme)` | | Return CSS string for iframe |
+| `static getScripts()` | | Return `
+