We Built ComfyUI Workflow Visualization Into Our AI Art Portfolio Platform

Hey dev community! 👋

I'm building PixelAI — a portfolio platform for AI artists. Today I shipped a feature I'm really excited about: ComfyUI workflow support with interactive graph visualization.

The Problem

ComfyUI is arguably the most powerful tool for AI image/video generation. But sharing workflows is painful:

• Screenshot your node graph
• Paste prompts in Discord
• Upload .json files to random file hosts
• Explain your setup in comment threads

The Solution

Now on PixelAI, you can:

1. Upload your .json workflow alongside your artwork
2. Auto-extraction — checkpoint, sampler, seed, steps, CFG are pulled from the workflow automatically
3. Interactive node graph — built with React Flow, viewers can zoom, pan, and explore your workflow
4. One-click download — viewers download your exact .json and load it in ComfyUI

Technical Implementation

• Parser: Supports both Workflow format (File → Save) and API format (File → Export API)
• Visualization: React Flow with lazy loading (dynamic import, zero bundle impact on other pages)
• Node categories: Color-coded — Loader (purple), Sampler (blue), Conditioning (yellow), Output (red)
• Custom nodes: Detected and marked with ⚡ badge
• Edge labels: Show data types (IMAGE, VIDEO, MASK, etc.)
• Fullscreen mode: For complex workflows with 50+ nodes
• Validation: Non-ComfyUI JSON files are rejected with helpful error message

Stack

• Next.js 14 (App Router)
• React Flow (@xyflow/react)
• Supabase (jsonb column for workflow storage)
• Tailwind CSS

What's Next

• A/B comparison of different workflows for the same image
• Workflow versioning (iterate and track changes)
• "Fork" button — remix someone's workflow with your modifications

Check it out: pixelai.world