---
title: "Generate Visual Documents with Templates as Source"
url: https://docs.catalyst.zoho.com/en/sdk/javascript/v1/smartbrowz/pdf-and-screenshot/docs-templates-source/
description: "This page describes the method to perform operations using the components in SmartBrowz Services."
last_updated: 2026-09-09T10:45:38Z
service: SmartBrowz
type: general
related_links:
  - name: "Catalyst SmartBrowz"
    url: /en/smartbrowz/
  - name: "PDF \u0026 Screenshot"
    url: /en/smartbrowz/help/pdfnscreenshot/introduction/
  - name: "Templates"
    url: /en/smartbrowz/help/templates/introduction/
  - name: "Java SDK Documentation"
    url: /en/sdk/java/v1/smartbrowz/generate-pdfnscreenshot/
  - name: "Python SDK Documentation"
    url: /en/sdk/python/v1/smartbrowz/generate-pdfnscreenshot/
  - name: "REST API Documentation"
    url: /en/api/code-reference/smartbrowz/generate-pdfnscreenshoturl/#PDF%26ScreenshotwithHTMLorURLasInput
repository:
  name: "Repository"
  url: https://github.com/catalystbyzoho/zcatalyst-sdk-js
---

# Generate Visual Documents with Templates as Source

> **Notes:**

* Ensure you have installed the [required package](https://docs.catalyst.zoho.com/en/sdk/javascript/v1/smartbrowz/overview/#prerequisites) to use this SDK method.

* Any browser action or operation that you code using the Browser Logic function, or any browser automation or web scraping task that you perform using any component of *Catalyst SmartBrowz* is at **your own risk**. We strongly recommend that you use the SmartBrowz components to perform operations on domains that permit the actions, or with proper approval.
Additionally, while Catalyst does provide a secure infrastructure to code your functions, any consequence of the logic you code using Catalyst functions is yours alone.

[Templates](https://docs.catalyst.zoho.com/en/smartbrowz/help/templates/introduction/) is a *Catalyst SmartBrowz* component that allows you to design custom HTML blueprints [using LiquidJS components](https://docs.catalyst.zoho.com/en/smartbrowz/help/templates/customize-templates/#using-liquidjs-to-customize-your-templates) to handle dynamic data.

Using the `generateFromTemplate()` SDK method you can generate the required visual document as per your requirement. The SDK method also allows you to implement multiple customization options including page orientation, size, [password protection](https://docs.catalyst.zoho.com/en/smartbrowz/help/templates/customize-templates/#password-protected-pdfs), and so much more. The required template is referred to using its Template ID.

The `smartbrowz` reference used in the code snippets below is the [component instance](https://docs.catalyst.zoho.com/en/sdk/javascript/v1/smartbrowz/create-smartbrowz-instance/) created to perform these operations.

```javascript
const result = await smartbrowz.generateFromTemplate("2075000000021001", {
  pdf_options: {
    display_header_footer: true,
    format: "A1",
    height: "100",
    width: "100",
    landscape: true,
    page_ranges: "1-2",
    scale: 1.0,
    password: "****123" // Add password after enabling the template password setting from the console
  },
  page_options: {
    css: { content: "body { font-size: 12px; }" },
    javascript_enabled: true,
    viewport: {
      height: 800,
      width: 600
    },
    device: "Blackberry PlayBook"
  },
  navigation_options: {
    timeout: 30000,
    wait_until: "domcontentloaded"
  },
  output_options: {
    output_type: "pdf"
  },
  template_data: {}
});
console.log("result::", result);
```