diff --git a/pages/changelog.mdx b/pages/changelog.mdx
index 99af4b8..06e7ff6 100644
--- a/pages/changelog.mdx
+++ b/pages/changelog.mdx
@@ -4,6 +4,32 @@ All notable changes to Node Banana are documented here.
---
+## Unreleased
+
+### Added
+
+- OutputGallery node displays scrollable thumbnail grid with full-size lightbox viewer ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- ImageCompare node provides side-by-side image comparison with draggable slider ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- PromptConstructor node for template-based prompts with @variable placeholders ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- PromptConstructor expand modal with @variable autocomplete, variable pills, and resolved preview panel ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- Prompt nodes can be assigned variable names for use in PromptConstructor templates ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- AI chat panel for building and editing workflows through conversation ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- Workflow snapshot and revert system to undo AI-generated changes ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- Image connection sequence numbering for clearer multi-input ordering ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- Prompt node expand modal for full-screen editing with persistent font size preference ([#43](https://github.com/shrimbly/node-banana/pull/43))
+
+### Changed
+
+- Chat performance improved for large workflows with smart data optimization ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- ConnectionDropMenu now supports auto-connecting OutputGallery, ImageCompare, and PromptConstructor node types ([#43](https://github.com/shrimbly/node-banana/pull/43))
+
+### Fixed
+
+- PromptNode Enter key behavior now properly saves content ([#43](https://github.com/shrimbly/node-banana/pull/43))
+- PromptConstructor textarea sizing now fills available node space ([#43](https://github.com/shrimbly/node-banana/pull/43))
+
+---
+
## 1.3.0 — 2026-01-31
### Added
diff --git a/pages/core-concepts.mdx b/pages/core-concepts.mdx
index 2c6b6f7..e2b935a 100644
--- a/pages/core-concepts.mdx
+++ b/pages/core-concepts.mdx
@@ -20,13 +20,16 @@ Nodes are the building blocks of your workflow. Each node performs a specific fu
| Node | Purpose |
|------|---------|
| **Image Input** | Load images from your computer |
-| **Prompt** | Enter text prompts |
+| **Prompt** | Enter text prompts (can be named for use in templates) |
+| **Prompt Constructor** | Build prompts from templates with variables |
| **Generate Image** | Generate images with AI (multi-provider) |
| **Generate Video** | Generate videos with AI (multi-provider) |
| **LLM Generate** | Generate text with AI |
| **Annotation** | Draw on images |
| **Split Grid** | Split images into grids |
| **Output** | Display and download results |
+| **Output Gallery** | View multiple images in thumbnail grid with lightbox |
+| **Image Compare** | Compare two images side-by-side with slider |
See the [Nodes Reference](/nodes) for detailed information on each node type.
diff --git a/pages/nodes.mdx b/pages/nodes.mdx
index e30a401..9768ccf 100644
--- a/pages/nodes.mdx
+++ b/pages/nodes.mdx
@@ -8,12 +8,15 @@ This page documents all available node types in Node Banana. Each node serves a
|------|---------|--------|---------|
| [Image Input](#image-input) | Load images | — | Image |
| [Prompt](#prompt) | Text prompts | Text (optional) | Text |
+| [Prompt Constructor](#prompt-constructor) | Template-based prompts | Text (multiple) | Text |
| [Generate Image](#generate-image) | AI image generation | Image, Text | Image |
| [Generate Video](#generate-video) | AI video generation | Image, Text | Video |
| [LLM Generate](#llm-generate) | AI text generation | Text, Image | Text |
| [Annotation](#annotation) | Draw on images | Image | Image |
| [Split Grid](#split-grid) | Split into grid | Image | Reference |
| [Output](#output) | Display results | Image, Video | — |
+| [Output Gallery](#output-gallery) | View image collections | Image (multiple) | — |
+| [Image Compare](#image-compare) | Compare two images | Image (2) | — |
---
@@ -57,11 +60,15 @@ The Prompt node provides text input for your workflow. Use it to write prompts f
### Features
- Inline text editing
- Expand button for larger editor (modal)
-- Full-screen editing mode for complex prompts
+- Full-screen editing mode for complex prompts with persistent font size preference
- **Text input connection**: Receive text from LLM Generate or other text-producing nodes
- When connected, the text area becomes read-only
- Placeholder text indicates "Receiving text from connected node..."
- Enables automated prompt workflows and LLM chaining
+- **Variable naming**: Assign a variable name to the prompt for use in [Prompt Constructor](#prompt-constructor) templates
+ - Click the variable name button in the header to set a name (e.g., `style`, `subject`)
+ - Variable names can contain letters, numbers, and underscores (max 30 characters)
+ - Named prompts can be referenced as `@variableName` in Prompt Constructor templates
### Usage
@@ -96,6 +103,87 @@ sharp focus, high resolution
---
+## Prompt Constructor
+
+The Prompt Constructor node builds prompts from templates with variable placeholders. Use it to create reusable prompt templates that can be populated with values from multiple Prompt nodes.
+
+### Inputs
+- **Text** (multiple) — Prompt nodes with variable names that supply values for `@variable` placeholders
+
+### Outputs
+- **Text** — The resolved prompt with all variables substituted
+
+### Features
+- **Template-based prompts**: Define reusable templates with `@variable` placeholders
+- **@variable autocomplete**: Start typing `@` to see available variables from connected Prompt nodes
+ - Keyboard navigation (arrow keys, Enter, Escape)
+ - Shows variable name and current value in autocomplete dropdown
+- **Expand modal**: Click the expand button to open a full-screen editor
+ - Adjustable font size
+ - Clickable variable pills in toolbar for quick insertion
+ - Live "Resolved Preview" panel showing final prompt with substituted variables
+ - Unsaved changes confirmation dialog when closing with edits
+- **Unresolved variable warnings**: Amber badge displays any `@variables` that don't match a connected Prompt node
+- **Real-time preview**: Hover over the node to see the resolved prompt as a tooltip
+
+### Usage
+
+**Basic template workflow:**
+1. Add Prompt nodes and assign them variable names (e.g., `style`, `subject`, `mood`)
+2. Add a Prompt Constructor node
+3. Connect the Prompt nodes to the Prompt Constructor's text input
+4. In the Prompt Constructor, type your template using `@variableName` syntax:
+ ```
+ A @style photograph of @subject with @mood lighting
+ ```
+5. The template automatically resolves to the final prompt
+6. Connect the Prompt Constructor output to Generate Image or other nodes
+
+**Using the expand modal:**
+1. Click the expand button on a Prompt Constructor node
+2. Type your template - use `@` to trigger autocomplete and insert variables
+3. Click variable pills in the toolbar to insert them at cursor position
+4. View the "Resolved Preview" panel to see the final prompt in real-time
+5. Click "Save Template" to apply changes (or "Cancel" to discard)
+
+
+ **Reusable Templates**: Create complex prompt templates with multiple variables for consistent generation. For example: `A @style photo of @subject, @pose, @lighting, @background` can be reused with different combinations of style, subject, pose, lighting, and background values.
+
+
+
+ If you see an amber "Unresolved" badge, it means one or more `@variables` in your template don't match any connected Prompt node's variable name. Check that your Prompt nodes have matching variable names assigned.
+
+
+### Example Workflows
+
+**Product photography variations:**
+```
+Template: "Product photography of @product, @angle angle, @lighting lighting, @background background"
+
+Connected prompts:
+- product: "luxury watch"
+- angle: "45-degree"
+- lighting: "soft studio"
+- background: "white seamless"
+
+Resolved: "Product photography of luxury watch, 45-degree angle, soft studio lighting, white seamless background"
+```
+
+**Character portraits:**
+```
+Template: "@character_name, @art_style style, @expression expression, @setting"
+
+Connected prompts:
+- character_name: "elven warrior"
+- art_style: "watercolor"
+- expression: "determined"
+- setting: "misty forest background"
+
+Resolved: "elven warrior, watercolor style, determined expression, misty forest background"
+```
+
+---
+
## Generate Image
The Generate Image node creates images using AI models from multiple providers including Gemini, Replicate, and fal.ai.
@@ -406,6 +494,96 @@ When saving outputs:
---
+## Output Gallery
+
+The Output Gallery node collects and displays multiple images in a scrollable thumbnail grid with a full-size lightbox viewer. Use it to inspect and compare multiple generations or image collections.
+
+### Inputs
+- **Image** (multiple) — Connect multiple image sources to view them in a grid
+
+### Features
+- **Thumbnail grid**: 3-column grid layout with scrollable viewing
+- **Lightbox viewer**: Click any thumbnail to open full-size viewer
+ - Close button (X) in top-right corner
+ - Download button in top-left corner
+ - Previous/Next arrow navigation
+ - Keyboard navigation (Left/Right arrows, Escape to close)
+- **Real-time display**: Shows images from connected nodes immediately, not just after execution
+- **Automatic collection**: Gathers images from all connected image-producing nodes (Image Input, Generate Image, Annotation, etc.)
+
+### Usage
+1. Add an Output Gallery node
+2. Connect multiple image sources to its input handle
+ - You can connect multiple Generate Image nodes
+ - Or connect nodes that output multiple images
+3. The gallery automatically displays all connected images as thumbnails
+4. Click any thumbnail to view full-size
+5. Use keyboard shortcuts or navigation buttons to browse
+6. Click the download button in lightbox to save individual images
+
+
+ **Generation Comparison**: Connect multiple Generate Image nodes with different parameters to the Output Gallery to compare results side-by-side. Perfect for evaluating different models, prompts, or settings.
+
+
+### Lightbox Controls
+
+| Control | Action |
+|---------|--------|
+| **Click thumbnail** | Open lightbox at that image |
+| **Left arrow / ←** | Previous image |
+| **Right arrow / →** | Next image |
+| **Escape / X button** | Close lightbox |
+| **Download button** | Save current image |
+
+---
+
+## Image Compare
+
+The Image Compare node provides a side-by-side comparison view with a draggable slider for comparing two images. Useful for before/after comparisons or evaluating generation variations.
+
+### Inputs
+- **Image A** — First image to compare (top handle labeled "A")
+- **Image B** — Second image to compare (bottom handle labeled "B")
+
+### Features
+- **Draggable slider**: Interactive slider to reveal/hide portions of each image
+- **Real-time comparison**: Works with live connections, updates as source nodes change
+- **Labeled inputs**: Handles are labeled "A" and "B" for clarity
+- **Corner labels**: Images are labeled in the comparison view
+- **Automatic ordering**: First connected image becomes A, second becomes B
+
+### Usage
+1. Add an Image Compare node
+2. Connect two image sources:
+ - Connect the first image to the top handle (A)
+ - Connect the second image to the bottom handle (B)
+3. Drag the slider left or right to compare the images
+4. The node displays A on the left side and B on the right side of the slider
+
+
+ **Before/After Workflows**: Create powerful before/after demonstrations by connecting an original Image Input to handle A and a processed/generated result to handle B. Perfect for showcasing edits, style transfers, or AI enhancements.
+
+
+### Use Cases
+
+- **Generation comparison**: Compare two different AI generations of the same prompt
+- **Model comparison**: Test the same prompt with different models
+- **Before/after**: Show original vs. processed/annotated images
+- **Parameter tuning**: Compare results with different generation parameters
+- **Style variations**: Compare different style applications to the same subject
+
+### Example Workflow
+
+```
+[Image Input: Original Photo] → [Image Compare A]
+ ↓
+[Generate Image: Enhanced] → [Image Compare B]
+```
+
+This workflow lets you compare the original photo (A) with an AI-enhanced version (B) using the interactive slider.
+
+---
+
## Groups
Groups aren't nodes, but they're an important organizational feature.