This is an image/video/workflow browser and manager for ComfyUI. You can sync your workflows to a remote Git repository and use them everywhere.
Welcome to submit your workflow source by submitting an issue. Let's build the workflows together.
comfyui_browser_231215_subtitle.mov
- Browse and manage your images/videos/workflows in the output folder.
- Add your workflows to the 'Saves' so that you can switch and manage them more easily.
- Sync your 'Saves' anywhere by Git.
- Subscribe workflow sources by Git and load them more easily.
- Search your workflow by keywords.
- Some useful custom nodes like xyz_plot, inputs_select.
- Select any inputs of the current graph.

- Simple XYZ Plot by selecting inputs and filling in the values.








Install ComfyUI Manager, search comfyui-browser
in Install Custom Node and install it.
In your comfyui-browser
directory, you can add a config.json
to override
the directories that comfyui-browser
uses. Ex:
{
"collections": "/var/lib/comfyui/comfyui-browser-collections",
"download_logs": "/var/lib/comfyui/comfyui-browser-download-logs",
"outputs": "/var/lib/comfyui/outputs",
"sources": "/var/lib/comfyui/comfyui-browser-sources"
}
The default configuration values are:
{
"collections": "[comfyui-browser]/collections",
"download_logs": "[comfyui-browser]/download-logs",
"outputs": "[comfyui]/outputs",
"sources": "[comfyui-browser]/sources"
}
Where [comfyui-browser]
is the automatically determined path of your
comfyui-browser
installation, and [comfyui]
is the automatically determined
path of your comfyui
server. Notably, the outputs
directory defaults to the
--output-directory
argument to comfyui
itself, or the default path that
comfyui
wishes to use for the --output-directory
argument.
Clone this repo into the custom_nodes
folder and restart the ComfyUI.
cd custom_nodes && git clone https://github.com/tzwm/comfyui-browser.git
- Your 'Saves' are stored in the
collections
configuration value. See Configuring for its default, and how to set the path to something different. - Press 'B' to toggle the Browser dialog in the ComfyUI.
-
Prerequisite
- Install Node
-
Framework
-
Project Structure
├── __init__.py (Backend Server)
├── web (Frontend code loaded by ComfyUI)
├── build (Built in Svelte)
└── index.js (Frontend that interact with ComfyUI)
├── svelte (Frontend in the Modal as a iframe, written in Svelte)
-
Build and Run
- Copy or link
comfyui-browser
toComfyUI/custom_nodes/
- Start backend by
cd ComfyUI && python main.py --enable-cors-header
- Start frontend by
cd ComfyUI/custom_nodes/comfyui-browser/svelte && npm i && npm run dev
- Open and debug by
http://localhost:5173/?comfyUrl=http://localhost:8188
- It will use
localhost:8188
as ComfyUI server localhost:5173
is a Vite dev server
- It will use
- Copy or link
-
Notes
- Please try to test on Windows, because I only have Linux/macOS
- Sync collections to remote git repository
- Add external git repository to local collections
- Search workflow by node name and model name
To see ChangeLog.