Documentation

Learn how to use RenderKit's JSON-based API to generate beautiful PDFs with our building blocks system.

Quick Start

Make an API Request

Send a POST request to our API with your JSON data to generate a PDF.

curl --request POST \
  --url https://api.renderkit.app/pdf/render \
  --header 'content-type: application/json' \
  --header 'x-api-key: YOUR_API_KEY' \
  --data '{
    "document": {
        "title": "Testing title",
        "filename": "test.pdf",
        "author": "Testing author",
        "creator": "Test creator"
    },
    "pages": [
        {
            "type": "page",
            "props": {
                "size": "A4",
                "orientation": "portrait",
                "padding": 24,
                "blocks": [
                    {
                        "type": "text",
                        "props": {
                            "text": "Hello, World!"
                        }
                    }
                ]
            }
        }
    ]
}' > test.pdf

JSON Structure

data

RenderKit uses a simple JSON structure to define PDF layouts. Each PDF consists of pages, and each page contains building blocks.

{
  "document": {},
  "pages": []
}

Properties

Property	Type	Required	Description
document	object	Yes	Document object
pages	array	Yes	Array of page objects

Document

document

The document object contains metadata about the PDF document.

{
  "title": "My Document",
  "filename": "my-document.pdf",
  "author": "John Doe",
  "creator": "RenderKit",
  "subject": "My Document",
  "language": "en"
}

Properties

Property	Type	Required	Description
title	string	No	Document title
filename	string	No	Document filename
author	string	No	Document author
creator	string	No	Document creator
subject	string	No	Document subject
language	string	No	Document language

Page

page

A page object contains the building blocks that make up the page.

{
  "type": "page",
  "props": {
    "size": "A4",
    "orientation": "portrait",
    "padding": 24,
    "backgroundColor": "#fff",
    "blocks": [
      {
        "type": "text",
        "props": {
          "text": "Hello",
          "size": "16",
          "color": "#000000"
        } 
      }
    ]
  }
}

Properties

Property	Type	Required	Description
size	string	No	Page size (A4, Letter, etc.) (optional)
orientation	"portrait" \| "landscape"	No	Page orientation (optional)
padding	number	No	Page padding (optional)
backgroundColor	string	No	Background color (optional)
blocks	array	No	Array of blocks (optional)

Building Blocks

Building blocks are the core components you use to create PDF layouts. Each block has a specific purpose and accepts different properties.

Text

text

Display text content with customizable styling options.

{
  "type": "text",
  "props": {
    "text": "Hello, World!",
    "size": "16",
    "color": "#000000"
  }
}

Properties

Property	Type	Required	Description
text	string	Yes	The text to display
size	string	No	Font size (optional)
color	string	No	Text color (optional)

Image

image

Display images from URLs with size options.

{
  "type": "image",
  "props": {
    "src": "https://example.com/image.jpg",
    "width": 200,
    "height": 150
  }
}

Properties

Property	Type	Required	Description
src	string	Yes	Image URL
width	number	Yes	Image width (px)
height	number	Yes	Image height (px)

Table

table

Create structured data tables with headers and rows.

{
  "type": "table",
  "props": {
    "headers": [
      { "key": "name", "label": "Name" },
      { "key": "email", "label": "Email" }
    ],
    "rows": [
      ["John Doe", "john@example.com"],
      ["Jane Smith", "jane@example.com"]
    ]
  }
}

Properties

Property	Type	Required	Description
headers	array	Yes	Array of header objects ({ key, label, width?, align? })
rows	array	Yes	Array of table rows (arrays of strings/numbers)

Stack

stack

Group multiple blocks together with consistent spacing.

{
  "type": "stack",
  "props": {
    "type": "column",
    "align": "center",
    "gap": 8,
    "blocks": [
      { "type": "text", "props": { "text": "Item 1" } },
      { "type": "text", "props": { "text": "Item 2" } }
    ]
  }
}

Properties

Property	Type	Required	Description
type	"row" \| "column"	Yes	Stack direction
align	string	No	Alignment (optional)
gap	number	No	Gap between blocks (optional)
flex	number	No	Flex value (optional)
paddingVertical	number	No	Vertical padding (optional)
paddingHorizontal	number	No	Horizontal padding (optional)
blocks	array	No	Array of blocks (optional)

Divider

divider

Add horizontal lines to separate content sections.

{
  "type": "divider",
  "props": {
    "marginVertical": 8,
    "borderColor": "#e0e0e0",
    "borderWidth": 1
  }
}

Properties

Property	Type	Required	Description
marginVertical	number	No	Vertical margin (optional)
borderColor	string	No	Border color (optional)
borderWidth	number	No	Border width (optional)

Spacer

spacer

Add vertical or horizontal space between elements.

{
  "type": "spacer",
  "props": {
    "size": 20,
    "direction": "vertical"
  }
}

Properties

Property	Type	Required	Description
size	number	Yes	Space size in px
direction	"vertical" \| "horizontal"	No	Direction (optional)