How to Bulk-Create Language Flashcards Using Bannerbear in Node.js
Contents
When it comes to learning a new language, using flashcards is one of the most effective ways to build vocabulary. They help learners remember new words and reinforce grammar patterns through repetition.
If you’re developing a language-learning app, having a flashcard feature can greatly enhance your users’ learning experience. Even better, you can give users the option to print their flashcards as physical study materials. To make that possible, your app needs a way to export flashcards as images or PDFs.
In this tutorial, you’ll learn how to automate that process using the Bannerbear API. To demonstrate the process, we’ll build a Node.js script that reads a list of words along with their meanings and examples from a JSON file and turns them into beautifully designed flashcards. Each flashcard will include translation and example sentencesm, and ready to be exported for printing.
Example 1
Example 2
Example 3
Why Use Bannerbear
If you’re building a language-learning app, adding a flashcard feature is one of the simplest yet most effective ways to help users remember new words. However, creating hundreds of consistent, well-designed printable flashcards manually is not the most efficient approach.
With Bannerbear, you can use a template to generate hundreds of flashcards in seconds. Bannerbear is an API that lets you automatically generate custom images, videos, and more from templates. It also has SDKs for Node.js, Ruby, and PHP, making it easy to integrate automated image generation into your project.
To generate images automatically, you need to create a design template in Bannerbear that serves as a blueprint for creating the images. A design template can consist of:
- Static objects - These remain the same in every generated image (e.g., a logo)
- Dynamic objects - These change based on data you provide (e.g., names, images)
Here’s an example of a Bannerbear design template:
By passing different data to the API, you can update the dynamic objects and instantly create flashcards for various vocabulary words. This approach ensures your cards maintain a consistent layout, fonts, and colours, while still being scalable and flexible enough to support multiple themes.
Pre-requisites
Before we begin, make sure you have:
- Node.js and npm installed on your machine
- A Bannerbear account (sign up for 30 free API credits here!)
Bannerbear: Designing Your Flashcard Template
Head to your Bannerbear dashboard and create a new template. You can create one from scratch by clicking “Create a Template” from your project page:
You can also duplicate a pre-made template from Bannerbear’s Template Library, like this one (click on it to duplicate):
The template contains dynamic objects like title_lang1, title_lang2, subtitle, example_lang1 and example_lang2:
The values of these objects can be changed using Bannerbear’s API to generate different flashcards.
Once you’ve created your template, click on the three dots at the top right corner to see your template ID:
Copy and save it somewhere safe.
Do the same for your API key:
Node.js: Building the Script
Step 1. Set Up the Project
In your terminal/command prompt, create a new folder and initialize a new Node.js project:
mkdir flashcard-generator
cd flashcard-generator
npm init
Then, install Bannerbear’s Node.js package:
npm install bannerbear
In your project root, create a .env file and insert the credentials needed for the project:
BANNERBEAR_API_KEY=your_bannerbear_api_key
BANNERBEAR_TEMPLATE_ID=your_template_id
🐻 Bear Tip : Replace the placeholders with your actual values.
Step 2. Prepare the Vocabulary Data
In a real application, you’d probably fetch vocabulary data from your database. For this tutorial, we’ll keep things simple by storing it in a JSON file.
In your project’s root folder, create a new file called words.json and add your data inside using the same structure shown below:
[
{
"chinese": "学习",
"pinyin": "xué xí",
"english": "study",
"example_cn": "我喜欢学习中文。",
"example_en": "I like studying Chinese."
},
{
"chinese": "朋友",
"pinyin": "péng yǒu",
"english": "friend",
"example_cn": "他是我的好朋友。",
"example_en": "He is my good friend."
},
{
"chinese": "猫",
"pinyin": "māo",
"english": "cat",
"example_cn": "这只猫很可爱。",
"example_en": "This cat is very cute."
}
]
Each entry represents a single term that will be turned into a flashcard.
Step 3. Writing the Code
Create a file named index.js and add the code below to the file:
import 'dotenv/config';
import fs from 'fs';
import { Bannerbear } from 'bannerbear';
const bb = new Bannerbear(process.env.BANNERBEAR_API_KEY);
const TEMPLATE_ID = process.env.BANNERBEAR_TEMPLATE_ID;
// Load vocabulary data from JSON
const words = JSON.parse(fs.readFileSync('words.json', 'utf8'));
This imports the libraries needed and reads the list of vocabulary items from words.json.
In the same file, add a function to loop through the array and create a flashcard for each word using Bannerbear:
async function generateFlashcards() {
for (const entry of words) {
const { chinese, pinyin, english, example_cn, example_en } = entry;
const image = await bb.create_image(
TEMPLATE_ID,
{
modifications: [
{ name: 'title_lang1', text: chinese },
{ name: 'subtitle', text: pinyin },
{ name: 'title_lang2', text: english },
{ name: 'example_lang1', text: example_cn },
{ name: 'example_lang2', text: example_en },
],
},
true // returns the image in the response
);
console.log(`✓ ${chinese} (${english}) → ${image.image_url}`);
}
console.log('All flashcards generated!');
}
Finally, call the function:
generateFlashcards();
Step 4. Testing the Script
In your terminal/command prompt, run the command below to execute the script:
node index.js
If it runs successfully, you’ll see logs like this:
✓ 学习 (study) → https://images.bannerbear.com/direct/y0aJ23zREgj1xX4OGl/requests/000/113/772/746/APW1bDp49YK8425PzjmVoORax/72f263afa9c8754e5fb7a849e552ace640fe88e6.png
✓ 朋友 (friend) → https://images.bannerbear.com/direct/y0aJ23zREgj1xX4OGl/requests/000/113/772/785/KPbegp4noQk0lGMjYlVkN03vE/5f5c01a3c1d1c0497113f088804aedd7398535c7.png
✓ 猫 (cat) → https://images.bannerbear.com/direct/y0aJ23zREgj1xX4OGl/requests/000/113/772/800/NgL30amMOYe5ln1kYprJxBoye/41f066e58bd39ca855240b9ea03e00acffb8df8a.png
Each word from your JSON file is now turned into an image flashcard:
🐻 Bear Tip: To avoid hitting rate limits, add a delay between your API calls. You can also cache existing entries to avoid making the same API requests repeatedly.
Exporting Flashcards as a PDF
If you want to export all your flashcards into one PDF file, you can first render each flashcard as a PDF, then combine them together.
Simply add render_pdf: true to the attributes to generate the flashcards in PDF format:
const image = await bb.create_image(
TEMPLATE_ID,
{
modifications: [
{ name: 'title_lang1', text: chinese },
{ name: 'subtitle', text: pinyin },
{ name: 'title_lang2', text: english },
{ name: 'example_lang1', text: example_cn },
{ name: 'example_lang2', text: example_en },
],
render_pdf: true // to export to PDF
},
true
);
What’s Next
Once you’ve tested the script, it’s easy to extend it into a production feature. You can integrate it into your backend to automatically trigger whenever new vocabulary is added to your database, or schedule it as a nightly batch job to generate new flashcards.
This workflow isn’t just limited to vocabulary flashcards. You can easily adapt it to create other types of learning materials, like grammar posters, idiom cards, or even PDF lesson summaries.
If you’d like to learn how to send these flashcards to users via email or other channels, check out our related tutorials on automated message delivery:
