Comfy UI nodes that renders/shows texts in HTML element other than textarea

[ilicnon]

Does anyone have an example of comfy ui custom nodes that does this? The main reason i want to do this because almost all nodes ive seen that renders text uses textarea which apparently doesnt let you have custom color on pieces of text. Use case for this is that i will probably make a custom node that shows booru formatted prompt where each tags are seperately colored according to their tag groups (which are defined by danbooru), makes prompting easy (for me, probably) basically

[ilicnon]

Something like this, probably

[tudoanh]

I also wanted this so bad. Please help.

[christian-byrne]

Use node.addDOMWidget:

interface LGraphNode {
  addDOMWidget<
    T extends HTMLElement = HTMLElement,
    V extends object | string = string
  >(
    name: string,
    type: string, // INPUT_TYPES type
    element: T, // HTMLElement you can put anything inside of
    options?: {
      hideOnZoom?: boolean // whether to hide when zoomed out as with textarea widgets
      selectOn?: string[]
      onHide?: (widget: DOMWidget<T, V>) => void
      getValue?: () => V
      setValue?: (value: V) => void
      getMinHeight?: () => number
      getMaxHeight?: () => number
      getHeight?: () => string | number
      onDraw?: (widget: DOMWidget<T, V>) => void
      afterResize?: (this: DOMWidget<T, V>, node: LGraphNode) => void
    }
  ): DOMWidget<T, V>
}

[tudoanh]

Thank you so much!! This is working perfect.