https://github.com/orion4d/Orion4D_TextMakerPro

TextMakerPro is a ComfyUI custom node and browser-based text/layout editor designed to create stylized text images directly from ComfyUI.

The ComfyUI node stays intentionally lightweight and acts as a bridge, while the editor runs in a dedicated HTML/JavaScript interface with layers, transforms, masks, effects, custom fonts, and PNG export.

Custom node name: TextMakerPro
Category: Orion4D_TextMakerPro

Overview

TextMakerPro lets you create text-based compositions without leaving your ComfyUI workflow.

It supports:

• text layers;

• shape layers;

• pixel/image layers;

• layer transforms;

• clipping masks;

• custom JavaScript FX;

• custom fonts;

• transparent PNG rendering;

• quick export;

• lightweight workflow storage.

The editor is opened from the ComfyUI node with Open TextMakerPro.

Main features

ComfyUI node

The node provides a compact bridge between ComfyUI and the browser editor.

Current node-side features include:

• Open TextMakerPro button;

• canvas width / height controlled from the node;

• transparent background toggle;

• background color selector;

• saved creation selector;

• save current creation;

• delete saved creation;

• erase/reset creation;

• image preview inside the node;

• outputs for image/RGBA usage in ComfyUI.

Rendered images are stored as PNG files instead of large Base64 strings, keeping ComfyUI workflows much lighter.

Editor features

Layer system

TextMakerPro includes a layer-based editor with:

• text layers;

• shape layers;

• pixel/image layers;

• drag-and-drop layer ordering;

• visibility toggle;

• solo/mute mode;

• lock/unlock mode;

• multi-selection with Shift;

• layer duplication;

• layer deletion;

• center layer in canvas.

Locked layers remain visible and selectable from the layer list, but they are ignored by canvas hit-testing so you can click through them and edit layers underneath.

Text layers

Text layers support:

• text content;

• font family;

• custom fonts;

• font size;

• weight;

• style;

• fill color;

• fill transparency;

• stroke color;

• stroke width;

• opacity;

• blend mode;

• alignment;

• letter spacing;

• line height;

• shadow;

• shadow opacity;

• shadow blur;

• shadow offset X/Y;

• clipping mask support;

• JavaScript FX support.

Shape layers

Shape layers support:

• circle / ellipse;

• square / rectangle;

• independent rounded corners for rectangles;

• triangle;

• regular polygons from 5 to 10 sides;

• stars from 4 to 96 points;

• outer and inner star diameter;

• shape roundness options;

• fill color;

• fill transparency;

• stroke;

• shadow;

• opacity;

• blend mode;

• transform tools;

• clipping mask support;

• canvas fill mode.

A shape can be used as a fill layer, taking the exact canvas size while remaining independent from the node background color.

Pixel/image layers

Pixel layers support image import with:

• original size;

• crop / cover canvas;

• fit to width;

• fit to height;

• RGBA transparency preservation when available;

• move / rotate / scale tools.

Transform tools

The editor provides canvas interaction tools similar to a lightweight design app:

• move;

• rotate;

• scale from center;

• lock aspect ratio;

• zoom tool;

• hand/pan tool;

• mouse wheel zoom;

• fit view;

• reset zoom.

Layer coordinates can be anchored to:

• center;

• top-left;

• top-center;

• top-right;

• bottom-left;

• bottom-center;

• bottom-right.

With the center anchor, x = 0 and y = 0 means the layer is centered on the canvas.

Masks and clipping

Text and shape layers can be used as clipping masks.

You can assign masks from the layer settings, or drag/drop a layer into a mask-capable layer in the layer list.

When a text or shape layer acts as a mask:

• it remains transformable;

• moving or rotating the mask also moves/rotates its clipped child layers;

• the child layer remains independently editable.

Flattening and export

TextMakerPro includes rasterization utilities:

Merge selected

Merges the selected visible layers into a single pixel layer.

• Shortcut: Ctrl + Shift + M

• Transparency is preserved.

• Locked layers are protected.

Flatten all

Flattens all visible layers into one pixel layer.

• Shortcut: Ctrl + Alt + M

• Transparency is preserved.

Quick PNG export

Exports all visible layers as one PNG file.

• Shortcut: Ctrl + Shift + E

• Transparency is preserved if the background is transparent.

• If background color is enabled, it is included in the exported PNG.

FX system

TextMakerPro supports JavaScript FX modules stored in:

TextMakerPro/web/fx/

Each FX is a standalone ES module. The editor scans the folder and lists available effects in the FX palette.

A typical FX file looks like this:

export const info = {
  id: "my_fx",
  name: "My FX",
  description: "Short description shown in the FX panel",
};

