Frontend (JavaScript)

The frontend file (NodeName.js) defines how your node looks and behaves in the graph editor. It uses the LiteGraph.js API.

Standard Template

const { BaseNode } = window.BlobitLib;

class MyCustomNode extends BaseNode {
    constructor() {
        super({
            title: "My Custom Node",
            nodeName: "MyCustomNode", // CRITICAL: MUST MATCH FOLDER NAME EXACTLY
            size: [240, 100],
            inputs: [
                { name: "InputImage", type: "image", label: "Input Image" },
                { name: "Strength", type: "number" }
            ],
            outputs: [
                { name: "OutputImage", type: "image" }
            ],
            properties: {
                precision: 1.0,
                mode: "fast"
            }
        });

        // Add Widgets immediately in constructor
        this.addPropertyWidget("slider", "Precision", "precision", { min: 0.0, max: 1.0, step: 0.1 });
        this.addPropertyWidget("combo", "Mode", "mode", { values: ["fast", "quality"] });
    }
}

// MUST Export Default
export default MyCustomNode;

Widgets vs Inputs

• Inputs: Connectors on the left side of the node. Receive data from other nodes.
• Widgets: UI elements on the node body (sliders, text inputs, toggles).

Blobit automatically converts inputs into widgets if no link is connected, but you can explicitly define widgets for parameters that should always be adjustable on the node.

Adding Widgets

There are two primary ways to add widgets in Blobit:

1. this.addPropertyWidget() (Recommended): Automatically binds the widget value to this.properties. It saves the state and allows users to “Convert to Input”.
2. this.addWidget() (Standard): The raw LiteGraph method. Good for buttons or temporary UI that doesn’t need to be saved.

View Widget Helper Reference

Adding Widgets (in Constructor)

// Type, Name, Default Value, Options
this.addWidget("slider", "Strength", 0.5, { min: 0.0, max: 1.0 });
this.addWidget("toggle", "Invert", false);
this.addWidget("text", "Prompt", "Hello World");

// Available Types:
// "number": { min, max, step, precision }
// "slider": { min, max, step }
// "combo":  { values: ["A", "B"] }
// "text":   {}
// "toggle": {}

// Color Picker (React Widget)
this.addReactColorWidget("Text Color", "Color", "#FFFFFF");

Communication with Backend

When the “Queue Prompt” button is clicked:

1. Blobit gathers the state of the graph.
2. It sends this.properties and the values of current inputs/widgets to the backend.
3. The names must match what you look for in self.get_input() in Python.

Helper Methods

Blobit extends standard LiteGraph functionality with powerful helpers for widget management and URL normalization.

View Frontend Helper Reference

Custom Rendering

You can override drawing methods to visualize data directly on the node.

View Custom Rendering Guide