comfyui-node-frontend

Extend ComfyUI frontends with JavaScript hooks, widgets, and UI components.

265|28|Updated Mar 5, 2026

Search Tags:#frontend #javascript #hooks #extensions #widgets #sidebar #comfyui

Ready to run

npx skills add https://github.com/jtydhr88/comfyui-custom-node-skills --skill comfyui-node-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: comfyui-node-frontend
Source: https://github.com/jtydhr88/comfyui-custom-node-skills/tree/main/plugins/comfyui-custom-nodes/skills/comfyui-node-frontend
Command: npx skills add https://github.com/jtydhr88/comfyui-custom-node-skills --skill comfyui-node-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ComfyUI frontend extensions streamline adding UI features to custom nodes by enabling modular JavaScript hooks, widgets, and UI components, reducing integration work and keeping frontend logic organized.

Core Features & Use Cases

Hooks and lifecycle methods to customize frontend behavior (init, setup, loadedGraphNode, beforeRegisterVueAppNodeDefs, etc.) for new or existing nodes.
Custom Widgets and Widgets registry to create rich UI components, with support for DOM-based widgets and Vue component wrappers.
Declarative extension properties including custom commands, settings, and UI enhancements like sidebars, top bars, and dialogs.
Real-world use cases include adding a new frontend panel with controls for a custom node, extending the UI with a custom widget, or registering global frontend commands for rapid workflows.

Quick Start

Create a JS extension by exporting WEB_DIRECTORY in Python (for example in init.py) and placing your extension script files under the designated directory so that all extension scripts are loaded automatically at startup.

Frequently Asked Questions about comfyui-node-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add a custom sidebar tab to my ComfyUI frontend extension?▼

To add a custom sidebar tab to your ComfyUI frontend extension, use declarative extension properties within your JavaScript code. This approach allows you to define UI enhancements like sidebars, top bars, and dialogs directly for your custom nodes.

What is the process for loading JavaScript extensions in ComfyUI?▼

Loading JavaScript extensions in ComfyUI requires exporting the WEB_DIRECTORY variable in your Python file. You must then place your extension scripts under the designated js or scripts directory so they load automatically at startup.

Can I use Vue components for custom widgets in ComfyUI?▼

Yes, you can use Vue components for custom widgets in ComfyUI. The frontend extension system supports DOM-based widgets and Vue component wrappers through the custom Widgets registry to build rich UI components.

What lifecycle hooks are available for ComfyUI custom nodes?▼

Available lifecycle hooks for ComfyUI custom nodes include init, setup, loadedGraphNode, and beforeRegisterVueAppNodeDefs. These hooks enable you to customize frontend behavior for new or existing nodes throughout the application lifecycle.

Does ComfyUI support registering global frontend commands for workflows?▼

Yes, ComfyUI supports registering global frontend commands for workflows through declarative extension properties. This enables rapid workflows by allowing developers to define custom commands directly within their JavaScript extension scripts.