How to Make a T-Shirt/Merchandise Mockup Generator Using Bannerbear in Node.js

Using an image manipulation library like Jimp to overlay an image on top of another can be difficult. In this article, we'll learn how to do so easily with Bannerbear to create a product mockup generator.
by Josephine Loo ·

Contents

    Creating mockups for physical products like t-shirts, bags, caps, and branded packaging helps visualize the products’ outcomes without having to produce them. Graphic design and marketing agencies often present their designs on product mockups to clients to provide a glimpse of the final product. However, creating mockups for various designs and different clients repetitively adds more work on top of their regular workload.

    Luckily, the mockup creation process can be automated with the help of some tools, like a mockup generator on print-on-demand sites such as Printful and Printify that shows users a preview of the final product after uploading their designs. However, it is challenging to create such images in Node.js if you were to create a mockup generator for them, particularly using an image manipulation library like Jimp to overlay the design on top of the product image.

    In this article, we will guide you through a simpler approach to building a mockup generator using Bannerbear. By providing only the URL of the design’s image to Bannerbear, you’ll be able to create a mockup generator that creates images like the examples shown below:

    Example 1

    bannerbear example 1.png

    Example 2

    restaurant example 1.png

    What is Bannerbear

    Bannerbear is a tool that helps you generate custom images, videos, and more using API. It has libraries in various popular programming languages like Ruby, PHP, and Node.js, making integrating image generation and other media manipulation functionalities into your application effortless.

    The images and other media files are created based on a template where you can add static and dynamic objects such as images, text, and shapes. By passing different data to the API, the values of these dynamic objects can be altered to generate unique content.

    All API requests on Bannerbear are scoped to a project and you can create multiple design templates in the same one. After creating the design templates, you can access them using the project API key and template IDs.

    Now that you have a little bit of an idea of what Bannerbear does, let’s start by creating a template!

    Creating a Bannerbear Project

    To make a template for generating images, you will need a Bannerbear account. Sign up for an account and create a new project in your account. Next, duplicate this mockup template to your project.

    Bannerbear Merchandise Mockup template

    The template contains dynamic image objects that hold the design such as phone_design, card_design, cup_design, etc. If you would like to change their placements, you can drag these objects to a new position in the editor. Save the template when you’re done.

    merchandise mockup template screenshot.png

    Then, get the project API key and template ID. We will need them in our code to access the project and template.

    merchandise mockup template API key.png merchandise mockup template ID.png

    Writing the Code

    Create a new Node.js project by running npm init in your project directory and create a file named index.js for writing your code.

    Step 1. Install and Import the Bannerbear Library

    Run the command below in your terminal to install the Bannerbear library for Node.js in your project:

    npm i bannerbear
    

    In index.js, import the library and create a new instance of Bannerbear with your API key:

    const { Bannerbear } = require('bannerbear');
    const bb = new Bannerbear('your_api_key');
    

    Step 2. Create Images with a New Design

    The design on the image can be changed by calling the create_image() method with the new design's image URL and other properties as stated in the API reference.

    Declare the image URL as a constant.

    const design_image_url = 'https://bannerbeartutorial.s3.ap-southeast-1.amazonaws.com/bannerbear_design.png';
    

    Then, in a self-invoking function, call create_image() with the template ID and an array containing modifications that need to be applied to the template.

    (async () => {
      const images = await bb.create_image(
        'your_template_id',
        {
          modifications: [
            {
              name: 'tshirt_design',
              image_url: design_image_url,
            },
            {
              name: 'tote_design',
              image_url: design_image_url,
            },
            {
              name: 'cap_design',
              image_url: design_image_url,
            },
            {
              name: 'cup_design',
              image_url: design_image_url,
            },
            {
              name: 'card_design',
              image_url: design_image_url,
            },
            {
              name: 'phone_design',
              image_url: design_image_url,
            },
          ],
        },
        true
      );
    
      console.log(images?.image_url_png);
    })();
    

    The objects in the modifications array are the dynamic image objects in the template. For each object, set image_url to the new design's image URL.

    {
      name: 'tshirt_design',
      image_url: design_image_url,
    }
    

    By default, Bannerbear creates images asynchronously when create_image() is called. When it's called with the third argument set to true, Bannerbear creates the images synchronously and returns the result in the response.

    Step 3. View the Result

    As we are calling create_image() synchronously, the image will be returned in the response in PNG and JPEG formats. Here’s how's the result looks like:

    bannerbear example 1.png

    🐻 View the full code on GitHub.

    Bonus: Generating Images from Multiple Templates

    Sometimes, creating more than one mockup image might be helpful. The previous template creates images that are able to provide a glimpse of the designs' outcomes. However, they don't show how the products look on a human.

    You can create additional templates that showcase how the products look on a model to provide a more realistic preview of the design, like these templates below:

    Bannerbear T-shirt Mockup template Bannerbear Tote Mockup template

    Duplicate the templates above into your project and modify your code to include these templates using their IDs:

    (async () => {
      const images = await bb.create_image(
        'your_template_id',
        {
          modifications: [
            {
              name: 'tshirt_design',
              image_url: design_image_url,
            },
            {
              name: 'tote_design',
              image_url: design_image_url,
            },
            {
              name: 'cap_design',
              image_url: design_image_url,
            },
            {
              name: 'cup_design',
              image_url: design_image_url,
            },
            {
              name: 'card_design',
              image_url: design_image_url,
            },
            {
              name: 'phone_design',
              image_url: design_image_url,
            },
          ],
        },
        true
      );
    
      const images_tote = await bb.create_image(
        'your_second_template_id',
        {
          modifications: [
            {
              name: 'design_container',
              image_url: design_image_url,
            },
          ],
        },
        true
      );
    
      const images_tshirt = await bb.create_image(
        'your_third_template_id',
        {
          modifications: [
            {
              name: 'design_container',
              image_url: design_image_url,
            },
          ],
        },
        true
      );
    
      console.log(images?.image_url_png + '\\n' + images_tote?.image_url_png + "\\n" + images_tshirt.image_url_png);
    })();
    

    Whenever a new design's image URL is provided, Bannerbear will create mockup images with all three templates in one go:

    bannerbear example 3.png bannerbear example 2.png # Conclusion

    Working with image manipulation in Node.js is not necessarily difficult. By making some modifications based on this tutorial, you can turn this into a service that generates multiple product mockups based on a design easily.

    Besides generating mockups for physical products, you can also use Bannerbear to create mockups for web applications. Learn how to do it and other interesting stuff with Bannerbear from these articles:

    About the authorJosephine Loo
    Josephine is an automation enthusiast. She loves automating stuff and helping people to increase productivity with automation.

    How to Automatically Add Watermark to Instagram Reels For Reposting Using Bannerbear (Node.js Tutorial)

    Posting a mix of original and user-generated content, including properly credited reposts, can be an effective social media strategy for media companies to engage with their audience and keep their feed dynamic and interesting. Let's learn how to streamline this process using Bannerbear in Node.js!

    Ecommerce Localization: How to Generate Images with Local Currencies and Languages

    Localized content improves customer experiences while improving your business standing. Here's how to automatically localize pricing graphics with nocode tools.

    How to Automatically Add Personalized Images to Your Beehiiv Newsletter

    Learn how to enhance your Beehive newsletter with personalized images using Bannerbear. In this article, we will learn how to automatically add personalized images to Beehiiv newsletters to make the content more relevant and engaging for your subscribers.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    How to Make a T-Shirt/Merchandise Mockup Generator Using Bannerbear in Node.js
    How to Make a T-Shirt/Merchandise Mockup Generator Using Bannerbear in Node.js