Skip to main content

Assets

Place static files in a template's assets/ directory. They are served to the browser at render time and referenced from the body template with a relative ./assets/ (or assets/) path.

invoice/
template.html
assets/
styles.css
logo.svg
fonts/Inter.woff2
<link rel="stylesheet" href="assets/styles.css">
<img src="assets/logo.svg" alt="logo">

Reference vs. inline

You can either reference an asset by URL (above) or inline it into the HTML with the embed helpers (embed_text, embed_base64). Inlining avoids extra fetches and keeps the document self-contained:

<style>{{embed_text "styles.css"}}</style>
<img src="data:image/svg+xml;base64,{{embed_base64 "logo.svg"}}">

Notes

  • Assets are available to the body only — not to header/footer templates.
  • Fonts placed in assets/ and referenced via @font-face render correctly in the PDF (a common reason to prefer web fonts over system fonts) — provided the render waits for them. The default load event does not wait for @font-face files, so a page can print before its font arrives and lay out in the fallback with nothing reported. Set a later event when a web font is load-bearing: { "pdf": { "waitLifecycleEvent": "networkIdle" } }, or callback with document.fonts.ready if you want to be exact. See Lifecycle events.
  • The runtime image installs no fonts of its own: it carries whatever apk add chromium pulls in, today Open Sans alone. Name any other family — Arial, Times New Roman, a brand font — and the browser substitutes it, which changes glyph advances and therefore line breaks. Ship the fonts you rely on in assets/, or add font packages to your own image. debug render reports each substitution as font-substituted, and text your page named no family for at all as font-default — see Reading a render's problems.
  • Asset paths are resolved within the template directory; path traversal outside it is not permitted.

See the assets_template, embed_assets, and iframe examples in the Gallery.