Frontend and templates

The Vue/TypeScript web UI, how it gets installed alongside the Python core, and the workflow templates that ship with it.

The frontend lives elsewhere

As of August 2024 the frontend is its own repository: Comfy-Org/ComfyUI_frontend. The core repo only ships a compiled bundle — there is no Vue source under web/.

The bundle is installed as a Python wheel (comfyui-frontend-package in requirements.txt) and located at runtime by app/frontend_management.py.

graph LR
    Pip[pip install -r requirements.txt] --> Wheel[comfyui-frontend-package wheel]
    Wheel --> Site[site-packages/comfyui_frontend_package/]
    Site --> Mgr[FrontendManager]
    User[--front-end-version flag] --> Mgr
    Mgr -->|fetch from GitHub releases if needed| Cache[~/.cache/Comfy-Org/...]
    Mgr --> Server[server.PromptServer]
    Server -->|GET / and assets| Browser

Version selection

The CLI flag --front-end-version accepts strings like:

• Comfy-Org/ComfyUI_frontend@latest (default)
• Comfy-Org/ComfyUI_frontend@1.2.2
• Comfy-Org/ComfyUI_legacy_frontend@latest for the pre-Aug-2024 UI

FrontendManager.parse_version (app/frontend_management.py) splits owner/repo/version, resolves latest against the GitHub releases API, downloads the bundle to a local cache directory, and serves it.

For air-gapped installs, --front-end-root <dir> points at a pre-extracted bundle. If both the pip-installed package and a cached bundle are absent, the server logs an error and exits.

Static asset serving

Once the bundle path is resolved, server.py registers static routes for /, /assets/, and the rest of the bundle's tree. Cache headers come from middleware/cache_middleware.py.

The optional --enable-compress-response-body flag turns on gzip for JSON and text responses (it's off by default to keep the server's CPU footprint low).

Frontend ↔ backend protocol

The frontend talks to the server over:

• HTTP — POST /prompt, GET /queue, GET /history, GET /system_stats, GET /object_info, GET /view, GET /assets/..., GET /internal/*, etc.
• WebSocket — /ws?clientId=<uuid>. The server pushes status, progress, executing, executed, plus binary frames carrying preview images (typed by protocol.py).

comfy_api/feature_flags.py negotiates the feature set: when a client connects it announces capabilities (e.g., supports_preview_metadata), and the server adapts (see hijack_progress in main.py). This avoids hard breaking changes when adding new event payloads.

Embedded docs

comfyui-embedded-docs (also pinned in requirements.txt) ships in-app help content. The frontend renders it without needing internet access.

Workflow templates

blueprints/ holds stock workflow JSON files that the frontend offers as starting points. The bundled set covers ~50 workflows ranging from basic image generation to complex video and edit pipelines:

• Image generation: SD 1.5, SDXL, Flux Dev/Krea, Z-Image-Turbo, Qwen-Image, NetaYume Lumina
• Image editing: Flux Kontext, Qwen Edit, FireRed Edit, LongCat Edit, Flux.2 Klein
• Image processing: blur, sharpen, levels, color curves, hue/saturation, edge-preserving blur, glow, film grain, chromatic aberration, unsharp mask
• Inpainting / outpainting: Flux Fill, Qwen Image
• Captioning: Gemini-based image and video captioning
• Video: LTX 2.0/2.3 (text-to-video, image-to-video, first/last frame, depth/pose/canny conditioning), Wan 2.2 (text-to-video, image-to-video), VACE inpainting, video upscaling, video stitching
• Audio: ACE-Step 1.5 text-to-audio
• 3D: Hunyuan3D 2.1 image-to-model
• Other: depth maps (Lotus), image to layers, prompt enhance, GAN-based upscale

blueprints/.glsl/ contains shader source for nodes that use OpenGL preview/postprocessing.

The comfyui-workflow-templates package (also pinned in requirements.txt) is the upstream source. blueprints/ holds local additions.

Custom-node web extensions

Custom nodes can ship their own JS under custom_nodes/<dir>/web/. The frontend manager mounts those at /extensions/<name>/.... Legacy paths /scripts/ui and /extensions/core/ are deprecated; new extensions register cleanly via the routes API.

Integration points

• app/frontend_management.py for resolution and caching.
• server.py for static serving and the WebSocket.
• middleware/cache_middleware.py for cache headers.
• comfy_api/feature_flags.py for capability negotiation.

Where to start a change

• Pin a different frontend version: bump comfyui-frontend-package in requirements.txt. Don't ship a frontend that hasn't had a corresponding release tag.
• Add a workflow template: drop a JSON file in blueprints/ and (if it depends on a new model) ensure the model is referenced via folder_paths keys.
• Add a feature flag: extend comfy_api/feature_flags.py and update the event-emitting code (e.g., hijack_progress in main.py) to consult it.