Creating Reusable Templates for Images and PDFs

Introduction

In today’s fast-paced digital environment, automating image and PDF generation using reusable templates has become essential for businesses and developers. Whether you’re automating reports, creating certificates, or generating social media visuals, flexible templates offer greater control and efficiency. MarkupGo provides a solution—allowing you to use HTML, CSS, and JavaScript to create reusable templates that can automate the generation of custom images and PDFs.

Why Use MarkupGo?

MarkupGo offers a powerful and simple API for generating custom images and PDFs. What makes it unique is its flexibility through reusable templates, which can be managed and updated easily without complex design tools or recreating everything from scratch each time.

Key Features:

• Reusable Templates: Create templates using HTML, CSS, and JavaScript that can be reused across projects.
• Dynamic Data: Populate templates with dynamic data to generate custom content.
• Automation: Integrate MarkupGo with your workflows to automate the generation of images and PDFs.
• Custom Fonts: Use custom fonts to align with your brand identity.
• Responsive Design: Ensure your templates look great on any screen size or device.

Getting Started

If you're familiar with HTML, CSS, and JavaScript, you’re already set to use MarkupGo. If not, sign up for a free account to begin. After logging in, you can create a new project and start building your templates right away.

Let’s walk through creating reusable templates for generating images and PDFs with MarkupGo.

Creating a Template

Head to the Templates section in your dashboard and click Create Template.

Template Editor

The template editor offers a code editor where you can write your HTML, CSS, and JavaScript. A real-time preview helps you see changes as you code. For this tutorial, we’ll use a pre-defined template to get started quickly, but you can write your own or further customize available templates.

Pre-defined templates are ready-to-use and customizable to your needs. For example, fields like heading in the template context are placeholders you can replace with dynamic data when generating images or PDFs.

To add dynamic data, use the {{ variable }} syntax to define placeholders that will be replaced with real data when generating content. In the example below, we use a simple template with heading, title, and website fields.

Generating Images and PDFs

After creating your template, click the copy button to grab the template ID. This ID is needed for generating images and PDFs via the MarkupGo API.

To generate images or PDFs using your template, pass dynamic data through the context field in the request body. This allows you to generate customized visuals based on the same template.

Here’s an example of how to generate an image:

fetch("https://api.markupgo.com/api/v1/image", {
  method: "POST",
  headers: {
    "x-api-key": process.env.MARKUPGO_API_KEY,
    "content-type": "application/json",
  }, 
  body: JSON.stringify({
    source: {
      type: "template",
      data: {
        id: process.env.MARKUPGO_TEMPLATE_ID,
        context: {
          heading: "Building Tomorrow", 
          title: "Advancing technology, one step at a time", 
          website: "www.markupgo.com" 
        },
        format: "png", // webp, png, jpeg
      }
    },
  })
})
.then(res => res.json())
.then(console.log)

The context object contains the dynamic data used to populate the template. Customize the data to meet your needs and generate images and PDFs with varying content.

Example Images Generated from This Template:

{  
  "heading": "Building Tomorrow",  
  "title": "Advancing technology, one step at a time"  
}

{  
  "heading": "Empowering Creators",  
  "title": "Unleashing creativity with MarkupGo"  
}

{  
  "heading": "Transforming Ideas",  
  "title": "Bringing your vision to life with MarkupGo"  
}

{  
  "heading": "Innovating Together",  
  "title": "Collaborating for a better future with MarkupGo"  
}

Generating PDFs

To generate a PDF, use the same template ID and dynamic data as before, but set the endpoint to /pdf instead of /image.

fetch("https://api.markupgo.com/api/v1/pdf")  // You just need to change the endpoint to /pdf

Conclusion

Reusable templates in MarkupGo make it easy to automate visual content creation. Using HTML, CSS, and JavaScript, you can build customizable templates for images and PDFs, perfect for automating reports, certificates, or social media visuals. By leveraging templates, you’ll save time and improve efficiency across your projects.

Not using MarkupGo yet? Sign up for a free account and start building custom templates today! If you need help or have any questions, our support team is always available.

Links:

• Sign up for a free account
• Documentation
• Follow us on X
• Public Editor
• Image API Reference
• PDF API Reference