Image & PDF generation API for

HTML & TailwindCSS

Our REST API makes it easy to create images and PDFs using TailwindCSS and HTML. Create templates for easy reuse, rapidly create & scale applications that generate rich documents, or automate & scale your marketing.

Get started
js
const body = {
    type: "png",
    transparent: true,
    html: "div class='p-4'>...</div>",
    width: 400,
    height: 400,
    props: {
        title: "Quiet living outside the city"
    },
    tailwindConfig: {
        theme: {
            extend: {
                padding: {
                    "5/6": "83.3333333%",
                }
            }
        }
    }
};


const response = await fetch("https://api.tailrender.com/render", {
    method: "POST",
    headers: {
        Authorization: 'YOUR_API_KEY',
        "Content-Type": "application/json"
    },
    body: JSON.stringify(body)
});
const responseBody = await response.json();

Create templates for reusability

Create templates for your projects through the template API or the template editor UI, then render your templates effortlessly through the render API. Use Mustache syntax in your templates to take advantage of our powerful rendering API.

Get started

“I founded Tailrender to help engineers jumpstart their applications. I hope this API provides some utility for you. If you'd like to submit a customer testimonial, please email us at support@tailrender.com!”

Eamon, Founder
POST
https://api.tailrender.com/template
{
  "templateName": "tweet-card-variant-1",
  "type": "png",
  "quality": 1,
  "transparent": true,
  "width": 400,
  "height": 350,
  "html": "<style>\n    @import url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css);\n</style>\n<div class=\"h-full flex items-center justify-center p-3\">\n    <div class=\"w-full mx-auto rounded-md bg-white shadow-xl p-6 text-gray-800 border border-gray-300\">\n        <div class=\"w-full flex mb-4\">\n            <div class=\"rounded-full w-12 h-12\">\n                <img class=\"object-cover rounded-full w-12 h-12\" src=\"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=40\" alt=\"\">\n            </div>\n            <div class=\"flex-grow pl-3\">\n                <h6 class=\"font-bolder text-md\">{{ displayName }}</h6>\n                <p class=\"text-sm text-gray-600\">@{{ username }}</p>\n            </div>\n            <div class=\"w-12 text-right\">\n                <i class=\"mdi mdi-twitter text-blue-400 text-3xl\"></i>\n            </div>\n        </div>\n        <div class=\"w-full mb-4\">\n            <p class=\"text-sm text-gray-700\">{{body}}</p>\n        </div>\n        <div class=\"w-full\">\n            <p class=\"text-xs text-gray-500 text-right\">{{ date }}</p>\n        </div>\n    </div>\n</div>",
  "css": "@tailwind base;\n@tailwind components;\n@tailwind utilities;",
  "tailwindConfig": {
    "theme": {
      "extend": {
        "padding": {
          "5/6": "83.3333333%"
        }
      }
    }
  }
}

Manage environments

For teams that manage multiple environments, Tailrender's API is perfect for you. We support managing multiple environments with separate API secrets. Templates are environment-specific and can be saved and updated via the template REST API.

Get started
Customer profile user interface

Preview in the playground

The playground has made it easier than ever to preview your HTML / Tailwind CSS directly in the browser. When you're done, download them for free. The playground supports custom TailwindCSS configurations out of the box.

Try the playground
Inbox user interface

Frequently asked questions

Ready to dive in?Take full control of the API, today.

Read the docs