ComfyUI_frontend

Official front-end implementation of ComfyUI.

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.

v1.3.22: Integrated server terminal

Press Ctrl + ` to toggle integrated terminal.

integrated_terminal_demo.mp4

v1.3.7: Keybinding customization

Basic UI

Reset button

Edit Keybinding

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

Release link with shift

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

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.

• window.prompt
• window.confirm
• window.alert

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
  })

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

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

v1.3.34: Register about panel badges

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

v1.3.22: Register bottom panel tabs

app.registerExtension({
  name: 'TestExtension',
  bottomPanelTabs: [
    {
      id: 'TestTab',
      title: 'Test Tab',
      type: 'custom',
      render: (el) => {
        el.innerHTML = '<div>Custom tab</div>'
      }
    }
  ]
})

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']
      }
    ]
  })

v1.2.27: Extension API to add toast message

i

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

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 = "<div>Custom search tab</div>";
    },
  });

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

We will support custom icons later.

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:

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:

• Pull Requests: Add features, fix bugs, or improve code health. Browse issues for inspiration.
• Vote on Features: Give a 👍 to the feature requests you care about to help us prioritize.
• Verify Bugs: Try reproducing reported issues and share your results (even if the bug doesn't occur!).
• Community Support: Hop into our Discord to answer questions or get help.
• Share & Advocate: Tell your friends, tweet about us, or share tips to support the project.

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

Development

Prerequisites & Technology Stack

• Required Software:

  • Node.js (v16 or later) and npm
  • Git for version control
  • A running ComfyUI backend instance

• Tech Stack:

  • Vue 3 with TypeScript
  • Pinia for state management
  • PrimeVue with TailwindCSS for UI
  • litegraph.js for node editor
  • zod for schema validation
  • vue-i18n for internationalization

Initial Setup

1. Clone the repository:

   git clone https://github.com/Comfy-Org/ComfyUI_frontend.git
   cd ComfyUI_frontend

2. Install dependencies:

   npm install

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.

• Start local ComfyUI backend at localhost:8188
• Run npm run dev to start the dev server
• Run npm run dev:electron to start the dev server with electron API mocked

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:

> [email protected] 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.

Recommended Code Editor Configuration

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.

Unit Test

• npm i to install all dependencies
• npm run test:unit to execute all unit tests.

Component Test

Component test verifies Vue components in src/components/.

• npm run test:component to execute all component tests.

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

• Run npm link in the local litegraph repo.
• Run npm link @comfyorg/litegraph in this repo.

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

i18n

See locales/README.md for details.

Troubleshooting

Note: For comprehensive troubleshooting and how-to guides, please refer to our official documentation. This section covers only the most common issues related to frontend development.

Desktop Users: For issues specific to the desktop application, please refer to the ComfyUI desktop repository.

Debugging Custom Node (Extension) Issues

If you're experiencing crashes, errors, or unexpected behavior with ComfyUI, it's often caused by custom nodes (extensions). Follow these steps to identify and resolve the issues:

Step 1: Verify if custom nodes are causing the problem

Run ComfyUI with the --disable-all-custom-nodes flag:

python main.py --disable-all-custom-nodes

If the issue disappears, a custom node is the culprit. Proceed to the next step.

Step 2: Identify the problematic custom node using binary search

Rather than disabling nodes one by one, use this more efficient approach:

1. Temporarily move half of your custom nodes out of the custom_nodes directory

   # Create a temporary directory
   # Linux/Mac
   mkdir ~/custom_nodes_disabled
   
   # Windows
   mkdir %USERPROFILE%\custom_nodes_disabled
   
   # Move half of your custom nodes (assuming you have node1 through node8)
   # Linux/Mac
   mv custom_nodes/node1 custom_nodes/node2 custom_nodes/node3 custom_nodes/node4 ~/custom_nodes_disabled/
   
   # Windows
   move custom_nodes\node1 custom_nodes\node2 custom_nodes\node3 custom_nodes\node4 %USERPROFILE%\custom_nodes_disabled\

2. Run ComfyUI again

   • If the issue persists: The problem is in nodes 5-8 (the remaining half)
   • If the issue disappears: The problem is in nodes 1-4 (the moved half)

3. Let's assume the issue disappeared, so the problem is in nodes 1-4. Move half of these for the next test:

   # Move nodes 3-4 back to custom_nodes
   # Linux/Mac
   mv ~/custom_nodes_disabled/node3 ~/custom_nodes_disabled/node4 custom_nodes/
   
   # Windows
   move %USERPROFILE%\custom_nodes_disabled\node3 %USERPROFILE%\custom_nodes_disabled\node4 custom_nodes\

4. Run ComfyUI again

   • If the issue reappears: The problem is in nodes 3-4
   • If issue still gone: The problem is in nodes 1-2

5. Let's assume the issue reappeared, so the problem is in nodes 3-4. Test each one:

   # Move node 3 back to disabled
   # Linux/Mac
   mv custom_nodes/node3 ~/custom_nodes_disabled/
   
   # Windows
   move custom_nodes\node3 %USERPROFILE%\custom_nodes_disabled\

6. Run ComfyUI again

   • If the issue disappears: node3 is the problem
   • If issue persists: node4 is the problem

7. Repeat until you identify the specific problematic node

Step 3: Update or replace the problematic node

Once identified:

1. Check for updates to the problematic custom node
2. Consider alternatives with similar functionality
3. Report the issue to the custom node developer with specific details

Common Issues and Solutions

• "Module not found" errors: Usually indicates missing Python dependencies. Check the custom node's requirements.txt file for required packages and install them:

  pip install -r custom_nodes/problematic_node/requirements.txt

• Frontend or Templates Package Not Updated: After updating ComfyUI via Git, ensure you update the frontend dependencies:

  pip install -r requirements.txt

• Can't Find Custom Node: Make sure to disable node validation in ComfyUI settings.

• Error Toast About Workflow Failing Validation: Report the issue to the ComfyUI team. As a temporary workaround, disable workflow validation in settings.

• Login Issues When Not on Localhost: Normal login is only available when accessing from localhost. If you're running ComfyUI via LAN, another domain, or headless, you can use our API key feature to authenticate. The API key lets you log in normally through the UI. Generate an API key at platform.comfy.org/login and use it in the API Key field in the login dialog or with the --api-key command line argument. Refer to our API Key Integration Guide for complete setup instructions.