GitHub - Comfy-Org/ComfyUI_frontend: Official front-end implementation of ComfyUI (original) (raw)

Release Schedule

The project follows a structured release process for each minor version, consisting of three distinct phases:

  1. Development Phase - 1 week
    • Active development of new features
    • Code changes merged to the development branch
  2. Feature Freeze - 1 week
    • No new features accepted
    • Only bug fixes are cherry-picked to the release branch
    • Testing and stabilization of the codebase
  3. Publication
    • Release is published at the end of the freeze period
    • Version is finalized and made available to all users

Nightly Releases

Nightly releases are published daily at https://github.com/Comfy-Org/ComfyUI_frontend/releases.

To use the latest nightly release, add the following command line argument to your ComfyUI launch script:

--front-end-version Comfy-Org/ComfyUI_frontend@latest

Overlapping Release Cycles

The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously.

Example Release Cycle

Week Date Range Version 1.1 Version 1.2 Version 1.3 Patch Releases
1 Mar 1-7 Development - - -
2 Mar 8-14 Feature Freeze Development - 1.1.0 through 1.1.6 (daily)
3 Mar 15-21 Released Feature Freeze Development 1.1.7 through 1.1.13 (daily)1.2.0 through 1.2.6 (daily)
4 Mar 22-28 - Released Feature Freeze 1.2.7 through 1.2.13 (daily)1.3.0 through 1.3.6 (daily)

Release Summary

Major features

v1.5: Native translation (i18n)

ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language in Comfy > Locale > Language to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native implementation offers better performance, reliability, and maintainability compared to previous solutions.

More details available here: https://blog.comfy.org/p/native-localization-support-i18n

v1.4: New mask editor

#1284 implements a new mask editor.

image

v1.3.22: Integrated server terminal

