Overview

n8n's built-in Edit Image node has 13 actions. This node has 23 — 10 operations that don't exist in the built-in node at all (Flip, Flop, Apply Gamma, Convert to Grayscale, Normalize, Apply Sepia Tone, Sharpen, Create from Template, Tint, Add Watermark), plus the original 13, of which Text, Composite, and Multi Step are substantially deeper here.

Features

| Operation | Summary | |---|---| | Text | Styled text rendered through real SVG — font weight/style, dynamic font selection, line wrapping, decoration with shadow, text shadow, and a solid-or-frosted-glass background | | Template | Generates a complete social-graphic (Instagram, YouTube, LinkedIn, and 11 more presets) from scratch, no source image needed | | Composite | Overlays a second image using any of 24 blend modes (Multiply, Screen, Overlay, Difference, Exclusion, and more) | | Multi Step | Chains any combination of operations in a single node run, including the operations below that don't exist in the built-in node | | Flip | Mirrors the image vertically | | Flop | Mirrors the image horizontally | | Apply Gamma | Gamma-corrects the image's brightness curve (1.0–3.0) | | Convert to Grayscale | Converts the image to black and white | | Normalize | Stretches contrast to the full available dynamic range | | Apply Sepia Tone | Applies a warm, vintage sepia tone | | Sharpen | Unsharp mask with sigma / flat / jagged controls | | Tint | Applies a colour hue overlay | | Add Watermark | Overlays a logo/image with opacity control and 9-point gravity positioning |

Table of Contents

1. Installation
2. Requirements
3. Operations at a Glance
4. Text Operation
   • 4.1 Content and Font
   • 4.2 Positioning
   • 4.3 Sizing
   • 4.4 Line Wrapping and Overflow
   • 4.5 Text Styling
   • 4.6 Text Decoration
   • 4.7 Text Background
   • 4.8 Case-Insensitivity and Expressions
5. Template Operation
   • 5.1 Layout Modes
   • 5.2 Template Presets
   • 5.3 Color Controls
   • 5.4 Font Controls
   • 5.5 Text Effects
   • 5.6 Quote Watermark
6. Image Editing Operations
   • 6.1 Blur
   • 6.2 Border
   • 6.3 Composite
   • 6.4 Create
   • 6.5 Crop
   • 6.6 Draw
   • 6.7 Flip
   • 6.8 Flop
   • 6.9 Apply Gamma
   • 6.10 Convert to Grayscale
   • 6.11 Normalize
   • 6.12 Resize
   • 6.13 Rotate
   • 6.14 Apply Sepia Tone
   • 6.15 Sharpen
   • 6.16 Shear
   • 6.17 Tint
   • 6.18 Transparent
   • 6.19 Add Watermark
   • 6.20 Get Information
7. Multi-Step Mode
8. Output Options
9. Quick Start Examples
10. Known Limitations
11. Changelog
12. Contributing
13. License

1. Installation

Via n8n Community Nodes (recommended)

1. Open your n8n instance
2. Go to Settings → Community Nodes
3. Click Install
4. Enter n8n-nodes-edit-image-ultimate
5. Click Install

Via npm (self-hosted / Docker)

npm install n8n-nodes-edit-image-ultimate

Point the N8N_CUSTOM_EXTENSIONS environment variable at the package, or place it under your n8n user data directory's custom/ folder.

Docker + custom fonts: if you want fonts like Playfair Display or Cormorant Garamond to render (rather than falling back to a default), mount the font files into the container. Sharp renders SVG text using whatever fonts are installed on the host OS — the Font Family dropdown only lists what it can actually find there.

2. Requirements

| Requirement | Version | |---|---| | n8n | v2.30.0 or later | | Node.js | v18 or later | | System dependencies | None — Sharp ships pre-built native binaries for Windows, Linux, and macOS |

3. Operations at a Glance

