HTML to PDF playground

Write a template in HTML and CSS, fill it with JSON data and see the PDF, image or Excel file Typefold makes. This is how Typefold works in your app: the template lives in your account, and your app sends only the data. No account needed to try it.

<header class="top">
  <div>
    <h1>Invoice</h1>
    <p class="muted">{{number}} · Issued {{format issued type="date" dateStyle="long"}} · Due {{format due type="date" dateStyle="long"}}</p>
  </div>
  <div class="from">
    <strong>{{seller.name}}</strong><br />
    {{seller.street}}<br />
    {{seller.city}}
  </div>
</header>

<section class="bill-to">
  <p class="muted">Bill to</p>
  <p><strong>{{customer.name}}</strong><br />{{customer.street}}<br />{{customer.city}}</p>
</section>

<table>
  <thead>
    <tr><th>Item</th><th class="num">Qty</th><th class="num">Price</th><th class="num">Amount</th></tr>
  </thead>
  <tbody>
    {{#each lines}}
    <tr>
      <td>{{item}}</td>
      <td class="num">{{quantity}}</td>
      <td class="num">{{format price type="currency" currency=../currency}}</td>
      <td class="num">{{format amount type="currency" currency=../currency}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

<div class="totals">
  <div><span>Subtotal</span><span>{{format subtotal type="currency" currency=currency}}</span></div>
  <div><span>VAT 20%</span><span>{{format vat type="currency" currency=currency}}</span></div>
  <div class="total"><span>Total due</span><span>{{format total type="currency" currency=currency}}</span></div>
</div>

{{#if note}}<p class="muted note">{{note}}</p>{{/if}}

The example's first page, as Typefold renders it. Edit it and press Render.

First page of the invoice example as a PDF

Render it from your app

In your account, what you wrote above becomes a template. Your app sends only the data and gets the PDF back.

Create a free account, then a code template named Invoice. Paste the HTML, CSS, header and footer into it and publish it.
Create an API key under Developers → API keys.
Send the data. This request has the data from the Data tab and returns the file:

The quickstart walks through each step, and templates and data lists the helpers, such as format for amounts and dates.

What the playground shows

Headers and footers. HTML in the Header and Footer tabs is drawn in the page margins, on every page.
Page numbers. Elements with the class pageNumber or totalPages in a header or footer show the page number and the page count.
Page breaks. break-before: page starts a new page, and break-inside: avoid keeps a block or table row together.
Long tables. A table's <thead> repeats at the top of every page it runs over.
PDF, image or Excel. Output PNG image draws the first page as a picture. The Excel workbook example is a spreadsheet template: sheets.json lists the columns, and the same data comes out as an XLSX file and as a PDF of its tables.
Paper and margins. An @page rule sets the margins and the orientation.

JavaScript in the page does not run. Data goes in with Handlebars, as in the examples: {{name}}, {{#each lines}}, {{#if note}}.
Images and fonts at web addresses are not loaded. Here, put images in as data: URLs; in your account you upload them.
Each PDF has a "Typefold playground" watermark, and each visitor can render 30 documents a day.
What you paste is rendered and not kept. In the playground, templates have no helpers or scripts of your own.

Read the supported CSS and what's not supported for the details.

Make it your template

Create a free account