Welcome to Bannerbear V5: A Developer's Guide to Images and Workflows APIs
🐻 Try Bannerbear for free: https://bannerbear.com (https://bannerbear.com/)
Bannerbear V5 is here — one API for image generation, animation, video editing tools, and now Workflows. In this tutorial, learn how to build a responsive image template, generate images in different sizes/formats via the API, and create a Workflow that resizes a video and overlays an animated title card on top of it — all automated end-to-end.
What you'll learn:
• Setting up V5 API keys and templates
• Building responsive image templates (position, size, aspect ratio controls)
• Generating images via the API in custom sizes (e.g. Instagram Stories)
• Returning multiple formats (PNG, JPG, PDF) from one request
• Building a Workflow: resize video → generate animation → overlay video
• Triggering Workflows via the API and polling for results
• Bonus: background removal, PDF creation, trimming, cropping, subtitling tools, and the Bannerbear MCP server for AI agents
• Bannerbear sign-up: https://app.bannerbear.com/users/sign_up?trial=automate
• Image template used:
https://app.bannerbear.com/v5/p/LnpkmdB08zg5wJZXGo
• Animation template used: https://app.bannerbear.com/v5/p/BL3vENo5mXO981M7lQ
• Code repo: https://github.com/joxyloo/bannerbear-v5-tutorial
Don't forget to like and subscribe for more dev tutorials!
Video Transcription
[00:00:00] Hey everyone. If you've been using Bannerbear to auto-generate images and videos, I've got some exciting news for you. Bannerbear V5 is here, and it puts everything you need for media automation under one API. From images, animations, video editing tools, to streamlined workflows, you can automate all of that with the new API.
In this video, I'm going to walk you through the new features in image generation and also another new upgrade, the workflows feature. Specifically, I'll show you how to generate an image from a template in different sizes and formats, and how to build a simple workflow that resizes a video and overlays a title card animation on top of it.
Let's get started. First things
[00:01:00] first, we create an image template. Take a look at how it's built to be responsive, and then run a test generation. Quick heads-up, the V5 API is not compatible with V3 API keys, so make sure that your dashboard is switched over to V5. Let's create our template first. You can start from scratch or duplicate one from the template library.
I'll share the link to this template in the description. Click Edit Template to go into the template editor. This template already has objects like background, avatar, name, and quote. But if you want to add more, you can click Add Object and select the element you want to add. Since we'll reference the object names when sending modifications through the API, give them meaningful names
[00:02:00] like title, logo, or guest name.
One of the new upgrades to Bannerbear templates is that they now support responsive image generation. Regardless of the template size, you can request the image to be generated in any size. But first, you need to configure it in the template editor. You can find the responsive settings here Every object layer has its own responsive settings, which control what happens to it when the canvas renders at a different size than the original.
The three main controls are position, size, and aspect ratio. In this template, most layers have position and size set to scale and aspect set to free, so they can resize proportionally with the canvas, except the avatar, which has its
[00:03:00] position and size left untouched, and its aspect ratio locked so it doesn't distort.
You can click Help to see more information about the settings, and click Open Responsive Preview to see how this all looks at different sizes. Save the template and exit the editor. From here, you can change the object's values in the API console and send a request to test the image generation. You can see the generated image here.
Now let's get into our API key and template ID, and then write a script to call the Bannerbear API to generate an image using the template. Head to API keys and create a new key. You can scope it to specific resources if you want, but for now, let's just
[00:04:00] leave all boxes unchecked for full access
Copy that key and save it into your project's .env file as BANNERBEAR_API_KEY
Then grab your template ID from the URL Next, create a new file. Paste this code and replace the template ID with your own. I'll also link the code in the description box. In this code, we're making a post request to the V5 images endpoint Inside modifications-.-objects, we're setting our quote layers text to welcome to V5 And we're requesting the image in 1080 by
[00:05:00] 1920 pixels which is perfect size for Instagram stories.
Run the script and you'll get back a response with a status, a template reference, and a link to your generated file
If you need a print-ready version, just add PDF to your formats array alongside PNG. Bannerbear can return JPG, PNG, PDF, and more, all from the same request
The brand-new feature, Workflows. A workflow lets you chain image, animation, and tool steps together into one automation. This lets you perform more complex tasks, like automating an entire video production pipeline in a single API call.
[00:06:00] Duplicate the animation template linked in the description to your account.
Then head to Workflows and create a new workflow. Give it a name First let's define our inputs so that we can run this workflow dynamically using different data every time
We need a video URL and a name string for our title card. Click Add Input and type in video as the name of the input video, with input type set to URL. Repeat the same steps for name, but with input type set to string
Next,
[00:07:00] we can add steps that will be run when the workflow is triggered There'll be three steps, resize video, generate animation, and lastly, overlay video. Step one, select Tool from the dropdown and click Add Step. Choose Resize Video under Tool, then click on the Ref dropdown and select the video input to be used as the video URL
For the width and height set them to 1080 and 1920 to resize it to fit Instagram stories Step two, select Animation and click Add Step. Pick the title card template we
[00:08:00] duplicated earlier and map our workflow's name input onto the animation's title layer. Since we're overlaying this on our video, check the transparent background box so that it doesn't block the video
Step three, add another tool step. This time, pick overlay video. We'll reference the resized video and the animation's rendered output as our base and overlay, and set the X position of the overlay to zero and the Y position to 480
Save the workflow. And from this overview page, you'll see all three steps listed in order and a form to test a run right from the
[00:09:00] dashboard. Let's fill in our inputs and click Run Workflow. You can watch the live progress right here
Once it's done, click the Final Steps video URL to see the result
Now that our workflow's built, let's try triggering it through the API instead of the dashboard To trigger this via API instead, copy the workflow ID and paste this code linked in the description into your script Replace the workflow ID with your own We're sending a post request to the v5 workflow runs endpoint with our workflow ID and input values.
It returns a 202 accepted response right away and runs the
[00:10:00] workflow asynchronously in the background. To get the result, we need to poll the workflow runs endpoint every few seconds to check the progress. Once the status changes to completed, the outputs object gets printed. Let's run the script and test it
And here's the output object with the resized video the animation and the final joined video printed all in one response
And that's Bannerbear V5. Other than what's shown in this video, you also get standalone tools for background removal, PDF creation, video trimming, cropping, subtitling, and more. And if you're working inside an AI agent like Claude Code
[00:11:00] or Codex, there's also a Bannerbear MCP server that lets you do all of this in plain language.
If you want to try it yourself, Bannerbear's got a free trial with 30 API credits. The link is in the description below. And also, don't forget to smash that like button and subscribe for more dev tutorials. See you in the next one.