| Operation | What it does | |---|---| | Text | Styled text with wrapping, decoration, shadow, background, and precise positioning | | Template | Generates a complete social-media graphic from a preset — no source image needed | | Blur | Gaussian blur, configurable sigma | | Border | Solid-colour padding/border | | Composite | Overlay an image with 24 blend modes | | Create | Blank canvas in a solid colour | | Crop | Extract a region by position and size | | Draw | Rectangle, circle, or line, with fill and stroke | | Flip | Vertical mirror (top ↔ bottom) | | Flop | Horizontal mirror (left ↔ right) | | Gamma | Gamma correction (1.0–3.0) | | Grayscale | Convert to black and white | | Normalize | Stretch contrast to the full dynamic range | | Resize | Five fit modes: cover, contain, fill, inside, outside | | Rotate | Rotate by any angle, with background fill for non-90° angles | | Sepia | Warm vintage tone | | Sharpen | Unsharp mask with sigma / flat / jagged controls | | Shear | Shear along X/Y via affine transform | | Tint | Colour hue overlay | | Transparent | Replace a colour with alpha transparency | | Watermark | Opacity-controlled image overlay with gravity positioning | | Get Information | Return image metadata (size, format, DPI, channels) | | Multi Step | Chain any combination of the above in one node run |

Full field-by-field reference for every operation other than Text and Template is in §6.

4. Text Operation

Set Operation to Text to reveal all of the fields below. This is the deepest feature set in the node, so it's organised into the same logical groups you'll see in the n8n UI.

4.1 Content and Font

| Field | Details | |---|---| | Text | The text content to render. Supports multi-line input and expressions. | | Font Size | Font size in pixels. | | Font Family | A dropdown populated with fonts actually installed on the machine running n8n/Sharp (via get-system-fonts). To use a font that isn't listed — a family name, a comma-separated CSS-style fallback list, or a file path — click the fx expression icon next to the field and type it directly instead of picking from the dropdown. | | Font Color | Text colour. | | Font Weight | Full CSS 100–900 range (Thin through Black) via a dropdown. Click fx to pass a custom numeric value instead. | | Font Style | Normal / Italic / Oblique. |

Font availability: weight and style variants only render if that specific font file is actually installed on the server — Sharp can't synthesise a bold or italic that doesn't exist. The Font Family dropdown derives names from font filenames, cleaned up; this matches standard system fonts well but may be approximate for unusual ones.

4.2 Positioning

Positioning is split into four independent controls, matching how design tools like Figma or Photoshop handle a reference point:

| Field | Details | |---|---| | Gravity | A fixed anchor point on the full image — North West, North, North East, West, Center, East, South West, South, South East. Center is always the exact middle of the image, regardless of text content. | | Position X / Position Y | Pixel offsets from the Gravity point. Positive X moves right, positive Y moves down — always, regardless of which Gravity is selected. | | Box Anchor | Which point of the text box itself lands on the final Gravity + Position point (same 9-point options). For example, Box Anchor = North means the box's top edge sits at that point and the box extends downward from it — this is what lets you pin text flush to an edge without the top being cut off. | | Text Align | Left / Center / Right / Justify — controls how each line sits within the box, independent of Box Anchor. Only visually matters for multi-line text where lines differ in length. |

Worked example: Gravity = North, Position Y = 0, Box Anchor = North → the box's top edge sits exactly at the image's top edge and extends fully downward — nothing is cut off. If Box Anchor were Center instead, the box's center would land on that same point, pushing half the box above the visible canvas.

Justify is implemented via genuine per-word pixel positioning — each word gets an explicit X coordinate, with gap widths calculated so the line spans the full box width — rather than SVG's textLength/lengthAdjust attribute, which isn't reliably supported across SVG renderers (including the one Sharp uses). This guarantees consistent, visible justification.

• The last line of every paragraph stays at its natural width by default. Stretching a short final line produces large, ugly gaps — no real justify implementation (CSS, Word, InDesign) does it either.
• Stretch Last Line (shown when Text Align = Justify) forces every line, including short trailing ones, to stretch to full width — a deliberate poster/graphic-design look rather than standard typography.
• Single-word lines are never stretched, since there's nothing to distribute gaps between.

4.3 Sizing

Box Width Mode and Box Height Mode are fully independent — mix and match, e.g. Width = Custom (60%) with Height = Auto.

| Mode | Behaviour | |---|---| | Auto | Estimated from the actual text content and font size. | | Custom | Reveals a Unit selector (Pixels / Percent of Image Width or Height) plus a size field. |

4.4 Line Wrapping and Overflow

