---
title: PrintPreview
description: >-
  The `PrintPreview` component displays a preview of printable content from a
  specified source URL. Use it to show users what will be printed before
  triggering the actual print operation.


  `PrintPreview` works in conjunction with the Print API to provide complete
  print functionality from preview to execution.


  Supported document types:


  - **HTML documents** (`.html`, `.htm`) - Best printing experience with full
  CSS styling, embedded images, and complex layouts. Use for receipts, invoices,
  and formatted reports.


  - **Text files** (`.txt`, `.csv`) - Plain text with basic content and tabular
  data support. Use for simple receipts and data exports.


  - **Image files** (`.png`, `.jpg`, `.jpeg`, `.gif`, `.bmp`, `.webp`) - Common
  web formats with format-specific optimizations. Use for logos, charts, QR
  codes, and barcodes.


  - **PDF files** (`.pdf`) - Behavior varies by platform: prints directly on
  iOS/desktop, but downloads to external viewer on Android. Use for complex
  documents and compliance requirements.


  [Learn how to build a print extension in
  POS](/docs/apps/build/pos/build-print-extension).
api_version: 2025-01
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/navigation-and-content/printpreview
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/navigation-and-content/printpreview.md
---

# Print​Preview

The `PrintPreview` component displays a preview of printable content from a specified source URL. Use it to show users what will be printed before triggering the actual print operation.

`PrintPreview` works in conjunction with the Print API to provide complete print functionality from preview to execution.

Supported document types:

* **HTML documents** (`.html`, `.htm`) - Best printing experience with full CSS styling, embedded images, and complex layouts. Use for receipts, invoices, and formatted reports.

* **Text files** (`.txt`, `.csv`) - Plain text with basic content and tabular data support. Use for simple receipts and data exports.

* **Image files** (`.png`, `.jpg`, `.jpeg`, `.gif`, `.bmp`, `.webp`) - Common web formats with format-specific optimizations. Use for logos, charts, QR codes, and barcodes.

* **PDF files** (`.pdf`) - Behavior varies by platform: prints directly on iOS/desktop, but downloads to external viewer on Android. Use for complex documents and compliance requirements.

[Learn how to build a print extension in POS](https://shopify.dev/docs/apps/build/pos/build-print-extension).

Support

Targets (6)

### Supported targets

* [pos.​customer-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/targets/customer-details#customer-details-action-modal-)
* [pos.​draft-order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/targets/draft-order-details#draft-order-details-action-modal-)
* [pos.​home.​modal.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/targets/home-screen#home-screen-action-modal-)
* [pos.​order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/targets/order-details#order-details-action-modal-)
* [pos.​product-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/targets/product-details#product-details-action-modal-)
* [pos.​purchase.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/targets/post-purchase#post-purchase-action-modal-)

#### Use cases

* **Receipt previews:** Display receipt previews before printing to review transaction details.
* **Document previews:** Show custom document previews for reports or labels.
* **Print confirmation:** Provide print confirmation workflows to verify content accuracy.
* **Template previews:** Enable preview of different formatting options or templates.

## Examples

### Preview printable content

Display a preview of printable content before triggering the print operation. This example shows how to use PrintPreview with HTML documents, PDFs, images, or text files, supporting various document formats with proper rendering for receipts, invoices, and formatted reports.

## Preview printable content

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-01/print-preview-default.png)

### Examples

* #### Preview printable content

  ##### Description

  Display a preview of printable content before triggering the print operation. This example shows how to use PrintPreview with HTML documents, PDFs, images, or text files, supporting various document formats with proper rendering for receipts, invoices, and formatted reports.

  ##### React

  ```tsx
  import React from 'react';

  import {
    Screen,
    reactExtension,
    Button,
    PrintPreview,
    useApi,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const Modal = () => {
    const api = useApi<'pos.home.modal.render'>();

    return (
      <Screen name="Home" title="Home">
        <Button
          title="Print"
          onPress={() =>
            api.print.print('/documents/test-print')
          }
        />
        <PrintPreview src="/documents/test-print" />
      </Screen>
    );
  };

  export default reactExtension(
    'pos.home.modal.render',
    () => <Modal />,
  );
  ```

  ##### TS

  ```ts
  import {
    Button,
    PrintPreview,
    Screen,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.home.modal.render',
    (root, api) => {
      const homeScreen = root.createComponent(
        Screen,
        {
          name: 'Home',
          title: 'Home',
        },
      );

      const printButton = root.createComponent(
        Button,
        {
          title: 'Print',
          onPress: () =>
            api.print.print(
              '/documents/test-print',
            ),
        },
      );

      const printPreview = root.createComponent(
        PrintPreview,
        {
          src: '/documents/test-print',
        },
      );

      homeScreen.append(printPreview);
      homeScreen.append(printButton);

      root.append(homeScreen);
    },
  );
  ```

## Properties

Configure the following properties on the `PrintPreview` component. This component must be a direct child of the Screen component.

* src

  string

  required

  The source URL of the content to preview for printing. Must be either a relative path appended to your app's [`application_url`](https://shopify.dev/docs/apps/build/cli-for-apps/app-configuration) or a full URL to your app's backend that returns the document.

## Best practices

* **Design print-optimized content:** Structure your printable content with print-specific CSS media queries, appropriate page breaks, and formatting that works well on physical paper. Consider printer capabilities and paper sizes commonly used in POS environments.
* **Implement proper error handling:** Handle cases where the source URL is unavailable, the document format is unsupported, or network issues prevent content loading. Provide clear feedback to users when preview or printing fails.
* **Consider platform-specific limitations:** PDF files on Android devices require external applications for printing. Design your workflow to handle this gracefully, potentially offering alternative formats or clear instructions for Android users.
* **Optimize source URL management:** Use relative paths when possible for internal app resources to simplify URL management and improve performance. Reserve full URLs for external resources or when you need complete control over the endpoint.
* **Provide clear print workflows:** Combine `PrintPreview` with appropriate UI controls like print buttons, allowing users to review content before committing to print. Consider implementing print confirmation dialogs for important or expensive print operations.

## Limitations

* `PrintPreview` must be a direct child of the `Screen` component and can't be nested inside any other component—this structural requirement ensures proper preview rendering and print functionality.
* The component requires network access to fetch content from the specified source URL—offline functionality isn't supported for remote content.
* Content is displayed as-is from the source—real-time content modification or editing within the preview isn't supported.