Automate image generation from your NoCode Bubble io app

If you are not a developer and have no technical skills, you may have heard about NoCode tools. The NoCode movement is particularly famous these days.

It is now possible for anyone to create apps and launch online businesses without writing a single line of code. Indeed it is no longer mandatory to find a technical cofounder (aka CTO) prior to launching a startup.

Review the request, credentials and response as separate decisions

For a current integration, use the Pixelixe V2 reference alongside Bubble’s API Connector authentication documentation and security guidance. The interface screenshots retained below are historical examples rather than a promise that every current setting appears in the same position.

Integration decision	Check before initializing a call
Generation request	Use the endpoint, template identifier and modification fields documented for your API version.
Credentials	Keep private generation credentials in the supported server-side/private configuration.
Request body	Match its encoding and Content-Type to what is actually being sent.
Response	Select and inspect the response format you need before wiring the result into a page.
Workflow	Record the originating item, returned file and any error before continuing.

An HTTP Content-Type header describes the request body; it does not by itself select a JSON response. Keep the response-format choice separate. Do not expose a private generation key in page content, URLs or dynamic values sent to the browser. Follow the provider’s distinction between public editor keys and private backend credentials.

Start with one saved design and one non-sensitive sample record. If initialization or generation fails, inspect the documented error and stop the publishing step rather than treating an empty result as an image.

For the wider process, use the small-batch social image guide and ecommerce offer validation. The creative automation guide explains how to control the reusable design.

Documentation reviewed November 1, 2026. No credentials were entered and no authenticated or billable API calls were made for this revision.

NoCode tools are not specific to a single domain. You can find tools available in a large variety of domains (marketing automation, app development, workflow automation , etc..).

Some of the most famous tools are for example, Zapier, Airtable, Integromat, MailChimp (email marketing) or HubSpot (Social Media).

In the area of app development, one of the most growing actor on the market is Bubble.io

What is Bubble.io?

Bubble is a no-code app building platform designed to help you build software and applications without programming. Say simply: You no longer need programming skills to build an app. Awesome, right?

The story behind Bubble.io is also really interesting to read. The original article discusses the early history of the company; its early bootstrapping story is historical context rather than a statement about its current funding. Discover here, their journey from $0 in revenue until today.

A few years ago, developing apps was only for people who:

• Knew how to code

• Had a ton of money to delegate coding

As you know, this was quite an issue for lots of “wannabe entrepreneurs”.

Fast forward to today, that’s not the case anymore. Today, it does not matter if you just want to build a hobby app for personal use, or a complex piece of software built to run an entire large-scale business on, no programming is required at all.

Image Automation and Banner generation API

If you are already familiar with Pixelixe Image Automation API, here is a quick summary. The Image Automation API allows users to generate unlimited variations of a banner or a graphic on the fly, subject to your plan’s quotas and integration limits. Every text, color and image in a graphic can be modified via our API. Which makes it really convenient to industrialize and automate content creation.

Whether it is to automate banners for your entire product catalog if you are an ecommerce shop owner or to automate creation of email images or social media graphics.

Our Image and Banner Automation API becames really popular and can be easily integrated in a variety of NoCode tools.

Today, we are happy to showcase in this article, how to connect a banner or image-generation workflow to your Bubble.io app; the setup time depends on your application and integration experience.

How to create your first banner or graphic template and get started with the API

From your Pixelixe account, choose a template among our presets or start from scratch creating your own custom graphic using our online Graphic Design tool.

Keep in mind that every text or image that you will put on this graphic/template can be changed with the API on the fly. Even the background image or color can be updated as well. Any graphic created with the Pixelixe editor can become a template and be automated.

You can see in the screenshot below the graphic (aka template) we made in 30 secs specifically for this article:

Once you are happy with your graphic, the fastest way to move toward the integration of your API in a tool such as bubble.io is to hover the “Automate” button located in the top main navbar, near the blue “Download” button.

Hovering this “Automate” button will give you 3 options. Choose the last one, “Automate API Tester” and click on it. You will be redirected you to your Saved Documents and Automation dashboard as you can see on the screenshot below. By the way, this Automation API Tester can also be launched directly from your “Saved” documents hovering the design of your choice and then the “Automate” options.

Anyway, you may be wondering why we need to go to this dashboard as we just want to consume an API.

Well, you are right, this is optional, you can also simply click on the “Save” button, close the window and start reading our online Image Automation API documentation.

But, using our Automation API Tester will save you a precious time, because this will automatically generate the JSON Payload required to consume the API.

Indeed, the JSON payload will automatically be generated and be composed of all adaptable items (text and image within your graphic). Once you have this payload, generating a new graphic becomes a lot easier.

From this screenshot, you can easily understand that the API URL is :

** https://studio.pixelixe.com/api/graphic/automation/v2 ** and that the JSON Payload must be sent to the API using the POST HTTP method.

If you are new to Pixelixe and if you have never tried our Image generator, feel free to update the “text” label within the JSON payload and hit the “Send API Request (Test)” button. You will instantly see a generated banner based on your changes. This is that simple.

The JSON payload might seem complicated for non technical people but you will quickly understand how it works: You can see the modifications array. Array in JSON are represented by brackets. Inside this array, each element of your graphic are available. The “background-image” element being the first, you can change the background image URL as you can see on the screenshot above. You can also change the “text” label of each text element placed on your graphic. The name attribute matches the element id you can rename within the editor.

Bubble.io API Connector settings

Ok, so now your Image Generation API is ready to be integrated into Bubble.io. We won’t cover how to build a Bubble.io app in this article as you will find plenty of articles covering this specific topic on the web. We took the assumption that you are already familiar with the tool.

Basically, it is not at all complicated to get started with Bubble.io. First, register to get your account and create your first app:

Once created, you will be redirected to the Bublle App Builder:

Click on the “Plugins” button located in the left toolbar (between Styles and Settings) and search for “API Connector” in a search bar.

Click on the “Install” button and then on “Add another API”.

You can now set up your Pixelixe API settings and payload. The setup requires checking the request, authentication and response settings for your current integration.

Set the “POST” HTTP method, copy paste the entire API URL: https://studio.pixelixe.com/api/graphic/automation/v2

• Name: Choose whatever you want
• Data type: JSON
• Body type: RAW

Nothing complicated, now two things to do absolutely if you want to get a successful reply from the API. First, add “format”: “json”, to your payload in the main parent object (see screenshot below). Second, click on the “Add header” button and write “Content-Type” in the Key field and “application/json” in the Value field. The response-format setting requests JSON output. Content-Type describes the request body, so application/json is appropriate only when that body is actually JSON; check the current API encoding and response options before initializing the call.

Indeed, our Image Automation API can return a variety of response format, either:

• RAW PNG,

• RAW PDF,

• RAW HTML,

• JSON (with the generated image URL in the response),

• And more

As you may have seen, the JSON Payload located in the “Body” field can contain dynamic values which is awesome.

With this, for example, your user could generate images based on a text they wrote in your app.

Once you set up that information, click on the “Initialize call” button located below the JSON payload.

You will receive the following JSON response:

Conclusion

As you can see on the last screenshot, Bubble.io API Connector plugin automatically parsed the JSON response. The third item is the image_url of your new generated image. You can now integrate this image wherever you want. The only limit is your creativity to master workflow automation and create imersing user experience using Bubble.io.

Building complex apps with amazing user experience is now more possible than ever. We wish you all all the best with our set of APIs.

If you are interested to learn more about Bubble, you can also read our last article describing how to embed a photo editor in your NoCode Bubble app