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 weekly in the ComfyUI main repository, aligned with ComfyUI backend's stable release schedule.
Feature Freeze
There will be a 2-day feature freeze before each stable release. During this period, no new major features will be merged.
Release Summary
Major features
v1.3.22: Integrated server terminal
Press Ctrl + ` to toggle integrated terminal.
https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
v1.2.4: Node library sidebar tab
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
v1.2.0: Queue/History sidebar tab
https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
v1.1.0: Node search box
Fuzzy search & Node preview
Release link with shift
https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25
QoL changes
v1.3.32: **Litegraph** Nested group
https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
v1.3.24: **Litegraph** Group selection
https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
v1.3.6: **Litegraph** Toggle link visibility
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.
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.
v1.3.1: **Litegraph** Shift drag link to create a new link
v1.2.62: **Litegraph** Show optional input slots as donuts
v1.2.44: **Litegraph** Double click group title to edit
https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f
v1.2.39: **Litegraph** Group selected nodes with Ctrl + G
https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151
v1.2.38: **Litegraph** Double click node title to edit
https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30
v1.2.7: **Litegraph** drags multiple links with shift pressed
https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe
https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
v1.2.2: **Litegraph** auto connects to correct slot
Before
https://github.com/user-attachments/assets/c253f778-82d5-4e6f-aec0-ea2ccf421651
After
https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
v1.1.8: **Litegraph** hides text overflow on widget value
https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
Developer APIs
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
iExtensions 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.
Development
Tech Stack
- Vue 3 with TypeScript
- Pinia for state management
- PrimeVue with TailwindCSS for UI
- Litegraph for node editor
- zod for schema validation
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 devto start the dev server - Run
npm run dev:electronto 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.gittotests-ui/ComfyUI_examplesor the EXAMPLE_REPO_PATH location specified in .envnpm ito install all dependenciesnpm run test:generateto fetchtests-ui/data/object_info.jsonnpm run test:generate:examplesto extract the example workflowsnpm run testto execute all unit tests.
Component Test
Component test verifies Vue components in src/components/.
npm run test:componentto 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 linkin the local litegraph repo. - Run
npm link @comfyorg/litegraphin this repo.
This will replace the litegraph package in this repo with the local litegraph repo.
Deploy
- Option 1: Set
DEPLOY_COMFYUI_DIRin.envand runnpm run deploy. - Option 2: Copy everything under
dist/toComfyUI/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>