<a target="_blank" rel="ugc" href="https://github.com/orion4d/Orion4D_TextMakerPro">https://github.com/orion4d/Orion4D_TextMakerPro</a>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: <code>TextMakerPro</code> Category: <code>Orion4D_TextMakerPro</code><hr /><h2 id="overview">Overview</h2>TextMakerPro lets you create text-based compositions without leaving your ComfyUI workflow.It supports:<ul><li>text layers;</li><li>shape layers;</li><li>pixel/image layers;</li><li>layer transforms;</li><li>clipping masks;</li><li>custom JavaScript FX;</li><li>custom fonts;</li><li>transparent PNG rendering;</li><li>quick export;</li><li>lightweight workflow storage.</li></ul>The editor is opened from the ComfyUI node with Open TextMakerPro.<hr /><h2 id="main-features">Main features</h2><h3 id="comfyui-node">ComfyUI node</h3>The node provides a compact bridge between ComfyUI and the browser editor.Current node-side features include:<ul><li>Open TextMakerPro button;</li><li>canvas width / height controlled from the node;</li><li>transparent background toggle;</li><li>background color selector;</li><li>saved creation selector;</li><li>save current creation;</li><li>delete saved creation;</li><li>erase/reset creation;</li><li>image preview inside the node;</li><li>outputs for image/RGBA usage in ComfyUI.</li></ul>Rendered images are stored as PNG files instead of large Base64 strings, keeping ComfyUI workflows much lighter.<hr /><h2 id="editor-features">Editor features</h2><h3 id="layer-system">Layer system</h3> TextMakerPro includes a layer-based editor with:<ul><li>text layers;</li><li>shape layers;</li><li>pixel/image layers;</li><li>drag-and-drop layer ordering;</li><li>visibility toggle;</li><li>solo/mute mode;</li><li>lock/unlock mode;</li><li>multi-selection with <code>Shift</code>;</li><li>layer duplication;</li><li>layer deletion;</li><li>center layer in canvas.</li></ul>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.<hr /><h3 id="text-layers">Text layers</h3>Text layers support:<ul><li>text content;</li><li>font family;</li><li>custom fonts;</li><li>font size;</li><li>weight;</li><li>style;</li><li>fill color;</li><li>fill transparency;</li><li>stroke color;</li><li>stroke width;</li><li>opacity;</li><li>blend mode;</li><li>alignment;</li><li>letter spacing;</li><li>line height;</li><li>shadow;</li><li>shadow opacity;</li><li>shadow blur;</li><li>shadow offset X/Y;</li><li>clipping mask support;</li><li>JavaScript FX support.</li></ul><hr /><h3 id="shape-layers">Shape layers</h3>Shape layers support:<ul><li>circle / ellipse;</li><li>square / rectangle;</li><li>independent rounded corners for rectangles;</li><li>triangle;</li><li>regular polygons from 5 to 10 sides;</li><li>stars from 4 to 96 points;</li><li>outer and inner star diameter;</li><li>shape roundness options;</li><li>fill color;</li><li>fill transparency;</li><li>stroke;</li><li>shadow;</li><li>opacity;</li><li>blend mode;</li><li>transform tools;</li><li>clipping mask support;</li><li>canvas fill mode.</li></ul>A shape can be used as a fill layer, taking the exact canvas size while remaining independent from the node background color.<hr /><h3 id="pixelimage-layers">Pixel/image layers</h3>Pixel layers support image import with:<ul><li>original size;</li><li>crop / cover canvas;</li><li>fit to width;</li><li>fit to height;</li><li>RGBA transparency preservation when available;</li><li>move / rotate / scale tools.</li></ul><hr /><h2 id="transform-tools">Transform tools</h2>The editor provides canvas interaction tools similar to a lightweight design app:<ul><li>move;</li><li>rotate;</li><li>scale from center;</li><li>lock aspect ratio;</li><li>zoom tool;</li><li>hand/pan tool;</li><li>mouse wheel zoom;</li><li>fit view;</li><li>reset zoom.</li></ul>Layer coordinates can be anchored to:<ul><li>center;</li><li>top-left;</li><li>top-center;</li><li>top-right;</li><li>bottom-left;</li><li>bottom-center;</li><li>bottom-right.</li></ul>With the center anchor, <code>x = 0</code> and <code>y = 0</code> means the layer is centered on the canvas.<hr /><h2 id="masks-and-clipping">Masks and clipping</h2>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:<ul><li>it remains transformable;</li><li>moving or rotating the mask also moves/rotates its clipped child layers;</li><li>the child layer remains independently editable.</li></ul><hr /><h2 id="flattening-and-export">Flattening and export</h2>TextMakerPro includes rasterization utilities:<h3 id="merge-selected">Merge selected</h3>Merges the selected visible layers into a single pixel layer.<ul><li>Shortcut: <code>Ctrl + Shift + M</code></li><li>Transparency is preserved.</li><li>Locked layers are protected.</li></ul><h3 id="flatten-all">Flatten all</h3>Flattens all visible layers into one pixel layer.<ul><li>Shortcut: <code>Ctrl + Alt + M</code></li><li>Transparency is preserved.</li></ul><h3 id="quick-png-export">Quick PNG export</h3>Exports all visible layers as one PNG file.<ul><li>Shortcut: <code>Ctrl + Shift + E</code></li><li>Transparency is preserved if the background is transparent.</li><li>If background color is enabled, it is included in the exported PNG.</li></ul><hr /><h2 id="fx-system">FX system</h2>TextMakerPro supports JavaScript FX modules stored in:<pre><code>TextMakerPro/web/fx/
</code></pre>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:<pre><code>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;
}</code></pre>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.<hr /><h2 id="manual-javascript-fx-editor">Manual JavaScript FX editor</h2>The FX panel includes a manual JavaScript mode for testing FX without leaving the editor.You can:<ul><li>switch between saved FX and manual JS;</li><li>paste or edit a JS FX script;</li><li>test/apply the script immediately;</li><li>save the manual script as a new <code>.js</code> file in <code>web/fx/</code>;</li><li>delete saved FX scripts from the editor.</li></ul>This is useful for rapidly prototyping new text effects.<hr /><h2 id="custom-fonts">Custom fonts</h2>Custom fonts can be placed in:<pre><code>TextMakerPro/fonts/
</code></pre>Supported formats:<ul><li><code>.ttf</code></li><li><code>.otf</code></li><li><code>.woff</code></li><li><code>.woff2</code></li></ul>After refreshing/reopening the editor, custom fonts appear in the font list.<hr /><h2 id="saved-creations">Saved creations</h2>TextMakerPro can save and reload complete creations.Saved files are stored in:<pre><code>TextMakerPro/text_creations/
</code></pre>Each saved creation stores:<ul><li>the editor JSON configuration;</li><li>canvas width and height;</li><li>layer settings;</li><li>FX settings;</li><li>the rendered PNG preview/output.</li></ul>When a saved creation is loaded, the stored canvas size is restored.<hr /><h2 id="workflow-size-optimization">Workflow size optimization</h2>Earlier versions stored the rendered PNG as Base64 directly inside the hidden ComfyUI widget.This was convenient but inefficient for large canvases such as <code>2048 × 2048</code>.The current version stores rendered PNG files in:<pre><code>TextMakerPro/rendered_images/
</code></pre>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.<hr /><h2 id="installation">Installation</h2><ol><li>Copy the <code>TextMakerPro</code> folder into your ComfyUI custom nodes directory:</li></ol><pre><code>ComfyUI/custom_nodes/TextMakerPro/
</code></pre><ol><li>Restart ComfyUI.</li><li>Add the node from:</li></ol><pre><code>Orion4D_TextMakerPro &gt; TextMakerPro
</code></pre><ol><li>Click Open TextMakerPro to launch the editor.</li></ol><hr /><h2 id="suggested-folder-structure">Suggested folder structure</h2><pre><code>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
</code></pre><hr /><h2 id="keyboard-shortcuts">Keyboard shortcuts</h2>ShortcutAction<code>Ctrl + Z</code>Undo<code>Ctrl + Shift + Z</code>Redo<code>Ctrl + D</code>Duplicate active layer<code>Delete</code> / <code>Backspace</code>Delete active layer<code>Shift + Click</code>Multi-select layers<code>Mouse wheel</code>Zoom in/out<code>Z</code>Zoom tool<code>Alt</code> while zoomingZoom out<code>Space</code>Hand/pan tool<code>Arrow keys</code>Move selected layer(s) by 1 px<code>Shift + Arrow keys</code>Move selected layer(s) by 10 px<code>Ctrl + Shift + M</code>Merge selected layers<code>Ctrl + Alt + M</code>Flatten all visible layers<code>Ctrl + Shift + E</code>Quick PNG export<hr /><h2 id="notes-and-limitations">Notes and limitations</h2><ul><li>FX are currently designed mainly for text layers.</li><li>Complex effects should be built as standalone “super scripts” rather than stacked FX.</li><li>Large imported images can increase saved creation size if embedded in layer JSON.</li><li>Browser cache can occasionally keep old JS files. If changes do not appear, hard refresh the editor or restart ComfyUI.</li></ul><hr /><h2 id="troubleshooting">Troubleshooting</h2><h3 id="the-editor-does-not-update-after-replacing-files">The editor does not update after replacing files</h3>Restart ComfyUI and reopen the editor. If needed, clear the browser cache or force refresh.<h3 id="my-custom-fx-does-not-appear">My custom FX does not appear</h3>Check that the file is inside:<pre><code>TextMakerPro/web/fx/
</code></pre>Then click Refresh FX folder in the FX panel.<h3 id="my-custom-fx-crashes">My custom FX crashes</h3>Open the browser DevTools console and check the error message. Most issues are caused by:<ul><li>syntax errors;</li><li>missing <code>export</code> statements;</li><li>duplicate FX <code>id</code> values;</li><li>invalid <code>configSchema</code> entries.</li></ul><h3 id="my-workflow-became-too-heavy">My workflow became too heavy</h3>Use the latest version. Rendered PNG output is now stored as a file path instead of Base64 in the workflow.<hr /><h2 id="development-notes">Development notes</h2>The architecture is split into three main parts:<ul><li><code>textmakerpro.py</code> — ComfyUI node and backend routes;</li><li><code>web/textmakerpro.js</code> — ComfyUI frontend integration;</li><li><code>web/app-editor.js</code> — browser editor logic;</li><li><code>web/fx-registry.js</code> — FX discovery and dynamic imports;</li><li><code>web/fx/</code> — user and built-in FX modules.</li></ul>The node is intentionally minimal. Most UI and creative logic lives in the HTML/JavaScript editor.<hr /><h3 id="show-your-support">🌟 Show Your Support</h3>If this project helped you, please consider giving it a ⭐ on GitHub!Made with ❤️ for the ComfyUI communityby Orion4D<a target="_blank" rel="ugc" href="https://ko-fi.com/orion4d"><img src="https://camo.githubusercontent.com/201ef269611db7eb6b5d08e9f756ab8980df3014b64492770bdf13a6ed924641/68747470733a2f2f6b6f2d66692e636f6d2f696d672f676974687562627574746f6e5f736d2e737667" alt="Buy Me A Coffee" width="174" height="41" /></a>

Files with SHA256: 46b76b91b614503d293405c2aabfaa07d3acc5e62943005de2ff821693c06c00