Awesome

ComfyUI_frontend

Official front-end implementation of ComfyUI.

<br>

Release Schedule

Nightly Release

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

For Windows Stand-alone Build Users

Edit your run_cpu.bat or run_nvidia_gpu.bat file as follows:

.\python_embeded\python.exe -s ComfyUI\main.py --windows-standalone-build --front-end-version Comfy-Org/ComfyUI_frontend@latest
pause

Stable Release

Stable releases are published bi-weekly in the ComfyUI main repository.

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 English, Chinese (Simplified), Russian, Japanese, or Korean. This native implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>

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.registerExtension({
  name: 'TestExtension1',
  aboutPageBadges: [
    {
      label: 'Test Badge',
      url: 'https://example.com',
      icon: 'pi pi-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
  })

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

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.

Development

Tech Stack

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

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:

> 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.

Unit Test

• git clone https://github.com/comfyanonymous/ComfyUI_examples.git to tests-ui/ComfyUI_examples or the EXAMPLE_REPO_PATH location specified in .env
• npm i to install all dependencies
• npm run test:generate to fetch tests-ui/data/object_info.json
• npm run test:generate:examples to extract the example workflows
• npm run test 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

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 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.

Internationalization (i18n)

Our project supports multiple languages using vue-i18n. This allows users around the world to use the application in their preferred language.

Supported Languages

• en (English)
• zh (中文)
• ru (Русский)
• ja (日本語)
• ko (한국어)

How to Add a New Language

We welcome the addition of new languages. You can add a new language by following these steps:

1. Generate language files

We use lobe-i18n as our translation tool, which integrates with LLM for efficient localization.

Update the configuration file to include the new language(s) you wish to add:

const { defineConfig } = require('@lobehub/i18n-cli');

module.exports = defineConfig({
  entry: 'src/locales/en.json', // Base language file
  entryLocale: 'en',
  output: 'src/locales',
  outputLocales: ['zh', 'ru', 'ja'], // Add the new language(s) here
});

Set your OpenAI API Key by running the following command:

npx lobe-i18n --option

Once configured, generate the translation files with:

npx lobe-i18n locale

This will create the language files for the specified languages in the configuration.

2. Update i18n Configuration

Import the newly generated locale file(s) in the src/i18n.ts file to include them in the application's i18n setup.

3. Enable Selection of the New Language

Add the newly added language to the following item in src/constants/coreSettings.ts:

  {
    id: 'Comfy.Locale',
    name: 'Locale',
    type: 'combo',
    // Add the new language(s) here
    options: [
      { value: 'en', text: 'English' },
      { value: 'zh', text: '中文' },
      { value: 'ru', text: 'Русский' },
      { value: 'ja', text: '日本語' }
    ],
    defaultValue: navigator.language.split('-')[0] || 'en'
  },

This will make the new language selectable in the application's settings.

4. Test the Translations

Start the development server, switch to the new language, and verify the translations. You can switch languages by opening the ComfyUI Settings and selecting from the ComfyUI > Locale dropdown box.

Deploy

• Option 1: Set DEPLOY_COMFYUI_DIR in .env and run npm run deploy.
• Option 2: Copy everything under dist/ to ComfyUI/web/ in your ComfyUI checkout manually.

Publish release to ComfyUI main repo

Run following command to publish a release to ComfyUI main repo. The script will create a new branch and do a commit to web/ folder by checkout dist.zip from GitHub release.

• python scripts/main_repo_release.py <path_to_comfyui_main_repo> <version>