Screenshot Configuration

Render Types

Appzi supports multiple screenshot rendering strategies:

Type	Description	Best For
server	Server-side rendering (default)	Public sites, best quality
client	Browser canvas capture	Localhost, private domains, Canvas/WebGL
auto	Auto-select based on device	General use
none	Disable screenshots	Performance-critical pages

window.appziSettings = {
  render: {
    type: "client", // "server" | "client" | "auto" | "none"
  },
};

Default Renderer (Server)

Appzi’s default screenshot renderer captures your page by re-rendering it on our servers. This provides high-quality screenshots with excellent performance in most cases.

When to use:

• Your site is publicly accessible on the internet
• All assets (images, fonts, CSS) are publicly available
• You want the best rendering quality

Limitations:

• Requires all page assets to be publicly accessible
• Cannot capture Canvas or WebGL content
• Does not work for localhost or private domains

Client-Side Renderer

The client-side renderer captures screenshots directly in the user’s browser using html2canvas. This solves accessibility issues but has different trade-offs.

When to use:

• Your site is on localhost or a private domain
• Your assets are not publicly accessible
• You need to capture Canvas or WebGL elements

Limitations:

• May have reduced rendering quality for complex layouts
• All html2canvas limitations apply
• Screenshots generated on user’s device (performance varies)

Enable the client-side renderer

window.appziSettings = {
  render: {
    type: "client",
  },
};

This mode uses html2canvas under the hood.

Debug Mode

Enable debug mode to troubleshoot screenshot issues:

window.appziSettings = {
  render: {
    type: "client",
    debug: true,
  },
};

When enabled, intermediate images (tmp.png, merged.png) are downloaded during capture, showing each step of the process.

Capture Specific Elements

Use the nodes option to capture only specific DOM elements:

window.appziSettings = {
  render: {
    type: "client",
    nodes: ["#main-content", ".sidebar"],
  },
};

Or provide a function for dynamic selection:

window.appziSettings = {
  render: {
    type: "client",
    nodes: () => Array.from(document.querySelectorAll(".capture-area")),
  },
};

Canvas/WebGL Capture

html2canvas cannot render Canvas or WebGL content. Use beforeMultipartJoin to capture it manually:

window.appziSettings = {
  render: {
    type: "client",
    beforeMultipartJoin: (parts) => {
      const canvas = document.querySelector("canvas");
      const rect = canvas.getBoundingClientRect();
      return [
        {
          imgSrc: canvas.toDataURL("image/png"),
          position: {
            x: rect.left + window.scrollX,
            y: rect.top + window.scrollY,
            width: rect.width,
            height: rect.height,
          },
        },
        ...parts,
      ];
    },
  },
};

The hook receives an array of image parts and returns a modified array. Each part has imgSrc (base64) and optional position (x, y, width, height).

Exclude Elements

To exclude specific elements from being captured in screenshots, add the appzi-screenshot-exclude attribute to the HTML element.

Example:

<div>i will be rendered</div>
<div appzi-screenshot-exclude="true">will be masked</div>
<input
  appzi-screenshot-exclude="true"
  type="text"
  value="i will also be masked"
/>