export const configSchema = [
  { name: "amount", label: "Amount", type: "number", default: 10, min: 0, max: 100, step: 1 },
];

export function apply(context, layer, fxSettings = {}, api = {}) {
  // Draw custom text effect here
}

export function measure(layer, baseMetrics, fxSettings = {}, api = {}) {
  // Optional: expand selection box when the FX draws outside the original text bounds
  return baseMetrics;
}

The FX system is intentionally simple: one active FX per text layer. For complex looks, create “super scripts” that combine several effects inside a single FX module.

Manual JavaScript FX editor

The FX panel includes a manual JavaScript mode for testing FX without leaving the editor.

You can:

• switch between saved FX and manual JS;

• paste or edit a JS FX script;

• test/apply the script immediately;

• save the manual script as a new .js file in web/fx/;

• delete saved FX scripts from the editor.

This is useful for rapidly prototyping new text effects.

Custom fonts

Custom fonts can be placed in:

TextMakerPro/fonts/

Supported formats:

• .ttf

• .otf

• .woff

• .woff2

After refreshing/reopening the editor, custom fonts appear in the font list.

Saved creations

TextMakerPro can save and reload complete creations.

Saved files are stored in:

TextMakerPro/text_creations/

Each saved creation stores:

• the editor JSON configuration;

• canvas width and height;

• layer settings;

• FX settings;

• the rendered PNG preview/output.

When a saved creation is loaded, the stored canvas size is restored.

Workflow size optimization

Earlier versions stored the rendered PNG as Base64 directly inside the hidden ComfyUI widget.

This was convenient but inefficient for large canvases such as 2048 × 2048.

The current version stores rendered PNG files in:

TextMakerPro/rendered_images/

The workflow only stores the image path, keeping workflow JSON files much smaller and faster to save/load.

Old workflows containing Base64 image data remain compatible.

Installation

1. Copy the TextMakerPro folder into your ComfyUI custom nodes directory:

ComfyUI/custom_nodes/TextMakerPro/

1. Restart ComfyUI.

2. Add the node from:

Orion4D_TextMakerPro > TextMakerPro

1. Click Open TextMakerPro to launch the editor.

Suggested folder structure

TextMakerPro/
├─ __init__.py
├─ textmakerpro.py
├─ README.md
├─ fonts/
│  ├─ README.md
│  └─ .gitkeep
├─ rendered_images/
│  └─ .gitkeep
├─ text_creations/
│  └─ .gitkeep
└─ web/
   ├─ textmakerpro.html
   ├─ textmakerpro.js
   ├─ app-editor.js
   ├─ fx-registry.js
   └─ fx/
      ├─ README.md
      └─ fx-example.js

Keyboard shortcuts

ShortcutActionCtrl + ZUndoCtrl + Shift + ZRedoCtrl + DDuplicate active layerDelete / BackspaceDelete active layerShift + ClickMulti-select layersMouse wheelZoom in/outZZoom toolAlt while zoomingZoom outSpaceHand/pan toolArrow keysMove selected layer(s) by 1 pxShift + Arrow keysMove selected layer(s) by 10 pxCtrl + Shift + MMerge selected layersCtrl + Alt + MFlatten all visible layersCtrl + Shift + EQuick PNG export

Notes and limitations

• FX are currently designed mainly for text layers.

• Complex effects should be built as standalone “super scripts” rather than stacked FX.

• Large imported images can increase saved creation size if embedded in layer JSON.

• Browser cache can occasionally keep old JS files. If changes do not appear, hard refresh the editor or restart ComfyUI.

Troubleshooting

The editor does not update after replacing files

Restart ComfyUI and reopen the editor. If needed, clear the browser cache or force refresh.

My custom FX does not appear

Check that the file is inside:

TextMakerPro/web/fx/

Then click Refresh FX folder in the FX panel.

My custom FX crashes

Open the browser DevTools console and check the error message. Most issues are caused by:

• syntax errors;

• missing export statements;

• duplicate FX id values;

• invalid configSchema entries.

My workflow became too heavy

Use the latest version. Rendered PNG output is now stored as a file path instead of Base64 in the workflow.

Development notes

The architecture is split into three main parts:

• textmakerpro.py — ComfyUI node and backend routes;

• web/textmakerpro.js — ComfyUI frontend integration;

• web/app-editor.js — browser editor logic;

• web/fx-registry.js — FX discovery and dynamic imports;

• web/fx/ — user and built-in FX modules.

The node is intentionally minimal. Most UI and creative logic lives in the HTML/JavaScript editor.

🌟 Show Your Support

If this project helped you, please consider giving it a ⭐ on GitHub!

Made with ❤️ for the ComfyUI community

by Orion4D