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 - 2 weeks

   • Active development of new features
   • Code changes merged to the development branch

2. Feature Freeze - 2 weeks

   • 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. Each feature has approximately 4 weeks from merge to ComfyUI stable release (2 weeks on main, 2 weeks frozen on RC).

Example Release Cycle

Week	Date Range	Version 1.1	Version 1.2	Version 1.3	Patch Releases
1-2	Mar 1-14	Development	-	-	-
3-4	Mar 15-28	Feature Freeze	Development	-	1.1.0 through 1.1.13 (daily)
5-6	Mar 29-Apr 11	Released	Feature Freeze	Development	1.1.14+ (daily)1.2.0 through 1.2.13 (daily)
7-8	Apr 12-25	-	Released	Feature Freeze	1.2.14+ (daily)1.3.0 through 1.3.13 (daily)

Release Summary

Major features

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 one of 14 supported languages including English, Chinese (Simplified and Traditional), Russian, Japanese, Korean, French, Spanish, Arabic, Turkish, Brazilian Portuguese, Persian, Hebrew, and Italian. 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

https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask editor.

Press Ctrl + ` to toggle integrated terminal.

https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94

Basic UI

Reset button

Edit Keybinding

rec.webm

Drag & Drop

https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f

Filter

https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf

https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f

Fuzzy search & Node preview

Release link with shift

https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25

QoL changes

https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a

https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa

rec.webm

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

rec.webm

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.

rec.webm

rec.webm

https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f

https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151

https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30

https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe

https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d

Before

https://github.com/user-attachments/assets/c253f778-82d5-4e6f-aec0-ea2ccf421651

After

https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d

https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2

Developer APIs

app.extensionManager.toast has success, error, info, warning, and loading. Each takes (title, { description, duration, closable, action }) and returns an id for dismiss(id). dismissAll() removes every toast.

const toast = app.extensionManager.toast

toast.info('Loaded!', { description: 'Extension loaded!', duration: 3000 })

const toastId = toast.warning('Model missing', {
  action: {
    label: 'Download',
    onClick: () => {
      startDownload()
      toast.dismiss(toastId)
    }
  }
})

A toast stays open until dismissed unless duration (ms) is set. Clicking an action button does not dismiss the toast.

add() and addAlert() still work but are deprecated. addAlert(message) now shows message as the warning title, like warning(message). remove() and removeAll() were removed; use dismiss(id) or dismissAll().

add() maps the PrimeVue message fields onto the new API and ignores every other field:

add() field	New API
severity	kind: warn → warning (warning also works but is deprecated); success, error unchanged; info, secondary, contrast → info; any other value logs an error and shows nothing
summary	title (detail becomes the title when summary is missing)
detail	description
life	duration in ms; 0 or unset keeps the toast open
closable	closable

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

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

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

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!')

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

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

Extensions can call the following API to add toast messages.

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

Only severity, summary, detail, life and closable are honoured; see the field mapping under the kind-based toast API.

Deprecated in v1.58 by the kind-based toast API.

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

app.extensionManager.registerSidebarTab({
  id: 'search',
  icon: 'icon-[lucide--search]',
  title: 'search',
  tooltip: 'search',
  type: 'custom',
  render: (el) => {
    el.innerHTML = '<div>Custom search tab</div>'
  }
})

Icon classes render only for Lucide icons the frontend already uses, because Tailwind generates icon-[lucide--*] classes only for icons found in the frontend's source. PrimeIcons (pi pi-*) still work but are being phased out.

We will support custom icons later.

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: 'icon-[lucide--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 welcome contributions to ComfyUI Frontend! Please see our Contributing Guide for:

• Ways to contribute (code, documentation, testing, community support)
• Development setup and workflow
• Code style guidelines
• Testing requirements
• How to submit pull requests
• Backporting fixes to release branches

Development

For detailed development setup, testing procedures, and technical information, please refer to CONTRIBUTING.md.

i18n

See locales/README.md for details.

Storybook

See .storybook/README.md for component development and visual testing documentation.

Troubleshooting

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

• General Troubleshooting Guide - Common issues, performance optimization, and reporting bugs
• Custom Node Issues - Debugging custom node problems and conflicts
• Desktop Installation Guide - Desktop-specific installation and troubleshooting