Screenshot Configuration

Default Renderer

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

To enable the client-side renderer, set the render type to "client" in your appziSettings:

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

This mode uses html2canvas under the hood. Keep in mind that all limitations of html2canvas apply here.

You can even capture canvas elements (including WebGL) by enabling this mode and stitching screenshots. If you’re interested in this setup, please 📧 reach out .

Exclude Fields

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"
/>