Dynamic Text Image Generation using External API - n8n Workflow

Markdown-formatted text.

Developers needing quick, customizable placeholder images for testing and prototyping.
Content creators looking to generate dynamic visual assets without using complex design tools.
Users learning how to leverage the powerful HTTP Request n8n node for fetching external resources.
Automation specialists seeking practical n8n templates for efficient external API integration.

This robust n8n workflow provides a seamless way to generate custom placeholder images by interfacing directly with the free DummyJSON API. It serves as an excellent example of how to leverage the HTTP Request n8n node combined with dynamic data setting using the Set n8n node.

The automation solves the common problem of needing instantly customizable placeholder content. By pre-configuring image size, background color, text, and font family within the n8n environment, this n8n workflow eliminates manual steps. This makes it a valuable asset among available n8n templates for anyone involved in development or rapid content deployment, showcasing the power and flexibility of n8n integration.

Markdown-formatted text.

This simple yet effective n8n workflow operates in three primary stages:

1. Initiation: The process begins with the “When clicking ‘Test workflow’” n8n trigger. This is designed for manual testing, allowing you to quickly verify the output and configuration without requiring a scheduled run.


2. Configuration Setup: The “Set Image Properties” n8n node initializes all critical parameters required by the external API. Variables such as size (600x400), backgroundColor (cc22e3), textColor (ffffff), the display text ("Generated!"), fontSize, and fontFamily are established as JSON data to be passed to the next step. This crucial n8n node standardizes the input.


3. API Execution: The “Fetch Image from API” n8n node (an HTTP Request n8n node) executes the core function. It constructs the API URL dynamically using expressions that reference the parameters set in the previous step. It sends a GET request to the DummyJSON endpoint. Key configuration settings (like text content and font) are passed securely as query parameters, ensuring the requested image is generated correctly and the image data is returned by the n8n workflow.

Markdown-formatted text.

1. Import the n8n workflow: Copy the provided JSON code and paste it directly into your n8n instance via the 'New' menu > 'Import from JSON'.


2. Activate the workflow: Ensure the n8n workflow is activated by toggling the switch in the top right corner.


3. No Credentials Needed: Since this n8n workflow uses the publicly available DummyJSON API, no external credentials or API keys are required for the HTTP Request n8n node.


4. Customization: Navigate to the “Set Image Properties” n8n node to change the dimensions, colors, or text content to fit your specific requirements. The values set here determine the final output of the n8n workflow.

Markdown-formatted text.

When clicking ‘Test workflow’ (Manual Trigger n8n trigger)
Function: Starts the n8n workflow execution manually, primarily for development and testing purposes.
Key Configuration: None. It serves as the immediate entry point for the n8n workflow.

Set Image Properties (Set n8n node)
Function: Defines the payload variables that specify the desired characteristics of the image (size, colors, text, fonts).
Key Configuration: Explicitly defines multiple string assignments, including size (600x400), backgroundColor (cc22e3), textColor (ffffff), and the overlay text ("Generated!"). These variables ensure the subsequent HTTP Request n8n node is properly parameterized.

Fetch Image from API (HTTP Request n8n node)
Function: Makes the external call to the DummyJSON API to generate and retrieve the image resource.
Key Configuration:
URL: Uses expressions like ={{ $json.size }} to dynamically build the request path based on the variables set upstream.
* Query Parameters: Passes variables like text, fontSize, and fontFamily to the API to control the text rendering. This integration is crucial to the success of the n8n workflow.