```javascriptconst exampleFunction = () => {    console.log('This is an example function');};
exampleFunction();

function send_message(message) {    const body = new FormData();    body.append('something',message);    api.fetchApi("/a_new_path", { method: "POST", body, });}

    async setup() {        const original_getCanvasMenuOptions = app.canvas.getCanvasMenuOptions;    // save the original function        app.canvas.getCanvasMenuOptions = function () {            const options = original_getCanvasMenuOptions.apply(this, arguments); // call the original function            options.push(null);                          // divider            options.push({                content: `Menu item text`,                disabled: false,                         // or a function determining whether to disable                callback: () => {                                       // action when clicked goes in here                }            });            return options;                              // return the menu options with your custom ones added        }    }

// somewhere inside a callback, perhaps in onExecuted, you want to set the value of a widget called `name_of_widget` to `new_value`    var w = this.widgets?.find((w) => w.name === 'name_of_widget')    if (w) {        w.value = new_value;        this.onResize?.(this.size);  // onResize redraws the node    }

    var node_id = parseInt(other_node_id);                             // if you have it as a string it needs to be an int    var node = this.graph._nodes_by_id[node_id];                       // for you to look it up like this    var w = node?.widgets.find((w) => w.name==='name_of_widget'); // and then it's just the same    if (w) {        w.value = new_value;        node.onResize?.(node.size);    }

import { app } from "../../../scripts/app.js";import { addValueControlWidget } from "../../../scripts/widgets.js";
app.registerExtension({    name: "my.unique.extension.name",    async nodeCreated(node) {        const variationSeedWidgetIndex = node.widgets?.findIndex((w) => w.name === 'variation_seed');        if (variationSeedWidgetIndex > -1) {            const variationSeedWidget = node.widgets[variationSeedWidgetIndex];            const variationSeedValueControl = addValueControlWidget(node, variationSeedWidget, "fixed");            node.widgets.splice(variationSeedWidgetIndex+1,0,node.widgets.pop());        }    }});

"required": {                "info": ("CHEESE",{"forceInput": True})            }

import { app } from "../../../scripts/app.js";import { $el } from "../../../scripts/ui.js";
/*A method that returns the required style for the html*/function get_position_style(ctx, widget_width, y, node_height) {    const MARGIN = 4;  // the margin around the html element
/* Create a transform that deals with all the scrolling and zooming */    const elRect = ctx.canvas.getBoundingClientRect();    const transform = new DOMMatrix()        .scaleSelf(elRect.width / ctx.canvas.width, elRect.height / ctx.canvas.height)        .multiplySelf(ctx.getTransform())        .translateSelf(MARGIN, MARGIN + y);
    return {        transformOrigin: '0 0',        transform: transform,        left: `0px`,        top: `0px`,        position: "absolute",        maxWidth: `${widget_width - MARGIN*2}px`,        maxHeight: `${node_height - MARGIN*2}px`,    // we're assuming we have the whole height of the node        width: `auto`,        height: `auto`,    }}
app.registerExtension({    name: "the.unique,name",
    async beforeRegisterNodeDef(nodeType, nodeData, app) {        if (nodeType.comfyClass=="HtmlNode") {
            /*            Hijack the onNodeCreated call to add our widget            */            const orig_nodeCreated = nodeType.prototype.onNodeCreated;            nodeType.prototype.onNodeCreated = function () {                orig_nodeCreated?.apply(this, arguments);
                const widget = {                    type: "HTML",   // whatever                    name: "flying", // whatever                    draw(ctx, node, widget_width, y, widget_height) {                        Object.assign(this.inputEl.style, get_position_style(ctx, widget_width, y, node.size[1])); // assign the required style when we are drawn                    },                };
                /*                Create an html element and add it to the document.                Look at $el in ui.js for all the options here                */                widget.inputEl = $el("img", { src: "http://127.0.0.1:8188/view?filename=misc-stained+glass_00001_.png&subfolder=2023-10-16&type=output" });                document.body.appendChild(widget.inputEl);
                /*                Add the widget, make sure we clean up nicely, and we do not want to be serialized!                */                this.addCustomWidget(widget);                this.onRemoved = function () { widget.inputEl.remove(); };                this.serialize_widgets = false;
            }        }    },})

class HtmlNode:    CATEGORY = "quicknodes"    @classmethod    def INPUT_TYPES(s):        return { "required":{} }    RETURN_TYPES = ()    RETURN_NAMES = ()    FUNCTION = "func"    def func(self):        return ()

  getCustomWidgets(app) {    return {      CHEESE(node, inputName, inputData, app) { // We return an object containing a field CHEESE which has a function (taking node, name, data, app)         const widget = /* see below */;        // that creates a widget         widget.something = something;          // maybe adds stuff to it         node.addCustomWidget(widget);          // adds it to the node         return  widget;                        // and returns it.      }    }  },

    "required": { "slice": ("CHEESE",),

const widget = {    type: inputData[0],       // the type, CHEESE    name: inputName,          // the name, slice    size: [128,128],          // a default size    draw(ctx, node, width, y) {                              // a method to draw the widget (ctx is a CanvasRenderingContext2D)    },    computeSize(...args) {       return [128,128];      // a method to compute the current size of the widget    },    async serializeValue(nodeId,widgetIndex) {       return "Data That Goes to the Python Side";    }}

NODE_CLASS_MAPPINGS = { "my unique name" : SimpleCustomNode }NODE_DISPLAY_NAME_MAPPINGS = { "my unique name" : "Image inverter" }

from .simple_source_file import SIMPLE_CUSTOM_NODENODE_CLASS_MAPPINGS = { "my unique name" : SimpleCustomNode }NODE_DISPLAY_NAME_MAPPINGS = { "my unique name" : "Image inverter" }__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS']

    @classmethod    def INPUT_TYPES(cls):        return {            "required" : {},            "hidden" : {                "prompt": "PROMPT",                "extra_info": "EXTRA_PNGINFO",                "id": "UNIQUE_ID",            }        }
    def my_function(self, prompt:dict, extra_info:dict, id:int):        ...code...

        h = valid_inputs["hidden"]        for x in h:            if h[x] == "PROMPT":                input_data_all[x] = [prompt]            if h[x] == "EXTRA_PNGINFO":                if "extra_pnginfo" in extra_data:                    input_data_all[x] = [extra_data['extra_pnginfo']]            if h[x] == "UNIQUE_ID":                input_data_all[x] = [unique_id]

    const onConnectionsChange = nodeType.prototype.onConnectionsChange;    nodeType.prototype.onConnectionsChange = function (side,slot,connect,link_info,output) {        this.inputs[0].color_on = app.canvas.default_connection_color_byType["STRING"];  // set color_on on an input - here I'm reading the color for STRING from the color pallet        onConnectionsChange?.apply(side,slot,connect,link_info,output);                  // and then process the change (which includes a redraw)    }

    const p = structuredClone(await app.graphToPrompt());

    async setup() {        /*        The graphToPrompt method is called when the app is going to send a prompt to the server.        We hijack it, call the original, and return a modified copy.        */        _original_graphToPrompt = app.graphToPrompt;        app.graphToPrompt = async function () {            const p = StructuredClone(await _original_graphToPrompt.apply(app));                     // edit p            return p;        }

p.output[node_id].class_type  // string of the unique name of the node class (from the python)p.output.inputs[input_name]   // the value of the widget                              // OR a list indicating the node this input is connected to [node_id_as_string, output_slot]                              // OR undefined for unconnected input

p.workflow.config        // not sure - seems to be emptyp.workflow.extra         // not sure - seems to be emptyp.workflow.groups                // a list of groupsp.workflow.groups[n].bounding    // list length 4 for the bounding box - I think its [x,y,w,h] in the current view                    .color                    .font_size                    .title
p.workflow.last_link_id  // the highest numbered link in the links list (below)p.workflow.last_node_id  // the highest numbered node in the nodes list (below)
p.workflow.links         // a list of links, each of which is a list containing:                         // [link_id, source_node_id, source_node_output_slot, destination_node_id, destination_node_input_slot, type]                         // type is a string, the rest are integers
p.workflow.nodes         // a list of nodes (see below)p.workflow.version       // current value 0.4

node = p.workflow.nodes[n]
node.flags               // dunnonode.id                  // id (as an integer)node.mode                // 0 = ALWAYS, 1 = ON_EVENT, 2 = NEVER, 3 = ON_TRIGGER, 4 = BYPASSED   (I've only seen 0 and 4 in Comfy)node.order               // position in execution order (zero index)node.outputs             // the outputsnode.outputs[n].links    // array of integers which correspond to the link_id in p.workflow.links               .name               .slot_index               .typenode.pos                 // position (relative to current view, I think)node.properties          // I've only seen 'Node node for S&R'node.size                // size!node.type                // string of the unique name of the node class (from the python)node.widgets_values      // array of the value of the widgets

from server import PromptServerdictionary_of_stuff = {"something":"A text message"}PromptServer.instance.send_sync("my-message-handle", dictionary_of_stuff)

import { app } from "../../../scripts/app.js";def myMessageHandler(event) {    alert(event.detail.something);}// in setup()api.addEventListener("my-message-handle", myMessageHandler);

from server import PromptServerfrom aiohttp import webimport time

class ClientProxy:  def __init__(self): pass
  @classmethod  def INPUT_TYPES(s):    return {      "required": {},      "optional": {        "input": ("INT", {}),      },      "hidden": {        "id": "UNIQUE_ID",      }    }
  CATEGORY = "proxies"  FUNCTION = "run"  RETURN_TYPES = ("INT",)  RETURN_NAMES = ("out",)

  def IS_CHANGED(id):    return float("NaN")

  def run(self, id, input):    me = prompt[id]    PromptServer.instance.send_sync("proxy", {      "id":    id,      "input": input,    })    outputs = MessageHolder.waitForMessage(id)    return (outputs['output'],)

# Message Handling
class MessageHolder:  messages = {}
  @classmethod  def addMessage(self, id, message):    self.messages[str(id)] = message
  @classmethod  def waitForMessage(self, id, period = 0.1):    sid = str(id)
    while not (sid in self.messages):      time.sleep(period)
    message = self.messages.pop(str(id),None)    return message

routes = PromptServer.instance.routes@routes.post('/proxy_reply')async def proxy_handle(request):  post = await request.json()  MessageHolder.addMessage(post["node_id"], post["outputs"])  return web.json_response({"status": "ok"})

{  node_id  outputs: {    output  }}

api.addEventListener('proxy', function proxyHandler (event) {  const data = event.detail
  const reply = {    node_id: data.id,    outputs: {      output: data.input * 2    }  }

  api.fetchApi("/proxy_reply", {    method: "POST",    headers: {      "Content-Type": "application/json",    },    body: JSON.stringify(reply),  })})

import { ComfyWidgets } from "../../../scripts/widgets.js";//...    var w = this.widgets?.find((w) => w.name === "name_of_the_widget");  // see if it already exists    if (w === undefined) {        w = ComfyWidgets["STRING"](this, "name_of_the_widget", ["STRING", { multiline: true }], app).widget; // see description below        w.inputEl.readOnly = true;            // make it read only        w.inputEl.style.opacity = 0.6;        // any css styling you want        w.inputEl.style.fontSize = "9pt";    }    w.value = "Text to display";    this.onResize?.(this.size);                   // this will make it redraw

export const ComfyWidgets = {//...    STRING(node, inputName, inputData, app) {// code that creates the widget as res and adds it to the node using node.addWidget or similar calls    return res;

function remove_widget(node, widget_name) {    const w = node.widgets?.findIndex((w) => w.name === widget_name); // search for the widget name    if (w>=0) {                           // if we find it (if not, w = -1)        const wid = node.widgets[w];      // get the widget itself (w is the index)        node.widgets.splice(w,1);         // remove it        wid?.onRemove();                  // let the widget do any cleaning up        node.size = node.computeSize();   // work out what size the node should be now        node.setDirtyCanvas(true, true);  // mark for redrawing    }}

class SimpleCustomNode:    @classmethod    def INPUT_TYPES(cls):        return {            "required": { "image_in" : ("IMAGE", {}) },        }
    RETURN_TYPES = ("IMAGE",)    RETURN_NAMES = ("image_out",)    FUNCTION = "invert"    CATEGORY = "examples"
    def invert(self, image_in):        image_out = 1 - image_in        return (image_out,)

    @classmethod    def INPUT_TYPES(s):        return { "required" : {}, "optional" : { 'anything' : ( "*", {} ) } }
    def my_func(self, anything=None):        # anything will be passed if the node is connected

class PreviewImage(SaveImage):    def __init__(self):        self.output_dir = folder_paths.get_temp_directory()        self.type = "temp"        self.prefix_append = "_temp_" + ''.join(random.choice("abcdefghijklmnopqrstupvxyz") for x in range(5))
@classmethod    def INPUT_TYPES(s):        return {"required":                    {"images": ("IMAGE", ), },                "hidden": {"prompt": "PROMPT", "extra_pnginfo": "EXTRA_PNGINFO"},                }

class MyNode:  IS_OUTPUT = True...  def the_func(self, input, ...):
    return { "ui": {"name":value}, "result" : (the output tuple) }

import { app } from "../../../scripts/app.js";app.registerExtension({                                                                       // 1    name: "a.unqiue.name.for.this.extension",    async beforeRegisterNodeDef(nodeType, nodeData, app) {                                // 2        if (node?.comfyClass === "The unique name of my node class on the backend") { // 3            const onExecuted = nodeType.prototype.onExecuted;                     // 4            nodeType.prototype.onExecuted = function (message) {                onExecuted?.apply(this, arguments);                           // 5                // do something with the message                              // 6            }        }    },}),

WEB_DIRECTORY = "./js"__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]

    LGraphCanvas.prototype.myFunction = function(node) {  // add a function to the LGraphCanvas prototype so all nodes get it        // do something to the node    }
    const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions;   // store the existing method    LGraphCanvas.prototype.getNodeMenuOptions = function (node) {           // replace it        const options = getNodeMenuOptions.apply(this, arguments);      // start by calling the stored one        node.setDirtyCanvas(true, true);                                // force a redraw of (foreground, background)        options.splice(options.length - 1, 0,                           // splice a new option in at the end            {                content: "My Menu Option",                                      // with a name                callback: () => { LGraphCanvas.prototype.myFunction(node) ; }   // and the callback            },                    null                                                    // a divider        );        return options;                                                 // and return the options    };