Product Passport ${name}

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.truststack.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Quickly get setup using Canvas.

# 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.

```typescript theme={null}
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);
```

```json theme={null}
{
    "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`.

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

The resulting HTML rendered will be:

```html theme={null}
<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.