

Image generation is a technique of automated or semi-automated images creation. Creating a complete and eye-catching image with API from scratch could be a challenging task.
Great graphic designers usually don't know how to code, so they use visual editors like Photoshop, Sketch or RenderForm to create their drafts and mockup.
Image generation software uses templates created by graphic designers and API just replaces properties like texts, colors or images to
meet the final requirements.

## Step 1: Create a template

Add components and design your template in our [Template Editor](/docs/general/template-editor/).

![Online Editor for Image Generation](/blog/simple-online-design-editor.png)

Check every added component on canvas.

### Set image fit
Click on image and on the right side adjust image fit option. Set image fit to `cover` if it can be cropped on sides in order to fill whole space, or use `contain` option if the image must be showed without cropping.
The contain option is useful when you add logos or brand visuals.

### Adjust text box
By default, RenderForm will scale down your text if it will be bigger than blue rectangle.
You can set width and height of a text box to make sure your text can freely grow.

![Text alignment](/blog/text-component-alignment.jpg)

### Adjust text alignment
Click on text and on the right side scroll down to 'Alignment' section.
You can decide how the text will grow if it will be bigger than used placeholder on draft.

## Step 2: Automate and scale

Now, you are ready replicate your template with different texts, images and more!
No matter which integration you will choose, the general rule of thumb is that you need to know which component you want to update and what property.
![Layout plus Data equals your image](/blog/image-generation-api.jpg)


General format of change looks as follows:

`YOUR_COMPONENT_ID.PROPERTY=YOUR_VALUE`

Example:

`myNameComponent.text=This is my name`


Check [list of properties](/docs/general/template-properties/) which you can edit with any integration.


![Example of generated image from Image Generation API](/blog/example-of-generated-image-from-image-generation-api.jpg)



What is Image Generation?


## How it started?

I realized how much time I spent to creating blog post covers, and I realized that publishing a blog posts is blocked very often because of lack a proper blog post cover. 
Not every team member of my team has access to the designer tools or a knowledge how to use them. 
Not everyone has a Content Management System to take care of everything. 😄 Even if you are using one you are still just relying on an image to represent your content.

## What is RenderForm.io?

**RenderForm.io is a web-based design editor with automation features.** You can create an image for your social media, blog post cover or advertising banner.

![Online Editor for Image Generation](/blog/simple-online-design-editor.png)

But the greatest feature of RenderForm is that you can **connect it with other online tools** in order to replicate your
image and create thousands of unique images with different images, texts and more!

![Layout plus Data equals your image](/blog/image-generation-api.jpg)

RenderForm offers easy to use **integrations with no-code platforms** like [Zapier](https://zapier.com) and [Make.com](https://make.com).

![no-code automation for image generation](/blog/no-code-banner-automation.png)

But you can use RenderForm with Google Sheets, Microsoft Excel, Apple Numbers, [Rows.com](https://rows.com), [Airtable](https://airtable.com) and more!

![generate images with text in Google Sheets](/blog/generate-unique-images-with-google-sheets.png)


## Use cases

- marketing automation
- automatic social images generation
- better email personalization
- multi-language blog posts image generation
- QR code sticker generation
- post card generation
- ecommerce product previews
- Instagram images generation
- archive blog post images generation

## Where to start?

Everything starts from [creating a free account](/register/). Next steps depend on that what you want to do, in RenderForm dashboard you will find
automation guide which will help you with integrating next tools.



What is RenderForm?


Have you ever wondering if you could quickly take a screenshot of a webpage using just a single request?

RenderForm API allows you to not only create images using templates and API but also take a screenshots using REST API.

There are plenty use cases of that:
- Post it on social media
- Make a list of websites
- Detect branding based on colors
- Test or health-check your webpage
- Read texts from screen


## How to take a screenshot with API?

Generate your API key in RenderForm by signing up to the system. Get the API key from your account section and then you can make a request like below.

```shell
curl 
    --location 
    --request POST 'https://api.renderform.io/api/v1/screenshots' \
    --header 'X-API-KEY: <API_KEY>' \
    --header 'Content-Type: application/json' \
    --data-raw '{
        "url": "https://renderform.io"
        "width": 1366,
        "height": 768,
    }'
```

RenderForm API will respond after a couple of seconds with link where you can download the screenshot. Example successful response is shown below.

```json
{
  "requestId": "ed39c85ac41f4c54b95e4caaad4ebff8",
  "href": "https://cdn.renderform.io/.../image.png",
  "request": {
    "width": 1366,
    "height": 768,
    "url": "https://renderform.io"
  }
}
```

## Screenshot API parameters

As you seen above we passed `url` of the website, `width` and `height` of the screenshot. These parameters are required but you can add more options:

- `url` (required) - website URL of which RenderForm should take a screenshot
- `height` (required) - screenshot height
- `width` (required) - screenshot width,
- `expires` (optional) - add expiration time in seconds for the image, available values from `1` to `604800`
- `waitTime` (optional) - add wait time in milliseconds before taking a screenshot, available values from `500` to `5000`
- `webhookUrl` (optional) - send response to the given webhookUrl as POST request

## Does it integrate with other tools?

Yes! RenderForm is integrated with Zapier and Make.com (Integromat). Soon we will add more integrations like n8n.io. Please also notice that 
every request supports a webhook. Taking a screenshot takes time because it's very resource demanding and complex process for servers.
You can pass a URL in `webhookUrl` field, thanks to that RenderForm API will accept your request and immediately
 return you a response. Once RenderForm finish processing your request a new request will be sent to the given URL in `webhookUrl`. 

## Can I set an expiration date?

Yes, you can set expiration date on every screenshot from 1 second up to 7 days. Add a field `expires` and put there
an expiration value in seconds. RenderForm API return you a link in `href` field which will be valid for requested period of time.


Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

REST API

RenderForm CLI

Webhooks

HTML to Image

Api

What is Image Generation?

What is RenderForm?

Taking screenshots using REST API