
AI image generators like Midjourney, DALL·E, and Stable Diffusion have changed the way we create visuals. Type a prompt, get a stunning image in seconds. But anyone who has tried to include **text in an AI-generated image** knows the pain, misspelled words, broken letters, weird fonts, and layouts that make no sense.

This is the single biggest limitation of AI image generation today. And until now, working around it required stitching together multiple tools, services, and automations.

**Not anymore.** RenderForm now supports AI image generation natively, you can generate an AI image and overlay perfectly rendered text in a single API request.

## The text problem with AI images

Let's be honest: AI models are terrible at rendering text inside images. Ask DALL·E to write "Happy Birthday, Sarah!" on a cake and you might get "Hpapy Brithday Sarha" or something even worse.

This happens because AI image models don't "understand" text the way we do. They treat letters as visual patterns, not as language. The result? Text that looks close but is almost never correct.

For creative, artistic images this might be acceptable. But for **business use cases** - marketing banners, social media posts, personalized cards, product images, ads - incorrect text is simply not an option.

## The old workaround: multistep workflows

Until now, if you wanted AI-generated visuals with correct text, you had to:

1. Generate an AI image using an external tool (Midjourney, DALL·E, etc.)
2. Upload or host the image somewhere
3. Use a tool like **Make.com** or **Zapier** to pass the image URL into RenderForm
4. Render the final image with text overlays in RenderForm

That's 3–4 steps, multiple services, API keys everywhere, and a workflow that's fragile and hard to debug. It works, but it's far from ideal.

## The new way: one API call, done

With RenderForm's new **AI Images** feature, you can skip all of that. Just use the `ai:` prefix in any image component's `src` property, and RenderForm will generate the AI image for you - right inside your template.

```json
{
  "template": "<TEMPLATE_ID>",
  "data": {
    "title.text": "Spring Collection 2026",
    "subtitle.text": "Fresh styles, vibrant colors",
    "background.src": "ai:a bright fashion photography studio with pastel spring colors and soft natural lighting"
  }
}
```

That's it. One API call. RenderForm will:

1. Detect the `ai:` prefix
2. Generate the image using OpenAI's model
3. Place the generated image in your template
4. Render all text components with **pixel-perfect accuracy**
5. Return the final image, ready to use

No Zapier scenario. No Make.com module chain. No external image hosting. Just one request and a finished image.

## Why RenderForm text is always correct

RenderForm doesn't "draw" text the way AI models do. Instead, it **renders text as an actual text layer** on top of your template. This means:

- **Every letter is correct** - no misspellings, no broken characters
- **Custom fonts** - use your own brand fonts (TTF, OTF, WOFF2)
- **Full layout control** - position, size, color, alignment, line spacing
- **Dynamic content** - swap text via API for each render
- **Multi-language support** - Unicode, emojis, RTL languages - all work perfectly

You get the creative power of AI for the visual background, and the reliability of a proper rendering engine for everything else.

## Real-world use cases

### Marketing banners with AI backgrounds
Generate unique, on-brand backgrounds for each campaign while keeping your headlines, CTAs, and logos perfectly placed.

### Personalized cards and invitations
Use AI to create beautiful, unique artwork for each card while ensuring names, dates, and messages are always spelled correctly.

### Social media posts at scale
Combine AI-generated visuals with dynamic text overlays to produce hundreds of unique social media posts - all from a spreadsheet or API.

### E-commerce product images
Generate lifestyle backgrounds with AI and overlay product names, prices, and descriptions with guaranteed accuracy.

## Mix AI and regular images

You're not limited to using AI images everywhere. In a single template, you can freely combine:

- AI-generated images (`ai:your prompt here`)
- Regular image URLs (`https://example.com/photo.jpg`)
- Dynamic text components
- Static design elements

This gives you full flexibility to use AI where it adds value and regular assets where you need consistency.

## Pricing and details

Each AI-generated image adds **20 credits** to the render cost. If your template has two AI images, that's 40 extra credits on top of the base render cost. AI image generation typically adds 5–15 seconds of processing time per image.

The feature is available for **RenderForm Pro** users.

For full technical details, prompt writing tips, and API examples, check out the [AI Images documentation](/docs/general/ai-images/).

## Getting started

1. **Create a template** in the RenderForm editor with image and text components
2. **Use the `ai:` prefix** in the image `src` property when making an API call
3. **Add your text data** as usual - it will render perfectly every time
4. **Get the final image** - AI visual + correct text, in one response

No extra tools. No complex workflows. Just great images with perfect text.

<a href="https://app.renderform.io/register" className="btn btn-primary btn-lg">Try AI Images for free →</a>

## Further reading

- [AI Images documentation](/docs/general/ai-images/) - full API reference, prompt tips, and examples
- [RenderForm vs. AI-generated images](/blog/posts/ai-generated-images-vs-image-automation) - a detailed comparison
- [Image generation with Make.com](/blog/posts/image-generation-with-make) - for complex multi-step workflows
- [Image generation with Zapier](/blog/posts/image-generation-with-zapier) - Zapier integration guide


AI-generated images with perfect texts


Autogenerating images with ratings is a great way to add a fun and engaging element to your forms. As an addition to the existing star rating options, we are excited to introduce a new feature that allows you to use emojis as ratings in your forms.

## Rating with emojis

Emoji rating are a fun way to present a rating system in your forms. Instead of using traditional star ratings, you can now use emojis to represent different levels of satisfaction.

To use emoji ratings in your templates, choose **Rating** component option and then change the rating element from customizable star to emoji.

![Emoji rating component](/blog/emoji-rating-component.jpeg)

You can choose from a variety of emojis to represent different levels of satisfaction, such as happy faces, sad faces, or any other emoji that fits your brand or theme.

> You can also customize the emoji max rating by setting up the number of emojis you want to use and also adjust the size and style of the emojis to fit your design.

## Set rating during image generation

When you use the emoji rating component, you can set the rating during image generation. This means that you can automatically generate images with the selected emoji rating, making it easy to create visually appealing content for your forms.

For example, when we want to generate multiple food images with different with different spice levels, we can set the rating to 1-3 and use the chili emoji to represent the spice level. 

For that, I will use **Spreadsheet** plugin to generate a list of images based on my food card template. Here is how the data looks like:

![Spreadsheet data](/blog/emoji-rating-spreadsheet.jpeg)

> I set rating value for each food item (from 1 to 3) in the `rating.value` column.

Then, I go to **Plugins** and select **Spreadsheet**. I choose the **Food Card** template, upload the spreadsheet, and start image generation.

![Spreadsheet plugin ](/blog/emoji-rating-spreadsheet-plugin.mp4)

As you can see, the generated images now include the emoji rating based on the values set in the spreadsheet. This allows you to create a consistent and visually appealing representation of food items with their corresponding spice levels.

## Use cases

Emoji ratings can be used in various scenarios, such as:
- **Product reviews**: ⭐⭐⭐ Use emoji ratings to show customer satisfaction with your products
- **Movie ratings**: 🎬🎬🎬 Use emoji ratings to represent how much people enjoyed a movie
- **Food ratings**: 🌶️🌶️🌶️ Use emoji ratings to show how spicy or delicious a dish is
- **Service quality highlights**:  👍👍👍 Display how customers rate your service with visual emoji scores
- **Workout intensity**: 💪💪💪 Use emoji ratings to show how intense a workout is 
- **Fashion ratings**: 🔥🔥🔥 Use emoji ratings to show how stylish an outfit is
- **Game ratings**: 🎮🎮🎮 Use emoji ratings to show how much people enjoyed a game
- **Travel experience**: ✈️✈️✈️ Use emoji ratings to show how much people enjoyed their travel experience

## Conclusion

Emoji ratings are a fun and engaging way to present ratings in your forms. With the new feature in RenderForm, you can easily add emoji ratings to your templates and set the rating during image generation. This allows you to create visually appealing content that resonates with your audience.

Introducing: Emoji Rating


We are excited to announce a new update to RenderForm that will make it easier to manage your templates.
In this blog post, we will introduce you to the new template tags feature and show you how to use it to streamline your workflow.

## How to use tags

Tags are a powerful way to organize your templates and make them easier to find. You can use tags to categorize your templates by type, purpose, or any other criteria that makes sense for your workflow. For example, you could use tags like "onboarding," "feedback," or "marketing" to group your templates.

You can also use tags to filter your templates in the template library. This makes it easy to find the templates you need without having to scroll through a long list of options.

## Assigning tags to templates

To add tags to your templates, simply go to the template editor and click on the **Tags** field in the right sidebar. Click on the field and start typing to add a new tag or choose from existing tags.
Save your changes, and the tags will be applied to your template.

![Adding tags to a template](/blog/adding-tags-to-template.jpeg)

> You can add multiple tags to a single template for better organization, and remove them by clicking on the **X** next to the tag name.

## Filtering templates by tags

In **My templates**, you can filter your templates by tags. To do this, click on the **Filter by tags** option in the top right corner of the template library and select the tags you want to filter by. This will show you only the templates that match your selected tags.

![Filtering templates by tags](/blog/filtering-templates-by-tags.jpeg)

## Conclusion

We hope you find the new template tags feature helpful in organizing your templates and streamlining your workflow. If you have any questions or feedback, please don't hesitate to reach out to us. We are always looking for ways to improve RenderForm and make it easier for you to create beautiful and efficient template forms.

Stay tuned for more updates and features coming soon!

Introducing: Template Tags


## Introduction
Without any doubt images are a crucial part of any visual content and template that can be created in RenderForm.
They can be used to enhance the visual appeal of the content, provide context, and make the content more engaging. However, there are some common issues that can arise when working with image automation and rendering.
In this article, we will discuss some of the most common issues with rendering images in RenderForm and how to solve them.

## Image tester tool

Before we start discussing the common issues with rendering images in RenderForm, we would like to introduce you to the [**Image tester tool**](/tools/image-cors-tester-tool/) that can help you to test the image URL before using it in the template.

![Image tester tool](/blog/image-cors-tester-image.jpg)

Put the image URL in the input field and click on the **"Test Image"** button to see if the image is publicly accessible and can be displayed in RenderForm.

## Image not showing up

One of the most common issues with rendering your templates in RenderForm is that the image does not show up at all.
This can happen for a variety of reasons, the most obvious being that the image URL is incorrect. The easiest solution is to open the image that has been sent to the RenderForm,
to see if the image is displayed correctly. You can review the image URL on "**[My Render Results](/console/my-requests/)**" page and click on "**Details**" to see
what image URL was used during the rendering process.

![Review the image URL](/blog/rendering-images/review-render-result-details.jpeg)

If the image URL is correct, there may be other reasons why the image is not showing up. Below are some common issues that can cause the image to not show up in RenderForm and how to solve them.

### Incorrect image format

**Canvas Editor**: RenderForm supports two of the most common image formats such as JPEG, PNG, and PNG with transparency. If the image is in a different format, display the image in the output content is not guaranteed.

**HTML Editor and Canvas AI (beta)**: In those editors, you can use any image format that is supported by the browser, such as JPEG, PNG, GIF, SVG, or WebP. However, the image format may not be supported by the browser or the image hosting provider, which can cause the image to not show up in the content.

### Image is not publicly accessible

RenderForm requires that the image is publicly accessible to display it, that means that the image must be hosted on a server that allows public access to the image **without any authentication or having to log in**.
For example if you are trying to render an image from a private Google Drive folder, it will not be displayed in RenderForm.

To check if the image is publicly accessible, try to open the image in a private tab in your browser, if the image opens in a new tab, and you can see it, then the image is publicly accessible.

### Image is not allowed to be hot-linked

Some image hosting providers may allow public access to the images, but they may not allow hot-linking, which means that the image cannot be displayed on a different website than the one it is hosted on.
For example, you cannot use images uploaded to Airtable and display them on your website as they do not allow hot-linking and the images won't show up **even if they are publicly accessible**.

Unfortunately, there is no easy way to check if the image is allowed to be hot-linked, the best way is to check the image hosting provider's terms of service or contact the provider to ask if hot-linking is allowed.

### Access to the image is blocked or expired

Some image hosting providers may permanently or temporarily block access to the images after some time or require authentication to access the image, which can cause the image to not show up in RenderForm.
Even if the image is publicly accessible at time of checking it, the provider may block access to the image after some time or require authentication to access the image to prevent leaking public data.
Sometimes provider may block access due to high traffic, detected automated activity (RenderForm is an automated activity), restrict access to the image for specific clients (for RenderForm but not for you) or other reasons.

Unfortunately, there is no easy way to check if the image access is blocked or expired as different providers have different policies and ways of handling this.
The best way is to check the image hosting provider's terms of service or contact the provider to ask if they block access for automated activities or after some time.

### Image hosting issue

Sometimes the image may not show up due to an issue with the image hosting provider, such as the server being down, the image being deleted, or the image being moved to a different location.
RenderForm does not re-try to fetch the image if it fails to load, so if the image is not available at the time of rendering, it will not be displayed in the content, and it will
require re-rendering the content to try to fetch the image again.

### Image took too long to load

If the image took too long to load, it may be due to the image being too large or the image hosting provider being slow to serve the image.
RenderForm wait for a few seconds for the image to load, if the image is not loaded in time, it will not be displayed in the content.

Make sure that the image is not too large and that the image hosting provider is fast enough to load the image in a reasonable amount of time. If the image is too large, try to resize the image or compress it to reduce the file size.

### Image weight is too big

Another common issue with rendering images in RenderForm is that the image is too big, which can cause the image to not show up or take a long time to download and fail to load eventually.
Large images can slow down the loading time or exceed the maximum total size allowed for the template in RenderForm that is set due to security and performance reasons.

There is no strict limit on the image weight, but it is **recommended to keep the image weight below 1MB** to ensure that the image loads quickly and does not slow down the loading time of the content.

### Image dimensions are too large

However, the image weight is not the only factor that affects the loading time, the image dimensions also play an important role. **Too large images that exceed 5000 pixels in width or height may not be displayed correctly due to performance reasons.**
Good practice is to not use images larger than the template size, for example if the template is 800px wide, the image should not be larger than 800px wide. There is no benefit in using larger images than the template size as they will be scaled down to fit the component size,
that may affect the image quality.

![Check image component dimensions](/blog/rendering-images/image-dimensions.jpeg)

Both the image weight and dimensions can be reduced by resizing the image or compressing it to reduce the file size. There are many online tools that can help you resize or compress the image, such as **TinyPNG**, **ImageOptim**, or **Squoosh**.


### Auto-scaling images

If you know that your images will be too large, you can enable **"Auto-scale external images"** in the template settings. This option will automatically scale down the image to fit the template size.
The option is available in the inspector section on the right side of the template editor.

![Auto-scale external images feature](/blog/rendering-images/auto-scale-external-images.jpeg)

Images are scaled down only if they are too large. **Every scaling operation decreases credit by an additional 1 credit.**

## How to choose the right image hosting provider

When choosing an image hosting provider, make sure that the provider allows public access to the images and that it allows hot-linking,
the best solution is to use a dedicated image hosting provider like [Imgur](https://imgur.com), [ImgBB](https://imgbb.com), or any other that allows public access to the images and hot-linking or use a CDN like [Cloudinary](https://cloudinary.com) or [AWS S3](https://aws.amazon.com/s3/).

**Solutions like Dropbox or Airtable are not recommended for hosting images for rendering content as they may block access to the images or require authentication after some time.**

## Image quality issues

Showing images in RenderForm is not only about displaying the image, but also about the quality of the image.
We want to make sure that the image is displayed in the best quality possible, we do not make any processing (compression, resizing) without your explicit consent, to the image to keep the quality as high as possible.
However, there are some common issues that can affect the image quality in RenderForm, below are some common issues and how to solve them.

### Image effect is not applied or is not working as expected

When you apply a color effect to an image in RenderForm with "Effect" option, the effect may not be applied or may not work as expected due to the image format or image size.

![Image effects](/blog/rendering-images/image-effects.jpeg)

Usually, the most common issue is that the image is too large, and the effect cannot be applied to the image due to performance reasons.
The image weight should be below 1MB to ensure that the effect is applied to the image and that the image loads quickly.

### Image is pixelated or blurred

To make sure that your image your won't be pixelated or blurred, make sure that the image is not too small, or too big and the quality is not too low.
The rule of thumb is to use images with a resolution that matches the image component size in the template, for example if the image component is 800px wide, the image should be **at least 800px wide** to ensure that the image is not pixelated or blurred.

![Enhance effect to use a better image scaller](/blog/rendering-images/enhance-effect.jpeg)

For images that dimensions are much higher than a template dimensions, you may see an unwanted a blur effect.
You can try to apply the "**Enhance**" effect to the image; it should make the image crisp again.

## Conclusion

In this article, we discussed some of the most common issues with rendering images in RenderForm and how to solve them.
The best way to avoid these issues is to make sure that we use reliable image hosting providers that allow public access to the images and hot-linking to avoid problems with image access.
Finally, we described how to ensure the image quality by making sure that the images used for rendering matches the desired dimensions, weight, and quality to avoid pixelation or blurring.


Posts tagged #renderform

AI-generated images with perfect texts

Introducing: Emoji Rating

Introducing: Template Tags

Fixing common issues with rendering images