Max Line Length Mode and Min Line Length Mode each support Characters / Percent of Image Width / Pixels (Min also has Auto, which disables the minimum entirely).

| Field | Details | |---|---| | Max Line Length (%/px/chars) | An absolute hard ceiling. In Percent/Pixels mode, width is measured character-by-character against a real width-ratio table (narrow letters like i/l/t/j count less than wide letters like m/w/M/W), scaled up for bolder font weights and italic style — meaningfully more accurate than a flat "average character width," which mis-measures text depending on which specific letters it contains. Characters mode is a literal character count instead. | | Min Line Length (%/px/chars) | Avoids short "orphan" trailing lines (e.g. a lone word like "zeta" wrapping onto its own line) by merging short lines into the one before them — but only if the merge doesn't exceed Max. If satisfying Min would require exceeding Max, the line is simply left shorter than the minimum; overflowing the canvas is treated as worse than one uneven line. | | Text Overflow | Handles the separate case of a single unbreakable word with no spaces, which word-wrap alone can never break. Visible (default) lets long unbroken words spill past the wrap width. Wrap force-breaks only genuinely unbreakable single-word lines into hard character chunks — legitimate multi-word lines are never shattered mid-word. Clip hides anything extending past the box's bounds entirely. |

4.5 Text Styling

| Field | Details | |---|---| | Text Opacity | 0–100, maps to SVG fill-opacity. | | Enable Text Stroke | → Stroke Color, Stroke Width — a real vector outline via SVG stroke, rendered behind the fill. | | Enable Text Shadow | → Shadow Color, Shadow Opacity, Shadow Blur, Shadow Offset X/Y — a genuine Gaussian-blurred feDropShadow, not a flat offset copy. |

4.6 Text Decoration

| Field | Details | |---|---| | Text Decoration | None / Underline / Overline / Line Through. Drawn as real SVG <line> elements rather than the SVG text-decoration attribute, which isn't reliably honored by the renderer Sharp uses. The line's span is measured from the actual rendered text, so it tracks the text width even across bold/italic weights and multi-line wrapped text. | | Decoration Style | Plain — a simple solid line in the font colour, no extra effects. Match Text — the decoration line automatically inherits the same stroke and shadow you've enabled on the text itself, so it blends in instead of looking disconnected. Custom — set the decoration's colour, thickness, stroke, and shadow independently from the text. | | Decoration Color / Thickness | (Custom only) Colour and pixel thickness of the line. | | Enable Decoration Stroke | (Custom only) → Decoration Stroke Color, Decoration Stroke Width — an outline drawn around the decoration line itself, like a thin outlined bar. | | Enable Decoration Shadow | (Custom only) → Decoration Shadow Color, Decoration Shadow Opacity, Decoration Shadow Offset X/Y, and Decoration Shadow Blur — an offset shadow line behind the decoration, with an optional genuine Gaussian blur. |

Why Decoration Shadow Blur exists as its own field: a plain horizontal <line> has a zero-height bounding box, so a naive percentage-based blur filter region collapses to zero regardless of the blur value — the blur ends up silently clipped away. This node gives each decoration shadow its own explicit pixel-space filter region sized around that specific line, so the blur actually renders instead of disappearing.

4.7 Text Background

| Field | Details | |---|---| | Enable Text Background | → Background Style: Solid (flat fill colour) or Glass (Frosted). | | Glass (Frosted) | The image region behind the box is genuinely cropped, blurred, and composited back in — clipped to the box's rounded shape — with a tinted overlay on top. A real translucent glass-card effect, not a fake semi-transparent colour. | | Frost | 0–100, shown when Background Style = Glass. 0 = fully invisible (no blur, no tint); 100 = heaviest blur with a fully opaque tint. Controls both tint opacity and backdrop blur intensity together. | | Background Padding | CSS-style shorthand: "12" (all sides), "10 20" (top/bottom, then left/right — real CSS order, not x/y), "10 20 30", or "10 20 30 40" (top, right, bottom, left). | | Enable Background Border | → Border Color, Border Width. | | Border Radius Unit | Pixels, or Percent relative to the box's own size (0% = sharp corners, 100% = fully pill-shaped) → Border Radius. |

4.8 Case-Insensitivity and Expressions