Press Ctrl + ` to toggle integrated terminal.

integrated_terminal_demo.mp4 v1.3.7: Keybinding customization

Basic UI

image

Reset button

image

Edit Keybinding

image image

keybinding_demo.mp4 v1.2.4: Node library sidebar tab

Drag & Drop

nodelib_dnd.mp4

Filter

nodelist_filter.mp4 v1.2.0: Queue/History sidebar tab QueueDemo2.mp4 v1.1.0: Node search box

Fuzzy search & Node preview

image

07.07.2024_23.27.39_REC.mp4

QoL changes

v1.3.32: **Litegraph** Nested group nested-groups-ii.mp4 v1.3.24: **Litegraph** Group selection litegraph-multi-group-select.mp4 v1.3.6: **Litegraph** Toggle link visibility link_toggle.mp4 v1.3.4: **Litegraph** Auto widget to input conversion

Dropping a link of correct type on node widget will automatically convert the widget to input.

fast_connect_demo2.mp4 v1.3.4: **Litegraph** Canvas pan mode

The canvas becomes readonly in pan mode. Pan mode is activated by clicking the pan mode button on the canvas menu or by holding the space key.

pan_mode.mp4 v1.3.1: **Litegraph** Shift drag link to create a new link rec.webm v1.2.62: **Litegraph** Show optional input slots as donuts

GYEIRidb0AYGO-v

v1.2.44: **Litegraph** Double click group title to edit groupTitleEditDemo.mp4 v1.2.39: **Litegraph** Group selected nodes with Ctrl + G quickGroupDemo.mp4 v1.2.38: **Litegraph** Double click node title to edit editFinalDemo.mp4 v1.2.7: **Litegraph** drags multiple links with shift pressed batch_connect_demo.mp4 batch_disconnect.mp4 v1.2.2: **Litegraph** auto connects to correct slot

Before

link_slot_broken.mp4

After

link_slot_fixed.mp4 v1.1.8: **Litegraph** hides text overflow on widget value overflowfix.mp4

Developer APIs

v1.6.13: prompt/confirm/alert replacements for ComfyUI desktop

Several browser-only APIs are not available in ComfyUI desktop's electron environment.

Please use the following APIs as replacements.

// window.prompt window['app'].extensionManager.dialog .prompt({ title: 'Test Prompt', message: 'Test Prompt Message' }) .then((value: string) => { // Do something with the value user entered })

image

// window.confirm window['app'].extensionManager.dialog .confirm({ title: 'Test Confirm', message: 'Test Confirm Message' }) .then((value: boolean) => { // Do something with the value user entered })

image

// window.alert window['app'].extensionManager.toast .addAlert("Test Alert")

image

v1.3.34: Register about panel badges

app.registerExtension({ name: 'TestExtension1', aboutPageBadges: [ { label: 'Test Badge', url: 'https://example.com', icon: 'pi pi-box' } ] })

image

v1.3.22: Register bottom panel tabs

app.registerExtension({ name: 'TestExtension', bottomPanelTabs: [ { id: 'TestTab', title: 'Test Tab', type: 'custom', render: (el) => { el.innerHTML = '

Custom tab
' } } ] })

image

v1.3.22: New settings API

Legacy settings API.

// Register a new setting app.ui.settings.addSetting({ id: 'TestSetting', name: 'Test Setting', type: 'text', defaultValue: 'Hello, world!' })

// Get the value of a setting const value = app.ui.settings.getSettingValue('TestSetting')

// Set the value of a setting app.ui.settings.setSettingValue('TestSetting', 'Hello, universe!')

New settings API.

// Register a new setting app.registerExtension({ name: 'TestExtension1', settings: [ { id: 'TestSetting', name: 'Test Setting', type: 'text', defaultValue: 'Hello, world!' } ] })

// Get the value of a setting const value = app.extensionManager.setting.get('TestSetting')

// Set the value of a setting app.extensionManager.setting.set('TestSetting', 'Hello, universe!')

v1.3.7: Register commands and keybindings

Extensions can call the following API to register commands and keybindings. Do note that keybindings defined in core cannot be overwritten, and some keybindings are reserved by the browser.

app.registerExtension({ name: 'TestExtension1', commands: [ { id: 'TestCommand', function: () => { alert('TestCommand') } } ], keybindings: [ { combo: { key: 'k' }, commandId: 'TestCommand' } ] })

v1.3.1: Extension API to register custom topbar menu items

Extensions can call the following API to register custom topbar menu items.

app.registerExtension({ name: 'TestExtension1', commands: [ { id: 'foo-id', label: 'foo', function: () => { alert(1) } } ], menuCommands: [ { path: ['ext', 'ext2'], commands: ['foo-id'] } ] })

image

v1.2.27: Extension API to add toast messagei

Extensions can call the following API to add toast messages.

app.extensionManager.toast.add({ severity: 'info', summary: 'Loaded!', detail: 'Extension loaded!', life: 3000 })

Documentation of all supported options can be found here: https://primevue.org/toast/#api.toast.interfaces.ToastMessageOptions

image

v1.2.4: Extension API to register custom sidebar tab

Extensions now can call the following API to register a sidebar tab.

app.extensionManager.registerSidebarTab({ id: "search", icon: "pi pi-search", title: "search", tooltip: "search", type: "custom", render: (el) => { el.innerHTML = "

Custom search tab
"; }, });

The list of supported icons can be found here: https://primevue.org/icons/#list

We will support custom icons later.

image

v1.10.9: Selection Toolbox API

Extensions can register commands that appear in the selection toolbox when specific items are selected on the canvas.

app.registerExtension({ name: 'TestExtension1', commands: [ { id: 'test.selection.command', label: 'Test Command', icon: 'pi pi-star', function: () => { // Command logic here } } ], // Return an array of command IDs to show in the selection toolbox // when an item is selected getSelectionToolboxCommands: (selectedItem) => ['test.selection.command'] })

The selection toolbox will display the command button when items are selected:Image

Contributing

We're building this frontend together and would love your help — no matter how you'd like to pitch in! You don't need to write code to make a difference.

Here are some ways to get involved:

Have another idea? Drop into Discord or open an issue, and let's chat!

Development

Prerequisites & Technology Stack

Initial Setup

  1. Clone the repository:
    git clone https://github.com/Comfy-Org/ComfyUI_frontend.git
    cd ComfyUI_frontend
  2. Install dependencies:
  3. Configure environment (optional): Create a .env file in the project root based on the provided .env.example file.
    Note about ports: By default, the dev server expects the ComfyUI backend at localhost:8188. If your ComfyUI instance runs on a different port, update this in your .env file.

Dev Server Configuration

To launch ComfyUI and have it connect to your development server:

python main.py --port 8188

Git pre-commit hooks

Run npm run prepare to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.

Dev Server

Note: The dev server will NOT load any extension from the ComfyUI server. Only core extensions will be loaded.

Access dev server on touch devices

Enable remote access to the dev server by setting VITE_REMOTE_DEV in .env to true.

After you start the dev server, you should see following logs:

> comfyui-frontend@1.3.42 dev
> vite


  VITE v5.4.6  ready in 488 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.21.80.1:5173/
  ➜  Network: http://192.168.2.20:5173/
  ➜  press h + enter to show help

Make sure your desktop machine and touch device are on the same network. On your touch device, navigate to http://<server_ip>:5173 (e.g. http://192.168.2.20:5173 here), to access the ComfyUI frontend.

This project includes .vscode/launch.json.default and .vscode/settings.json.default files with recommended launch and workspace settings for editors that use the .vscode directory (e.g., VS Code, Cursor, etc.).

We've also included a list of recommended extensions in .vscode/extensions.json. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.

Playwright Browser Automation

The Playwright MCP server enables LLM coding assistants (like Copilot, Claude Code, etc.) to control and inspect web browsers programmatically. This allows assistants to navigate websites, take screenshots, and interact with web pages on your behalf.

For ComfyUI_frontend development, you can ask coding assistants to use Playwright screenshots to continuously verify that your code changes produce the expected visual results.

Setup for Claude Code

After installing dependencies with npm i, the Playwright MCP server will be automatically available when you start Claude Code locally.

Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at localhost:5173):

> navigate to localhost:5173 and take a screenshot.
   tell me the items in the menubar

● I'll navigate to localhost:5173 and take a
  screenshot to see the menubar items.

● playwright:playwright_navigate (MCP)(url:       …
                                      "http://local
                                      host:5173")
  ⎿  Navigated to http://localhost:5173

● playwright:playwright_screenshot (MCP)(name: "lo…
                                        alhost_5173
                                        _menubar")

  ⎿ Screenshot saved to: ../../../Downloads/localho
    st_5173_menubar-2025-05-30T17-23-00-942Z.png
  ⎿  Screenshot also stored in memory with name:
     'localhost_5173_menubar'

● Read(../../../Downloads/localhost_5173_menubar-2…
      25-05-30T17-23-00-942Z.png)
  ⎿  Read image (94.3KB)

● Based on the screenshot, I can see the menubar at
   the top of the ComfyUI interface contains the
  following items:

  Main Menubar Items:
  - Workflow - Menu for workflow-related actions
  - Edit - Menu for editing operations
  - Help - Menu for help and documentation

  Additional UI Elements:
  - ComfyUI Logo - On the far left
  - Workflow Tab - Shows "Unsaved Workflow" with a
  dropdown and close button
  - Layout Controls - On the far right (grid view
  and hamburger menu icons)

  The interface shows a typical ComfyUI workflow
  graph with nodes like "Load Checkpoint", "CLIP
  Text Encode (Prompt)", "KSampler", and "Empty
  Latent Image" connected with colored cables.

Unit Test

Component Test

Component test verifies Vue components in src/components/.

Playwright Test

Playwright test verifies the whole app. See https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/browser_tests/README.md for details.

litegraph.js

This repo is using litegraph package hosted on https://github.com/Comfy-Org/litegraph.js. Any changes to litegraph should be submitted in that repo instead.

Test litegraph.js changes

This will replace the litegraph package in this repo with the local litegraph repo.

i18n

See locales/README.md for details.

Troubleshooting

For comprehensive troubleshooting and technical support, please refer to our official documentation: