# Create PDF async
Source: https://docs.doczilla.app/api-reference/endpoint/async-pdf
POST /v1/pdf/async
Queue the creation of a PDF and call the webhook with the result.
# Create screenshot async
Source: https://docs.doczilla.app/api-reference/endpoint/async-screenshot
POST /v1/screenshot/async
Queue the creation of a screenshot and call the webhook with the result.
# From Template async
Source: https://docs.doczilla.app/api-reference/endpoint/async-template
POST /v1/template/{id}/async
Queue the creation of the template and call the webhook with the result.
All provided options are optional and will be merged with those defined in the template.
# Create new Template
Source: https://docs.doczilla.app/api-reference/endpoint/create-template
POST /v1/templates
Create one template.
# Delete Template
Source: https://docs.doczilla.app/api-reference/endpoint/delete-template
DELETE /v1/templates/{id}
Delete one template.
# Get Template
Source: https://docs.doczilla.app/api-reference/endpoint/get-template
GET /v1/templates/{id}
Get one template.
# Get all Templates
Source: https://docs.doczilla.app/api-reference/endpoint/list-templates
GET /v1/templates
Get all templates.
# Create PDF
Source: https://docs.doczilla.app/api-reference/endpoint/pdf
POST /v1/pdf
Create a PDF and directly return the raw result.
# Create screenshot
Source: https://docs.doczilla.app/api-reference/endpoint/screenshot
POST /v1/screenshot
Create a screenshot and directly return the raw result.
# Create PDF sync
Source: https://docs.doczilla.app/api-reference/endpoint/sync-pdf
POST /v1/pdf/sync
Create a PDF and directly return a document URL instead of the raw document. Optionally writes the document directly into your bucket, bypassing the need for our temporary storage.
# Create screenshot sync
Source: https://docs.doczilla.app/api-reference/endpoint/sync-screenshot
POST /v1/screenshot/sync
Create a screenshot and directly return a document URL instead of the raw document. Optionally writes the document directly into your bucket, bypassing the need for our temporary storage.
# From Template sync
Source: https://docs.doczilla.app/api-reference/endpoint/sync-template
POST /v1/template/{id}/sync
Create the template and directly return a document URL instead of the raw document. Optionally writes the document directly into your bucket, bypassing the need for our temporary storage.
All provided options are optional and will be merged with those defined in the template.
# From Template
Source: https://docs.doczilla.app/api-reference/endpoint/template
POST /v1/template/{id}
Create the template and directly return the raw result.
All provided options are optional and will be merged with those defined in the template.
# Update Template
Source: https://docs.doczilla.app/api-reference/endpoint/update-template
PUT /v1/templates/{id}
Update one template.
# Introduction
Source: https://docs.doczilla.app/api-reference/introduction
Introduction to our API.
Doczilla offers three endpoint types: `direct`, `sync` and `async`.
* `direct`: your document is generated and returned directly in the response to your request,
providing simplicity and efficiency. For requests with responses exceeding 32 MiB,
refer to the [Content type](#content-type) section.
* `sync`: your document is created and directly returns a URL instead of the raw document.
Optionally, write the document directly into your bucket by using the [storage option][storage-options], bypassing the need for our temporary storage.
* `async`: you provide a [webhook][webhook-options] where the [result](/api-reference/webhook-event) is sent to after the document is created.
## Endpoints
| Endpoint | Type | Body |
| :--------------------------------------------------------------------------------------------- | :------: | :--------------------------------------------------------------------------------------------------------------------------------- |
| | `direct` | [page][page-options], [pdf][pdf-options] |
| | `sync` | [page][page-options], [pdf][pdf-options], [storage][storage-options] |
| | `async` | [page][page-options], [pdf][pdf-options], [storage][storage-options], [webhook][webhook-options] |
| | | |
| | `direct` | [page][page-options], [screenshot][screenshot-options] |
| | `sync` | [page][page-options], [screenshot][screenshot-options], [storage][storage-options] |
| | `async` | [page][page-options], [screenshot][screenshot-options], [storage][storage-options], [webhook][webhook-options] |
| | | |
| | `direct` | [page][page-options], [pdf][pdf-options], [screenshot][screenshot-options], [storage][storage-options], [webhook][webhook-options] |
| | `sync` | [page][page-options], [pdf][pdf-options], [screenshot][screenshot-options], [storage][storage-options], [webhook][webhook-options] |
| | `async` | [page][page-options], [pdf][pdf-options], [screenshot][screenshot-options], [storage][storage-options], [webhook][webhook-options] |
## Content type
By default, when doing a `direct` request Doczilla will return with the `Content-Type` header associated with the endpoint, this will be:
* `/v1/pdf` -> `application/pdf`
* `/v1/screenshot` with `screenshot.type` set to `png` -> `image/png` (default)
* `/v1/screenshot` with `screenshot.type` set to `jpeg` -> `image/jpeg`
* `/v1/screenshot` with `screenshot.type` set to `webp` -> `image/webp`
If the size of the final document or screenshot exceeds 32 MiB, the `Transfer-Encoding` header will be set
to `chunked`, and the `Content-Type` header will be changed to `application/octet-stream`.
[page-options]: /api-reference/page-options
[pdf-options]: /api-reference/pdf-options
[screenshot-options]: /api-reference/screenshot-options
[storage-options]: /api-reference/storage-options
[webhook-options]: /api-reference/webhook-options
# Page options
Source: https://docs.doczilla.app/api-reference/page-options
All the available page options for the PDF/screenshot API endpoints.
Either `page.url`, `page.html` or `page.htmlTemplate` needs to be set, they cannot be used at the same time!
# PDF options
Source: https://docs.doczilla.app/api-reference/pdf-options
All available options for the PDF API endpoints.
All options are optional
# Screenshot options
Source: https://docs.doczilla.app/api-reference/screenshot-options
All available options for the screenshot API endpoints.
All options are optional
# Storage options
Source: https://docs.doczilla.app/api-reference/storage-options
Storage options that are available for the `sync`/`async` endpoints.
For the `/sync` and `/async` endpoints the `storage` property becomes available.
This feature makes it possible to store the documents directly into your personal bucket,
bypassing the need for our temporary storage.
See also [Use your own bucket](/examples/use-your-own-bucket) for examples on how to generate a signed url.
#### Available on endpoints:
| Endpoint | Type |
| :--------------------------------------------------------------------------------------------- | :-----: |
| | `sync` |
| | `async` |
| | `sync` |
| | `async` |
| | `sync` |
| | `async` |
# Render PDF or Screenshots from a Template
Source: https://docs.doczilla.app/api-reference/templates
Define ones, render repeatedly with templates.
With templates, you can predefine all available [Page](/api-reference/page-options), [PDF](/api-reference/pdf-options), and [Screenshot](/api-reference/screenshot-options) options. There's no need for manual deployments anymore.
When the HTML changes, simply update the template in our editor and release it instantly.
## Manage templates
You can easily manage your templates through the 'Templates' menu in Doczilla's dashboard.
This area allows for creating, modifying, and deleting templates.
Alternatively, you can also manage your templates programmatically using the [NodeJS SDK](/libraries/nodejs) or directly through our API.
| Endpoint | Description |
| :------------------------------------------------------------------------------------------- | :------------------ |
| | Get all templates |
| | Create new template |
| | Get template |
| | Update template |
| | Delete template |
## Templating in templates
Templates, supports [Handlebars](https://handlebarsjs.com/) by using the `htmlTemplate` option. See [Templating](/templating/introduction) for more info.
# Webhook event
Source: https://docs.doczilla.app/api-reference/webhook-event
Webhook event that is send to the provided webhook.
Id of the job.
Status of the job.
Status of the signed url.
* `NOT_PROVIDED`, no `storage.preSignedUrl` was provided.
* `UPLOADED`, `storage.preSignedUrl` was provided and file is uploaded.
* `FAILED`, `storage.preSignedUrl` was provided but the upload failed.
`fileUrl` is only returned if the webhook was created with `returnType` set to `URL` and `storage.signedUrl` is
is not used (unless `signedUrlStatus` returns `FAILED`)
URL to the generated file. This url is valid for 1 hour, after that the file will be deleted from our storage.
`fileBase64` is only returned if the webhook was created with `returnType` set to `base64` and
`storage.signedUrl` is not used!
The generated file base64 encoded (will be null if `storage.signedUrl` is used).
The provided metadata when creating the job.
```json Example theme={null}
{
"id": "ID",
"status": "SUCCESS",
"signedUrlStatus": "NOT_PROVIDED",
"fileUrl": "",
"fileBase64": "",
"metadata": {}
}
```
# Webhook options
Source: https://docs.doczilla.app/api-reference/webhook-options
Webhook options that are available for the `async` endpoints.
For the `/async` endpoints the `webhook` property comes into play.
This feature proves valuable when waiting for the result isn't necessary.
Your application can attend to other tasks, and a notification will be triggered upon completion of the render.
All you need to do is specify a URL to receive the data,
and the response will automatically be directed to that endpoint once the request concludes.
Various HTTP methods like POST or PUT can be used, you can also choose to receive the document in base64 or an temporary url to download the file.
See also
[Securing your webhook](/examples/securing-webhooks) on how
to improve your webhooks security and [Webhook event](/api-reference/webhook-event) for the payload
that will be sent to your webhook.
#### Available on endpoints:
| Endpoint | Type |
| :--------------------------------------------------------------------------------------------- | :-----: |
| | `async` |
| | `async` |
| | `async` |
# Common issues
Source: https://docs.doczilla.app/common-issues
Most common issues and their solutions.
Getting a white screen can be caused by our adblocker blocking a bit too eagerly, try disabling it by setting
`page.adblocker` to `false`.
Try setting `pdf.printBackground` to `true` to print the background graphics.
# Community
Source: https://docs.doczilla.app/community
Join Doczilla's expanding community.
Our user community expands daily, easing developers concerns about automating PDFs and screenshots, one request at a time.
If you'd like to contribute an example, report a bug or request a feature, reach out to us through [GitHub](https://github.com/Doczilla-APP/issues) or [email](mailto:support@doczilla.app).
Create a bug report.
Suggest a new idea.
Improve documentation about Doczilla.
Rather have contact through mail?
# Element screenshots
Source: https://docs.doczilla.app/examples/element-screenshot
Take a screenshot of a specific element on the page, great for automating documentation steps of your product.
Automate the creation of product screenshots effortlessly with the `element` option for screenshots. See [Screenshot options](/api-reference/screenshot-options) for all available screenshot options.
## Example
## Output
![]()
## Optimise the output
To optimize the output with for example more paddings around the element, the `viewport` option in combination with the `overlay` option can be used.
Providing the `viewport` option will make sure the screenshot is taken with that viewport, afterwards that viewport is used as
size to add the `background` to. We are setting `margin` to `0` as otherwise the default value will increase the viewport of the background.
## Optimised output
![]()
# Image from HTML
Source: https://docs.doczilla.app/examples/image-from-html
Generate images from HTML.
Convert HTML into professional-looking images
using the `html` [Page option](/api-reference/page-options).
See [Screenshot options](/api-reference/screenshot-options) for all available options for screenshots.
## Example
This example generates a basic image that is 400x200.
## Output
![]()
# Introduction
Source: https://docs.doczilla.app/examples/introduction
Showcase of the versatility and potential of Doczilla's features.
Use our public GitHub issues repository to request new examples on how to use Doczilla.
Convert HTML content into professional-looking PDF documents.
Convert HTML into professional-looking images.
Check the webhooks signature to prevent downgrade attacks.
Write the document directly into your bucket by using the storage option.
Craft compelling product screenshots effortlessly with our screenshot API.
Take a screenshot of a specific element on the page, great for automating documentation steps of your product.
Take screenshots of protected websites with our screenshot API.
Enhance PDFs with custom headers and footers effortlessly.
Tailor PDF content by extracting specific page ranges from documents.
Enhance PDFs into beautifully paginated documents with Paged.js.
Generate invoice PDFs based on templates with the "htmlTemplate" option.
Generate report PDFs with charts using the “htmlTemplate” option.
# Enhance PDFs with Paged.js
Source: https://docs.doczilla.app/examples/pdf-enhance-with-paged-js
Enhance PDFs into beautifully paginated documents with Paged.js.
## What is Paged.js
Paged.js is an open-source library to display paginated content in the browser and to generate print books using web technology.
It contains a set of handlers for CSS transformations and fragmented layout which polyfill the [Paged Media](https://www.w3.org/TR/css-page-3/) and [Generated Content](https://www.w3.org/TR/css-gcpm-3/) CSS modules, along with hooks to create new handlers for custom properties.
The currently supported properties can be found on [the Paged.js website](https://pagedjs.org/documentation/cheatsheet/).
## Example
This example uses the repo by Ashok Khanna to generate a PDF.
The code can be found [here](https://github.com/Doczilla-APP/paged.js-example).
## Output
# PDF from HTML
Source: https://docs.doczilla.app/examples/pdf-from-html
Generate PDF from HTML.
Convert HTML content into professional-looking PDF documents
using the `html` [Page option](/api-reference/page-options).
See [PDF options](/api-reference/pdf-options) for all available options for PDFs.
## Example
## Output
# Handpick PDF pages
Source: https://docs.doczilla.app/examples/pdf-handpick-pages
Tailor PDF content by extracting specific page ranges from documents.
Utilize the `pageRanges` option to specify which pages to include in the PDF output. See [PDF options](/api-reference/pdf-options) for more options.
## Example
This example generates a PDF from the [Wikipedia page about PDF](https://en.wikipedia.org/wiki/PDF), extracting pages 1, 2, and 18 through 19.
## Output
# Invoices with Tailwind CSS
Source: https://docs.doczilla.app/examples/pdf-html-invoices
Generate invoice PDFs using the "htmlTemplate" option.
From contracts and invoices to social media banners,
leverage our the `htmlTemplate` option for swift document generation.
The `htmlTemplate` uses [Handlebars](https://handlebarsjs.com/)
to render your HTML together with the provided `templateData`.
See [Templating](/templating/introduction) for more info.
## Example
This example generates an invoice PDF using Tailwind CSS.
## HTML
## Output
# Reports with Tailwind CSS
Source: https://docs.doczilla.app/examples/pdf-html-reports
Generate report PDFs with charts using the “htmlTemplate” option.
From contracts and invoices to social media banners,
leverage our the `htmlTemplate` option for swift document generation.
The `htmlTemplate` uses [Handlebars](https://handlebarsjs.com/)
to render your HTML together with the provided `templateData`.
See [Templating](/templating/introduction) for more info.
## Example
This example generates a report PDF using Tailwind CSS.
## HTML
## Output
# Custom header and footer for PDFs
Source: https://docs.doczilla.app/examples/pdf-with-custom-header-and-footer
Enhance PDFs with custom headers and footers effortlessly.
Customize your PDFs
by incorporating headers and footers using the `headerTemplate` and `footerTemplate` options available for PDFs.
See [PDF options](/api-reference/pdf-options) for all available options.
## Example
It is recommended to specify a font and color for your header/footer, the default is white and small.
We are adding a margin to prevent the header from overlapping the PDFs content.
## Output
# Product screenshots
Source: https://docs.doczilla.app/examples/product-screenshot
Craft compelling product screenshots effortlessly with our screenshot API.
Automate the creation of product screenshots effortlessly with the `overlay` and `device` option for screenshots. See [Screenshot options](/api-reference/screenshot-options) for all available `device` and screenshot options.
## Example
## Output
![]()
# Protected websites
Source: https://docs.doczilla.app/examples/protected-websites
Take screenshots of protected websites with our screenshot API.
Capture screenshots of websites that require HTTP authentication using the `authentication` [Page option](/api-reference/page-options).
See [Screenshot options](/api-reference/screenshot-options) for all available screenshot options.
## Example
## Output
![]()
# Securing your webhook
Source: https://docs.doczilla.app/examples/securing-webhooks
Check the webhooks signature to prevent downgrade attacks.
Log in to Doczilla and grab your webhook secret key from the organizations settings page.
The `x-doczilla-signature` header is included in each webhook call containing a signature that you
can verify.
Doczilla generates signatures using a hash-based message authentication code (HMAC) with SHA-256. To prevent
[downgrade attacks](https://en.wikipedia.org/wiki/Downgrade_attack).
To verify your webhook simply re-create the signature with your webhook secret and the raw body.
See also [Webhook event](/api-reference/webhook-event) for the full event payload.
#### Examples
```javascript Express + Node.js SDK theme={null}
import Doczilla from '@doczilla/node'
import express from 'express'
const doczilla = new Doczilla('doczilla-...')
// Set your webhook secret here
const webhookSecret = 'whsec-...'
const app = express()
// Match the raw body to content type application/json
app.post(
'/webhook',
express.raw({ type: 'application/json' }),
(request, response) => {
const signature = request.headers['x-doczilla-signature']
try {
const payload = doczilla.webhook.verifyPayload(request.body, signature, webhookSecret)
// Do something with the generated document
console.log(payload)
// Return a response to acknowledge receipt of the event
response.json({ received: true })
} catch (err) {
response.status(400).send('Signature invalid!')
}
}
)
app.listen(4242, () => console.log('Running on port 4242'))
```
```javascript Node.js theme={null}
import crypto from 'node:crypto'
const payloadSignature = crypto
.createHmac('sha256', webhookSecret)
.update(rawBody, 'utf8')
.digest('hex')
if (payloadSignature === signature) {
// Valid
}
```
# Use your own bucket
Source: https://docs.doczilla.app/examples/use-your-own-bucket
Write the document directly into your bucket by using the storage option.
## What is a signed URL?
A signed URL is a URL that provides limited permission and time to make a request.
Signed URLs contain authentication information in their query string, allowing users without credentials to perform specific actions on a resource.
After you generate a signed URL, anyone who possesses it can use the signed URL to perform specified actions, such as writing an object, within a specified period of time.
## How to use your bucket with Doczilla
## Signed URL upload failed
If the render was successful but the upload to the signed URL failed, `signedUrlStatus` will be `FAILED` and the
URL field will contain the temporary URL of Doczilla.
# Introduction
Source: https://docs.doczilla.app/introduction
Welcome to the documentation of Doczilla.
Dive into our documentation, designed to empower you with everything you need to seamlessly integrate, customize,
and optimize your experience with Doczilla's powerful API.
Let's unleash the potential together!
Get started in no time! Read our Quickstart guide.
Showcase of the versatility and potential of Doczilla’s features.
Experience the next level of document and screenshot rendering with our API - your gateway to seamless, efficient, and powerful document creation.
## Libraries
}
href="/libraries/nodejs"
/>
}
href="/libraries/nextjs"
/>
}
href="/libraries/remix"
/>
# Next.js
Source: https://docs.doczilla.app/libraries/nextjs
Learn how to use Doczilla with Next.js.
## Install
Download the Node.js SDK using your favorite package manager.
```bash npm theme={null}
npm install @doczilla/node
```
```bash yarn theme={null}
yarn add @doczilla/node
```
```bash pnpm theme={null}
pnpm add @doczilla/node
```
## Usage
## Learn more
# Node.js
Source: https://docs.doczilla.app/libraries/nodejs
Learn how to integrate using the Node.js SDK.
## Install
Download the Node.js SDK using your favorite package manager.
```bash npm theme={null}
npm install @doczilla/node
```
```bash yarn theme={null}
yarn add @doczilla/node
```
```bash pnpm theme={null}
pnpm add @doczilla/node
```
## Usage
```ts theme={null}
import Doczilla from '@doczilla/node'
const doczilla = new Doczilla('doczilla-...')
const pdfBuffer = await doczilla.pdf.direct({
page: {
html: 'Your first Doczilla PDF
'
}
})
```
### Webhook signing
Doczilla can optionally sign the webhook events it sends to your endpoint, allowing you to validate that they were not
sent by a third party. You can read more about it [here](/examples/securing-webhooks).
Please note that you must pass the *raw* request body, exactly as received from Doczilla, to the `verifyPayload()`
function; this will not work with a parsed (i.e., JSON) request body.
```js theme={null}
const event = doczilla.webhooks.verifyPayload(
webhookRawBody,
webhookDoczillaSignatureHeader,
webhookSecret
)
```
## Learn more
# Remix
Source: https://docs.doczilla.app/libraries/remix
Learn how to use Doczilla with Remix.
## Install
Download the Node.js SDK using your favorite package manager.
```bash npm theme={null}
npm install @doczilla/node
```
```bash yarn theme={null}
yarn add @doczilla/node
```
```bash pnpm theme={null}
pnpm add @doczilla/node
```
## Usage
## Learn more
# Quickstart
Source: https://docs.doczilla.app/quickstart
Get up and running in under 5 minutes.
[Sign up](https://doczilla.app/signup) for a Doczilla account and create your organization.
Grab your API key from your organizations settings page.
You can now use your API key to start generating your documents, see our examples below to get started.
## First request
In this example, we generate a PDF providing custom html
using the [Create PDF](/api-reference/endpoint/pdf) endpoint.
Also checkout the [synchronous](/api-reference/endpoint/sync-pdf) and
[asynchronous](/api-reference/endpoint/async-pdf) methods to determine what fits best.
In this example, we generate a screenshot from the Doczilla homepage
using the [Create screenshot](/api-reference/endpoint/screenshot) endpoint.
Also checkout the [synchronous](/api-reference/endpoint/sync-screenshot) and
[asynchronous](/api-reference/endpoint/async-screenshot) methods to determine what fits best.
## Learn more
# Available helpers
Source: https://docs.doczilla.app/templating/helpers
Discover Handlebars helpers for efficient, logic-less templating.
[Handlebars](https://handlebarsjs.com/) supports the use of helpers, which are custom functions that can be called within templates to perform specific transformations or logic based on the template data.
## Build-in Helpers
Handlebars provides several built-in helpers which can be used to add logic to your templates. Here are some of the commonly used ones:
1. **if**: Conditionally includes a block of template content.
```handlebars theme={null}
{{#if condition}}
Content to display if `condition` is true.
{{/if}}
```
2. **unless**: The inverse of `if`. Includes a block of content if the expression evaluates to false.
```handlebars theme={null}
{{#unless condition}}
Content to display if `condition` is false.
{{/unless}}
```
3. **each**: Iterates over an array, rendering the block once for each item.
```handlebars theme={null}
{{#each items}}
{{this}}
{{/each}}
```
4. **with**: Provides a new context for the block within its current scope.
```handlebars theme={null}
{{#with person}}
{{ name }}
{{/with}}
```
## Additional helpers
In addition to the built-in helpers provided by Handlebars, we have added a couple more custom helpers to cater
to specific needs and enhance the templating capabilities.
1. **compare**: Compares two values using a specified operator.
Available operators are: `==`,`===`,`!=`,`!==`,`>`,`>=`,`<`,`<=`,`||` and`&&`
```handlebars theme={null}
{{#compare prop "===" propB}}
Content to display if `prop === propB` is true.
{{/compare}}
```
2. **json**: Converts an object into a JSON string.
Useful if you need to, for example, render charts with a JSON representation of your data. Checkout [our reports example](/examples/pdf-html-reports) to see it in action.
```handlebars theme={null}
```
Request additional helpers to enhance functionality and improve your templating experiences.
Your suggestions are valuable to us.
# Templating with Handlebars
Source: https://docs.doczilla.app/templating/introduction
Minimal templating on steroids.
[Handlebars](https://handlebarsjs.com/) is a simple templating language that enables the efficient separation of logic and layout in a web application. It allows developers to create dynamic HTML by embedding expressions in their HTML templates. These expressions are evaluated at runtime, enabling the generation of HTML with dynamic content.
### Key Features
1. **Logic-less Simplicity**: Handlebars enforces a clear separation of concerns, promoting long-term maintainability of your code.
2. **Dynamic Content Rendering**: Embed values, iterate over data, and even conditionally display blocks of HTML dynamically.
3. **Custom Helpers & Partials**: Define reusable template logic or extend capabilities using custom helpers—no spaghetti templates here!
4. **Support for Internationalization**: With built-in tools like partial blocks and helpers, creating multilingual templates (e.g., PDFs, reports) becomes much simpler.
## Example
```handlebars HTML Template theme={null}
{{title}}
{{#each items}}
- {{this}}
{{/each}}
```
```json Variables theme={null}
{
"page": {
"htmlTemplateData": {
"title": "Doczilla with Handlebars!",
"items": ["Item 1", "Item 2", "Item 3"]
}
}
}
```
## Output
```html HTML theme={null}
Doczilla with Handlebars!
```
## Conclusion
Handlebars is a powerful tool for creating dynamic content in Doczilla, ensuring cleaner code and better separation of concerns in your code.