KO
All work

Comfy Org (ComfyUI) · 2026.03

ComfyUI Media Viewer: Custom Lightbox & Audio Waveform Player

A custom lightbox to replace a third-party gallery, plus a Web Audio waveform player.

Role
Frontend Core Team · feature design and development
Period
2026.03
Stack
  • Vue 3
  • TypeScript
  • Web Audio API
ComfyUI Media Viewer: Custom Lightbox & Audio Waveform Player

Overview

I took a third-party dependency out of ComfyUI's result viewer and built a new waveform player for previewing audio outputs.

Background

Problem

The third-party gallery component made it hard to change the design and behavior, and on Cloud, audio outputs wouldn't play because of an auth issue.

What I did

  • Removed the PrimeVue Galleria dependency entirely and replaced it with an overlay-based MediaLightbox, taking full control of viewing, navigation and styling.
  • Fixed media requests that failed with 401 on Cloud by fetching with the auth header.
  • Built WaveAudioPlayer, which draws the waveform with the Web Audio API, to preview outputs from audio generation nodes such as ElevenLabs.

Results

  • Third-party dependency removed

    Swapping PrimeVue Galleria for an in-house lightbox gave the team direct control over the viewer's design and behavior.

Key features

  • 01

    Custom lightbox

    An overlay viewer for seeing results large and moving between them.

  • 02

    Audio waveform player

    Loads audio with an authenticated fetch and draws the waveform with the Web Audio API.