Every dropdown/options field on this node is case-insensitive when set via expression — "Center", "CENTER", and "center" all behave identically (Gravity, Box Anchor, Font Style, Text Decoration, Background Style, and every other options field), with whitespace trimmed automatically too.

5. Template Operation

The Template operation generates a fully composed image graphic from scratch — no source image required. Set Operation to Template to use it.

5.1 Layout Modes

| Layout | Description | |---|---| | Standard | Title and Subtitle text — blog graphics, social posts, announcements. | | Quote | Large centered italic quote text with an author attribution at the bottom. | | Meme | Bold Impact-style text at the top and/or bottom of the image. |

5.2 Template Presets

| Preset | Dimensions | |---|---| | Instagram Post | 1080 × 1080 | | Instagram Story | 1080 × 1920 | | Instagram Portrait | 1080 × 1350 | | Twitter / X Post | 1200 × 675 | | YouTube Thumbnail | 1280 × 720 | | Facebook Post | 1200 × 630 | | LinkedIn Banner | 1584 × 396 | | LinkedIn Post | 1200 × 627 | | Pinterest Pin | 1000 × 1500 | | Open Graph | 1200 × 630 | | Email Header | 600 × 200 | | Presentation Slide | 1920 × 1080 | | Business Card | 1050 × 600 | | A4 Document | 2480 × 3508 | | Custom | Any size you specify |

5.3 Color Controls

| Control | Description | |---|---| | Background Color | Solid fill behind everything. | | Gradient Overlay Color | Subtle gradient tint on top of the background, independent from Accent. | | Accent Color | Colour of the accent bar and corner decorations. | | Title Color | Colour of the title or quote text. | | Subtitle Color | Colour of the subtitle or author text. |

5.4 Font Controls

Every text field has its own Font dropdown so you can mix and match typography per element: Title Font, Subtitle Font, Quote Font, Quote Author Font, Meme Top Font, Meme Bottom Font, Watermark Font.

Available fonts include Arial, Times New Roman, Georgia, Courier New, Verdana, Trebuchet MS, Impact, Playfair Display, Cormorant Garamond, Lora, Montserrat, Lato, Courier Prime, and more. Type any font name installed on your server directly via expression mode if it's not in the list.

Web fonts such as Playfair Display must be installed on the OS running your n8n server to render. System fonts like Arial and Georgia will always work.

5.5 Text Effects

One effect applies globally to all text on the canvas:

| Effect | Controls | |---|---| | Default | Subtle drop shadow for Standard/Quote; outline stroke for Meme. | | None | Flat text, no effects. | | Drop Shadow | Color, Blur Size, Offset X/Y, Opacity. | | Glow | Color, Blur Size, Opacity. | | Outline | Color, Outline Width. |

5.6 Quote Watermark

When Layout Type = Quote, a subtle text watermark (e.g. @yourbrand) is available: Watermark Text, Font, Color, Opacity (%), plus X Position (%) and Y Position (%) for precise placement anywhere on the canvas.

6. Image Editing Operations

Field-by-field reference for every operation besides Text and Template. Every operation also requires a Property Name — the binary property on the input item that holds the image data.

6.1 Blur

Applies a Gaussian blur.

| Field | Details | |---|---| | Sigma | 0.3–1000, default 3. Blur radius — higher values blur more. |

6.2 Border

Adds a solid-colour border/padding around the image.

| Field | Details | |---|---| | Border Width | Pixels, default 20. Left and right border width. | | Border Height | Pixels, default 20. Top and bottom border height. | | Border Color | Default #000000. |

6.3 Composite

Overlays a second image on top of the source image using any of 24 blend modes.

| Field | Details | |---|---| | Composite Image Property | Binary property name of the overlay image, default data2. | | Blend Mode | 24 options: Clear, Source, Over (Normal), In, Out, Atop, Destination Over/In/Out/Atop, Xor, Add, Saturate, Multiply, Screen, Overlay, Darken, Lighten, Colour Dodge, Colour Burn, Hard Light, Soft Light, Difference, Exclusion — matching standard compositing operators used in design tools like Photoshop. Default Over (Normal). | | Position X / Position Y | Pixel offset of the overlay from the top-left, default 0, 0. |

