Saved Templates

​

JSX templates

import { Document, Page, Text, View } from '@formepdf/react';

export default function Invoice(data) {
  return (
    <Document>
      <Page size="Letter" margin={48}>
        <Text style={{ fontSize: 24 }}>Invoice for {data.customer}</Text>
        {data.items.map((item) => (
          <View key={item.name} style={{ flexDirection: 'row' }}>
            <Text>{item.name}</Text>
            <Text>{item.qty} × {item.price}</Text>
          </View>
        ))}
      </Page>
    </Document>
  );
}

• Only React and the @formepdf/react exports are in scope. You can import from react and @formepdf/react. Other imports, require, eval, Function, and dynamic import() are rejected with 400.
• Evaluation is time-limited. A template that runs too long fails with 408.
• Font and image sources must be data: URIs or http(s):// URLs. File paths and other schemes are rejected with 400.

​

HTML + Liquid templates

<!doctype html>
<html lang="en">
<head><title>Invoice {{ number }}</title></head>
<body>
  <h1>Invoice {{ number }}</h1>
  <p>Billed to {{ customer.name }}</p>
  <table>
    {% for item in items %}
      <tr>
        <td>{{ item.description }}</td>
        <td>{{ item.qty | number }}</td>
        <td>{{ item.amount | currency }}</td>
      </tr>
    {% endfor %}
  </table>
  {% if discount %}<p>Discount: {{ discount | percent }}</p>{% endif %}
  <p>Total: {{ total | currency: 'EUR' }}</p>
</body>
</html>

@page { size: A4; margin: 48pt; }
h1 { font-size: 24pt; }
td { padding: 4pt 8pt; }

{
  "number": "INV-001",
  "customer": { "name": "Acme Corp" },
  "items": [{ "description": "Consulting", "qty": 10, "amount": 1500 }],
  "discount": 0.05,
  "total": 1425
}

1. Liquid renders the HTML tab with the request data.
2. The CSS tab goes into one <style> block just before </head>. With no </head>, the block goes first. The CSS is not processed by Liquid.
3. @formepdf/html renders the result. Page size and margins come from your CSS (@page). Engine warnings come back in the X-Forme-Warnings header.

​

Escaping

<p>{{ customer.name }}</p>      <!-- escaped -->
<div>{{ notes_html | raw }}</div>  <!-- not escaped -->

​

Number filters

​

Rules and limits

• Strict filters. An unknown filter name (a typo such as | curency) is an error, not empty output.
• No file includes. {% include %}, {% render %}, and {% layout %} cannot load other files. Each template is self-contained.
• Own properties only. Liquid reads only the data’s own keys, not inherited members such as constructor.
• Size and time limits. The template source can be up to 2,000,000 characters, and one render can take up to 1 second. A render also has a memory limit for runaway loops.
• Errors. A Liquid syntax or render error returns 400 with "Template error: ...".

​

Starters

​

Listing templates