ComfyUI_CodeMirror

Syntax-highlighted code editor for ComfyUI scriptable nodes.

Overview

ComfyUI_CodeMirror provides a syntax-highlighted code editor for scriptable nodes in ComfyUI. It automatically replaces the default text input for nodes with widgetType: "PYTHON_SCRIPT" with a CodeMirror 6 editor featuring Python syntax highlighting, one-dark theme, and standard keybindings.

Usage

This extension is optional and works automatically with any custom node that uses widgetType: "PYTHON_SCRIPT". No additional configuration is needed.

Extensions that use CodeMirror:

• ComfyUI_Scriptable - All scriptable nodes use PYTHON_SCRIPT widgetType

Architecture

graph TB
    A[ComfyUI] --> B[ComfyUI_CodeMirror Extension]
    B --> C[Load CodeMirror Bundle]
    C --> D[Register Custom Widget]
    D --> E[Detect PYTHON_SCRIPT Widgets]
    E --> F{CodeMirror Available?}
    F -->|Yes| G[Replace with CodeMirror Editor]
    F -->|No| H[Use Default Textarea]
    G --> I[Syntax Highlighting]
    G --> J[One-Dark Theme]
    G --> K[Standard Keybindings]
    
    L[Scriptable Nodes] --> E

Installation

1. Clone this repository into your ComfyUI custom_nodes directory:

   cd /path/to/ComfyUI/custom_nodes
   git clone <repository-url> ComfyUI_CodeMirror
   

2. (Optional) Build CodeMirror bundle for syntax highlighting:

   cd ComfyUI_CodeMirror
   npm install
   npm run build
   

3. Restart ComfyUI

Usage

The extension automatically detects scriptable nodes with widgetType: "PYTHON_SCRIPT" and enhances them with CodeMirror if available.

Manual Usage (Advanced)

To explicitly use CodeMirror in your custom nodes:

def INPUT_TYPES(cls):
    return {
        "required": {
            "script": ("STRING", {
                "multiline": True,
                "widgetType": "PYTHON_SCRIPT_CODEMIRROR",  # Requires CodeMirror
                "default": "# Your Python code here"
            })
        }
    }

Development

Building CodeMirror Bundle

cd custom_nodes/ComfyUI_CodeMirror
npm install @codemirror/state @codemirror/view @codemirror/lang-python @codemirror/theme-one-dark
npm run build

Testing Without Bundle

The extension works without the bundle - it simply uses the default textarea. This is useful for testing the extension loading logic.

Integration with Other Extensions

ComfyUI_WolfSigmas

Scriptable nodes in ComfyUI_WolfSigmas automatically benefit from CodeMirror if this extension is installed:

• WolfScriptableString
• WolfScriptableImage
• WolfScriptableLatent
• WolfScriptableMask
• WolfScriptableConditioning

ComfyUI_WolfBypass

Scriptable block nodes in ComfyUI_WolfBypass also automatically benefit.

License

MIT