Custom JS

The builder lets you add global JavaScript to your template for custom logic, calculations, or third-party library integration. You can also run inline scripts in individual HTML blocks and load external JS libraries from CDN URLs.

The JavaScript editor

Click the Custom JS button in the toolbar at the top of the canvas to open the global JavaScript editor. Write your code and press Ctrl+Enter (or Cmd+Enter on Mac) to save.

Code in the Custom JS editor runs in the template context when the document renders. This is where you define helper functions, format values, or set up any logic your template needs.

Making functions available to the template

To make a function or variable usable in property bindings or HTML blocks, assign it to window:

window.formatCurrency = function (amount, currency) {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: currency || 'USD',
  }).format(amount);
};

window.formatDate = function (dateString) {
  return new Date(dateString).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
};

Once defined on window, these functions can be called from bindings elsewhere in the template — for example, binding a Text block’s content to formatCurrency(invoice.total).

Scripts in HTML blocks

The HTML block has a dedicated toggle for running inline scripts. Select an HTML block, open the Settings tab, and enable Run scripts in editor.

When enabled, any <script> tags inside the HTML block’s content will execute during rendering. This is useful for block-specific logic that doesn’t belong in the global Custom JS editor.

<div id="chart-container"></div>
<script>
  // This runs only if "Run scripts in editor" is enabled
  const ctx = document.getElementById('chart-container');
  // ... render a chart or perform block-specific logic
</script>

External JavaScript libraries

For third-party libraries, use the External Assets manager. Click the External Assets button in the toolbar, then add the CDN URL of the JavaScript library you want to include.

External scripts are loaded before the template renders, so their global variables and functions are available to both the Custom JS editor and HTML block scripts.

Common examples:

Difference from Code Templates

In Code Templates, JavaScript is embedded directly in <script> tags within the HTML. The builder separates JavaScript into three distinct locations:

• Global scripts go in the Custom JS editor (toolbar button) — runs for the entire template
• Block-specific scripts go inside HTML blocks with the “Run scripts in editor” toggle enabled
• External libraries are loaded through the External Assets manager

This separation keeps global logic, per-block behavior, and third-party dependencies organized. For global formatting functions, use the Custom JS editor. For block-specific rendering (like charts), use an HTML block with scripts enabled. For libraries, use External Assets instead of manual <script src="..."> tags.

Related pages

• Custom CSS — global styling, per-element custom properties, and external CSS libraries

Frequently asked questions

How do I add custom JavaScript to a PDFMonkey builder template?

Click the Custom JS button in the builder toolbar to open the global JavaScript editor. Write your code and press Ctrl+Enter (Cmd+Enter on Mac) to save. Functions assigned to window are available in bindings and HTML blocks throughout the template.

Can I use external JavaScript libraries in PDFMonkey templates?

Yes. Click the External Assets button in the toolbar and add the CDN URL of the library you want to include. External scripts load before the template renders, so their functions are available to both the Custom JS editor and HTML block scripts.

How do I run inline scripts in an HTML block in the PDFMonkey builder?

Select the HTML block, open the Settings tab, and enable the “Run scripts in editor” toggle. Any script tags inside that block will then execute during rendering. Without this toggle, scripts only run during PDF generation, not in the editor preview.