6.4 Create

Generates a blank canvas in a solid colour — useful as a starting point before adding Text or other operations.

| Field | Details | |---|---| | Background Color | Default #ffffff, supports alpha. | | Image Width / Image Height | Pixels, default 1080 × 1080. |

6.5 Crop

Extracts a rectangular region from the image.

| Field | Details | |---|---| | Width / Height | Pixels, default 500 × 500. Size of the crop region. | | Position X / Position Y | Pixels, default 0, 0. Top-left corner of the crop region. |

6.6 Draw

Draws a rectangle, circle, or line directly onto the image, with independent fill and stroke.

| Field | Details | |---|---| | Primitive | Rectangle / Circle / Line. Default Rectangle. | | Color | Fill colour, default #ff0000, supports alpha. | | Stroke Color | Default #000000, supports alpha. | | Stroke Width | Pixels, default 0 (no stroke). | | Start Position X/Y, End Position X/Y | Pixel coordinates defining the shape's bounds. |

6.7 Flip

Mirrors the image vertically — top becomes bottom. No additional fields.

6.8 Flop

Mirrors the image horizontally — left becomes right. No additional fields.

6.9 Apply Gamma

Gamma-corrects the image's brightness curve.

| Field | Details | |---|---| | Gamma Value | 1.0 to 3.0, default 2.2. Lower values darken the image, higher values brighten it — this adjusts the tonal curve rather than a flat brightness shift, so midtones are affected more than the extremes. |

6.10 Convert to Grayscale

Converts the image to black and white. No additional fields.

6.11 Normalize

Stretches contrast to use the full available dynamic range — a flat, low-contrast image gets its darkest pixel pushed toward black and its brightest pixel pushed toward white, with everything else scaled proportionally in between. No additional fields.

6.12 Resize

Resizes the image using one of five fit strategies.

| Field | Details | |---|---| | Width / Height | Pixels, default 1080 × 1080. Target dimensions. | | Fit | Cover (scales to fill, crops excess) / Contain (scales to fit, adds padding) / Fill (stretches, ignores aspect ratio) / Inside (scales down only if larger) / Outside (scales up only if smaller). Default Cover. | | Background Color (for Contain) | Default #000000, supports alpha. Fill colour for the padding added by Contain. |

6.13 Rotate

Rotates the image by any angle.

| Field | Details | |---|---| | Degrees | -360 to 360, default 90. Positive rotates clockwise. | | Background Color | Default transparent. Fill for the area revealed when rotating by anything other than a multiple of 90°. |

6.14 Apply Sepia Tone

Applies a warm, vintage sepia tone across the image. No additional fields.

6.15 Sharpen

Applies an unsharp mask — the standard sharpening technique used by most image editors.

| Field | Details | |---|---| | Sharpen Sigma | 0.5–5, default 1. The radius of the sharpening effect — higher values sharpen a wider band around each edge. | | Sharpen Flat | 0–10000, default 1. Threshold for "flat" (low-detail) areas — lower values cause more of the image to be sharpened, including subtle textures. | | Sharpen Jagged | 0–10000, default 2. Threshold for "jagged" (high-detail) edges — higher values sharpen strong edges more aggressively. |

6.16 Shear

Shears the image along the X and/or Y axis via an affine transform.

| Field | Details | |---|---| | Shear X (degrees) | Default 0. Horizontal shear angle. | | Shear Y (degrees) | Default 10. Vertical shear angle. |

6.17 Tint

Applies a colour hue overlay across the image.

| Field | Details | |---|---| | Tint Color | Default #ff6b35. The colour used to tint the image — this shifts the image's hue toward the chosen colour rather than simply overlaying it at reduced opacity. |

6.18 Transparent

Replaces a specific colour with alpha transparency (PNG output).

| Field | Details | |---|---| | Background Color to Remove | Default #ffffff. The colour to replace with transparency. | | Tolerance | 0–255, default 30. How close a pixel's colour needs to be to the target colour to be made transparent. |

6.19 Add Watermark

Overlays a second image (e.g. a logo) onto the source image, with opacity and positioning control.

