Save a template

Saving a template

To save a template, create a POST request to the /template endpoint. Use the templateName property as part of your request body to save the template as that name.

Method	URL	Description
POST	`https://api.tailrender.com/template`	Save / update a template

Updating a template

Creating and updating a template use the same underlying endpoint. As long as you specify the templateName property, you will either overwrite an existing template or create a new one.

Request body

In the POST request body, you can pass the following:

Name	Type	default	Description
`templateName`	string	*required	The name of the template being created or updated
`html`	string	*required	HTML content of the render
`type`	pdf, png, html, jpeg	png	Type of render
`format`	letter, legal, tabloid, ledger, a0, a1, a2, a3, a4, a5, a6	letter	Format size of the PDF document
`width`	number	*required if image	Width of the image
`height`	number	*required if image	Height of the image
`transparent`	boolean	false	Whether to generate the image with a transparent background
`quality`	number	1	Scale of the image. If quality is 2 and the image dimensions are 100x100, the rendered image will be 200x200
`tailwindConfig`	object	{ "theme": { "extend": {} } }	See TailwindCSS config documentation . Note plugins are disabled.
`css`	string	@tailwind base; @tailwind components; @tailwind utilities	Tailwind base classes as well as any custom CSS

Example request


javascript
const body = {
  templateName: 'my-first-template',
  type: 'png',
  width: 400,
  height: 350,
  transparent: true,
  html: "<div class='p-4 text-center text-gray-800 text-lg rounded-md bg-white'>{{ title }}</div>",
  props: {
    title: 'A super basic card with Tailwind CSS'
  }
};
const response = await fetch('https://api.tailrender.com/template', {
  method: 'POST',
  headers: {
    Authorization: "{{ YOUR_API_KEY }}",
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(body)
});
const json = response.json();

Example response body


json
{
    "success": true,
    "templateName": "my-first-template"
}

Supplemental CSS

You can pass supplemental CSS to the render by passing a css property. If you pass a css property, you must include the base TailwindCSS utility classes along with any custom CSS you want to use. For example, if you want to use the b-green CSS class, you must include the following:


css
@tailwind base;
@tailwind components;
@tailwind utilities

.b-green {
  @apply text-green-500 font-bold;
}

Failing to specify the base TailwindCSS utility classes will prevent the API from compiling the CSS properly.

Tailwind CSS Config

The tailwindConfig property is an object that contains the TailwindCSS configuration. The default configuration is included in as a part of every request. Plugins are currently unsupported by the API, although we do support the official TailwindCSS plugins. See the TailwindCSS documentation for more information.