PayloadHosting is a JavaScript library that enables custom HTML interfaces (both full custom HTML templates and inline HTML field editors) to interact with Template Builder and Viz Pilot Edge. It provides access to the VDF (Viz Data Format) payload of a template, allowing you to create specialized UIs to edit template data, such as headlines, names and images for a news story.

This section contains the following pages:

Note: The full API documentation is distributed with Template Builder under the location: /app/templatebuilder/js/@vizrt/payloadhosting/dist/docs/index.html.

Use PayloadHosting with NPM

The payloadhosting module is available as an NPM package, making it easier to integrate into modern JavaScript and TypeScript projects. This method simplifies dependency management, improves development workflows, and enhances compatibility with build tools.

  • Install the package using npm install "c:\...\js\@vizrt\payloadhosting".

  • Module-Based Import: Use ES module syntax for better structure:

    import { payloadhosting } from "@vizrt/payloadhosting";

  • Type Support: The package includes payloadhosting.d.ts, enabling IDE autocompletion and type checking.

  • Maintainability: Updates and version control are handled via package.json.

  • Integration: Works well with modern JavaScript tooling such as Webpack, Vite, and Rollup.

Manually Include PayloadHosting in HTML

Note: payloadhosting.jscan be found under the ./js folder of the Template Builder installation path.

For projects that do not use NPM, payloadhosting.js can be included manually in an HTML file by adding a script tag:

<!doctype html>
<html>
<head>
<script src="./payloadhosting.js"></script>
</head>
<body>...</body>
</html>

This approach ensures window.vizrt.payloadhosting is globally available to use in your scripts.