| Field | Details | |---|---| | Watermark Image Property | Binary property name containing the watermark image, default watermark. | | Gravity (Position) | 9-point placement: Center, Top Left/Center/Right, Middle Left/Right, Bottom Left/Center/Right. Default Bottom Right. | | Opacity (%) | 0 (invisible) to 100 (fully opaque), default 50. | | Max Size (% of Canvas) | 1–100, default 20. The watermark is scaled so its longest side is this percentage of the canvas — keeps a logo proportionally sized regardless of the source image's dimensions. |

6.20 Get Information

Returns image metadata — width, height, format, DPI, and channel count. No additional fields.

7. Multi-Step Mode

Set Operation to Multi Step to chain any combination of the operations above in a single node execution, applied in order. Add each step, choose its operation, and configure that operation's own fields inline — useful for common pipelines like Resize → Sharpen → Text without needing separate nodes for each stage.

8. Output Options

All operations share the following output settings:

| Option | Description | |---|---| | Format | Defaults to "Same as Input" — detects and preserves the original image's format (e.g. a JPEG stays a JPEG) instead of silently converting everything to lossless PNG, which can inflate a detailed photo 10–20× in size. Explicitly set png / jpeg / webp / avif / tiff / gif to override. | | Quality | 1–100 for jpeg / webp / avif, shown only when Format is explicitly one of those. | | PNG Compression | 0 (fastest) to 9 (smallest), relevant only when Format is explicitly png. | | Output Property Name | Save to a different binary property. | | File Name | Override the output filename. |

9. Quick Start Examples

Create a Quote Image

1. Add an Edit Image Ultimate node (no input image needed)
2. Operation → Template
3. Template → Instagram Post (1080×1080)
4. Layout Type → Quote
5. Enter Quote Text and Quote Author
6. Choose fonts and colours
7. (Optional) add a Quote Watermark with your handle

Create a YouTube Thumbnail

1. Add an Edit Image Ultimate node
2. Operation → Template
3. Template → YouTube Thumbnail (1280×720)
4. Layout Type → Standard
5. Title → My Awesome Video, Subtitle → Watch Now!
6. Pick Background, Gradient Overlay, and Accent colours

Add a Caption to a Photo (the Text operation, end to end)

1. Connect an image binary to Edit Image Ultimate
2. Operation → Text
3. Text → your caption
4. Gravity → South, Box Anchor → South, Position Y → -40 (pins the box near the bottom, 40px up from the edge)
5. Max Line Length Mode → Percent of Image Width, Max Line Length (%) → 90
6. Text Decoration → Underline, Decoration Style → Custom, enable Decoration Shadow with a small Decoration Shadow Blur for a soft-glow underline effect

Add a Watermark to an Image

1. Connect an image binary to Edit Image Ultimate
2. Operation → Watermark
3. Watermark Image Property → binary property name of your logo
4. Opacity → 40
5. Gravity → Bottom Right

Multi-Step: Resize → Sharpen → Add Text

1. Add an Edit Image Ultimate node
2. Operation → Multi Step
3. Step 1: Resize → 1080×1080, fit Cover
4. Step 2: Sharpen → sigma 1.5
5. Step 3: Text → your caption

10. Known Limitations

These are deliberate trade-offs, not bugs:

• Text-width measurement is estimated, not pixel-perfect. No real font-metrics pass is available without significant added complexity. This affects line-wrapping precision, background-box auto-sizing, and decoration-line span accuracy — all three are derived from the same estimate, so they stay internally consistent even though none is exact.
• Font Weight/Style depend on the font file actually installed on the server having that variant. Sharp/SVG can't synthesise a bold or italic that doesn't exist in the font file.
• The Font Family dropdown derives names from font filenames, cleaned up — this works well for standard system fonts but may be approximate for unusual ones.

11. Changelog

See CHANGELOG.md for the full version history.

Latest (1.1.1): New gold node icon, and a restructured README (single Table of Contents, Features overview, every operation documented individually). See [1.1.0] in the changelog for the Font Family dropdown, Decoration Style modes, Decoration Shadow Blur, and bold/italic overflow fix.

12. Contributing

Pull requests are welcome — please open an issue first to discuss what you'd like to change.

git clone <your-repository-url>
cd n8n-nodes-edit-image-ultimate
npm install --legacy-peer-deps
npm run dev   # watch mode

13. License

MIT