How to Generate Event Marketing Graphics in Any Size with One Template (Bannerbear + Node.js)
🐻 Try Bannerbear for free: https://bannerbear.com (https://bannerbear.com/)
If your users need the same event graphic in 5 different sizes — Instagram post, story, Facebook banner, X header, print flyer — this video is for you. I'll show you how to use Bannerbear's adaptive templates to design once and generate every size automatically through the API using a simple Node.js script.
What you'll learn:
• What adaptive templates are and how they work in Bannerbear V5
• How to configure adaptive position, size, and anchor settings for each layer
• How to set up a Node.js project to call the Bannerbear API
• How to loop through multiple canvas sizes and generate them all in one script
This approach works for any use case where one design needs to adapt across multiple dimensions — event posters, product listings, real estate graphics, job postings, and more.
Video Transcription
[00:00:00] If you've ever built an event management app or anything where users need promotional graphics, you're probably familiar with this problem. When users promote an event, they need the same graphic in multiple sizes. Instagram post, Instagram story, Facebook post, X banner, a print flyer. Every channel has its own dimensions, and your users are probably stuck resizing the same design manually over and over again.
Here's what we're doing today to help you offer your users a better experience. I'm going to show you how to use Bannerbear's adaptive templates to design once and then generate every size they need automatically through the API using a Node.js script. And even if you're not working with Node.js, don't worry.
The simple logic applies in
[00:01:00] any language. So just adapt what we do here to your own stack. Let's get started. Before we touch any code, let me explain what adaptive templates are and make sure that you have everything ready to follow along. Adaptive template is a Bannerbear V5 feature that lets you define rules on each layer of your design.
Specifically, how they should reposition and resize when the canvas dimensions change. Instead of maintaining a separate template for every dimension, you build one adaptive template and then pass any widths and height to the API. Bannerbear handles all the layout math for you automatically. To follow along, you'll need Node.js installed and a Bannerbear account.
If you don't have a Bannerbear account yet, sign up using the link in the description. And for reference,
[00:02:00] this tutorial uses Node.js V two five. All right. So I've got the template already open here in the Bannerbear editor. I'll drop a link in the description so you can duplicate it straight into your Bannerbear account and follow along.
Feel free to modify it however you like. Let me walk you through what's in here. We're working with an eight hundred by eight hundred pixel event poster as the base size. It's got a background image, event title, date, and location. Now, here's the important part. Each layer's adaptive settings need to be configured to work with any dimension request.
Click on any layer and look at the adaptive settings panel in the right sidebar. You can set how the position, size, aspect ratio, and anchor gap change according to different
[00:03:00] sizes. For this template, we'll set every layer to use scale for adaptive position and size, set adaptive aspect ratio to free, and adaptive anchor gap to none.
This tells Bannerbear to scale each layer proportionally as the canvas grows or shrinks, keeping the visual hierarchy intact across all sizes. If you're unsure what any of these settings do, hit the help button for a breakdown. Feel free to play around with the settings and click open adaptive preview to see how it looks at different randomly selected dimensions.
Tweak your settings until every size looks right. Once you're happy, save and exit the editor. Now we need to grab our credentials from Bannerbear and create a Node.js project
[00:04:00] before we write the actual generation logic. You need two things from Bannerbear. First, your template ID. You'll find it in the top right corner of your template page.
Second, your API key. Head to Developers, API keys, and create a new one there. Copy both values and store them in your project's .env file later. Let's set up the Node.js project. In your terminal, run these commands. We're only installing .env. That's the only dependency this project needs. Create your .env file and add both values you copied earlier.
Now create index.js at the top. Load your environment variables and set up your constants
[00:05:00]
Now let's write the two pieces of logic that actually do the work. The function that calls the Bannerbear API and the loop that fires it for every size that we need. Here's the function that calls the Bannerbear V5 API. The key part is modifications.template. That's where you parse your custom width and height per request, which tells the API to render your adaptive template at a different canvas size.
The API responds immediately with a two-oh-two accepted status and a pending image object. Once rendering completes, the status changes to completed, and the response will contain the URLs to your generated images. Next, define the sizes you want to generate. These five cover the most
[00:06:00] common social media formats.
Finally, add this self-invoking async function at the bottom to loop through the sizes and call our function for each one. Now run the script. Your terminal will print a URL for every size. Open any of them in your browser, and you'll see your event poster rendered perfectly at that exact dimension. If a layer is out of position or text looks too small at a particular size, go back into the Bannerbear editor, tweak the adaptive settings for that layer, and rerun the script.
That's the whole process. With Bannerbear's adaptive templates, your users can get a complete set of event marketing visuals in every format that they need from a single API call in your backend. The same approach works
[00:07:00] anywhere you need one design to adapt across multiple sizes. For example, product listings that need different dimensions for marketplace thumbnails and banner ads, real estate listings formatted for both web and mobile, or job postings resized for different social media platforms.
If you haven't already, sign up for your free Bannerbear account to get started. The link is in the description. And if you have any questions, drop them in the comments. Don't forget to hit like and subscribe for more tutorials like this, and I'll see you in the next one.
