interface/nodes-2

[giscus[bot]]

interface/nodes-2

Learn about Nodes 2.0, the new Vue-based node rendering system in ComfyUI that enables faster development and richer interactions.

https://docs.comfy.org/interface/nodes-2

[gershu-ar]

Nodes 2.0 have improved a lot over the time, kudos!; in my very own personal view, I think they are not as space efficient as "Nodes 1.0" (for those who love to clutter the visible workflow working area), and some actions require extra clicking, yet they work nicely. Like all habits, it takes a few hours to adapt to a new option in an UI, yet, Nodes 2.0 has been worth it so far 👍

[KatonRyu]

Is there a list available with breaking changes regarding the creation and maintaining of custom nodes? I have a node which relies on canvas for sketching which breaks visually when switching to Nodes 2.0. Knowing what changed in the rendering lifecycle would make it easier to fix than digging through the console.

[gershu-ar]

A pseudocode for making a sketching/canvas node compatible across both versions should be something like this:

// Instead of hooking into onDrawForeground(ctx):
// Create and bind an actual HTML Canvas element as a custom DOM widget
const canvasEl = document.createElement("canvas");

// Attach via ComfyUI's widget API
node.addCustomWidget({
    name: "sketch_canvas",
    type: "canvas",
    element: canvasEl,
    draw(ctx, node, width, y) {
        // Fallback rendering for Legacy LiteGraph mode
    }
});

As for the listing I haven't found any, sry!

[KatonRyu]

Ah, so it uses node.addCustomWidget now? I'm currently using node.addDOMWidget to set it up.

I think the only part breaking now is overlaying the second inert canvas properly because I'm appending it as a child of the wrapper of the created canvas element. Essentially, the custom widget has one drawable canvas and one overlay with absolute positioning and z-index +1 relative to the drawable canvas, which become misaligned when using Nodes 2.0. I presume the wrapper element has simply changed properties in the Nodes 2.0 version, but I can probably get it working again once Nodes 2.0 becomes default.

Thanks for the reply!

[gershu-ar]

You're spot on about the wrapper element properties changing in Nodes 2.0. They introduced a new Vue-based rendering container, relying on the host node/wrapper's CSS for absolute positioning often causes layout offsets.

To ensure your overlay canvas stays perfectly aligned in both legacy and Nodes 2.0 I would:

1. Wrap both your drawable canvas and overlay canvas inside a single parent div.
2. Explicitly set that parent div to position: relative; display: inline-block; (or fixed dimensions)
3. Pass that outer parent div to addDOMWidget / addCustomWidget

I believe by creating your own self-contained relative positioning context, your position: absolute; z-index: 1 overlay shouldn't break regardless of how Nodes 2.0 styles its internal wrappers.