​
Canvas Templates

Before you can create branded, globally distributed content, you need to create a template. A template is a reusable “blueprint” for content, to be hydrated and rendered with data at key points in your application.

Some use cases may be:

  • Branded content about a specific product, with true traceability or conformance information injected into the content on a per instance or batch basis.
  • Digital Product Passports, with dynamic content that can be updated as the product moves through the supply chain.

​
Creating a Canvas Template

Create a canvas template with a JSON schema that defines the data that will be injected into the template. As well as the HTML template that will be rendered.

import { CanvasClient } from '@truststack/canvas';

const client = new CanvasClient();

const canvas = await client.createTemplate({
    name: 'Product Passport',
    content: `<html>
        <h1>Product Passport ${name}</h1>
        <p>Description: ${description}</p>
    </html>`,
    schema: {
        type: 'object',
        properties: {
            name: { type: 'string' },
            description: { type: 'string' }
        }
    }
});

console.log(canvas);

{
    "id": "abc-123",
    "name": "Product Passport",
    "content": "<html><h1>Product Passport ${name}</h1><p>Description: ${description}</p></html>",
    "schema": {
        "type": "object",
        "properties": {
            "name": { "type": "string" },
            "description": { "type": "string" }
        }
    }
    }

A template now exists, and can be rendered at any point in your application. To render a template, pass the ID as well as the runtime variables to create a CanvasTemplateInstance.

const instance = await client.createTemplateInstance({
    id: 'abc-123',
    variables: {
        name: 'Apple',
        description: 'A delicious apple'
    }
});

The resulting HTML rendered will be:

<html>
    <h1>Product Passport Apple</h1>
    <p>Description: A delicious apple</p>
</html>

This will now be globally distributed, publicly available, and visible at https://cdn.canvas.truststack.dev/abc-123.

​
Get going!

Use your own branding, create a template, and start issuing rendered content on behalf of your customers.

​
Canvas Templates

Before you can create branded, globally distributed content, you need to create a template. A template is a reusable “blueprint” for content, to be hydrated and rendered with data at key points in your application.

Some use cases may be:

  • Branded content about a specific product, with true traceability or conformance information injected into the content on a per instance or batch basis.
  • Digital Product Passports, with dynamic content that can be updated as the product moves through the supply chain.

​
Creating a Canvas Template

Create a canvas template with a JSON schema that defines the data that will be injected into the template. As well as the HTML template that will be rendered.

import { CanvasClient } from '@truststack/canvas';

const client = new CanvasClient();

const canvas = await client.createTemplate({
    name: 'Product Passport',
    content: `<html>
        <h1>Product Passport ${name}</h1>
        <p>Description: ${description}</p>
    </html>`,
    schema: {
        type: 'object',
        properties: {
            name: { type: 'string' },
            description: { type: 'string' }
        }
    }
});

console.log(canvas);

{
    "id": "abc-123",
    "name": "Product Passport",
    "content": "<html><h1>Product Passport ${name}</h1><p>Description: ${description}</p></html>",
    "schema": {
        "type": "object",
        "properties": {
            "name": { "type": "string" },
            "description": { "type": "string" }
        }
    }
    }

A template now exists, and can be rendered at any point in your application. To render a template, pass the ID as well as the runtime variables to create a CanvasTemplateInstance.

const instance = await client.createTemplateInstance({
    id: 'abc-123',
    variables: {
        name: 'Apple',
        description: 'A delicious apple'
    }
});

The resulting HTML rendered will be:

<html>
    <h1>Product Passport Apple</h1>
    <p>Description: A delicious apple</p>
</html>

This will now be globally distributed, publicly available, and visible at https://cdn.canvas.truststack.dev/abc-123.

​
Get going!

Use your own branding, create a template, and start issuing rendered content on behalf of your customers.