How to create a beautiful PDF in Retool using Carbone.io

Retool is an excellent tool for quickly creating an application, but today there’s no easy way to generate and export a pdf document.

This tutorial explains how to solve this problem using the Carbone service.

Using external Carbone service

Carbone is a very easy-to-use and universal service that lets you quickly create documents via a simple API.

What’s special about this service is that it doesn’t require a specific editor but uses document templates created with classic text editors: Microsoft Word, Excel, PowerPoint, LibreOffice, Google Docs, etc. 
To create these templates, you must add the “Carbone tags” to integrate any data, text, repetition, images, graphics, barcodes and Qrcodes, etc. Full documentation is here.

It’s an open-core application, so basic functions are free, and the premium service is free if you generate fewer than 100 documents per month.

Create your Carbone account

To use API, you need first to get your API key. So first, you must create your account on https://carbone.io/.

When it’s done, you test API key is available on https://account.carbone.io/ :

With test API key, you can use Carbone to create only PDF with Carbone watermark. Production API key unlock all export format and remove watermark.

API usage

API is very easy to use. Only 3 calls are needed to generate a document.

• POST https://api.carbone.io/template : to push your template
• POST https://api.carbone.io/render/:templateId : to create document
• GET https://api.carbone.io/render/:renderId : to download final doc

Create your first template

In my case, I want to generate an invoice. Here’s my Word template :

All you have to do is insert the Carbone tags corresponding to the data you want to replace. The complete documentation is here.

Integration from Retool

Now all we have to do is call the service from Retool.

To do this, simply create a new REST API resource as shown below. The API key must be added to the Authorization headers : Bearer API_KEY

The next step just involves creating the 3 requests: AddTemplate, RenderReport and getReport as shown below.

Insert a pdf preview

Now using pdf component you can include in your apps document preview :

Download file

I’ve also added a button in my application to download the pdf directly. All you have to do is insert the following JavaScript script on the button click event.

utils.downloadFile({base64Binary: GetReport.data.base64Binary},'Invoice' ,'pdf')

TL;DR Summary

By using the Carbone service, you can quickly integrate document generation into your Retool application.