---
title: PrintPreview
description: |2-

    A component that displays a preview of a printable document. 
    > Note:
    > This component must be a direct child of the Screen component and cannot be nested inside any other component.
api_version: 2025-01
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-01/components/printpreview
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-01/components/printpreview.md
---

# Print​Previewcomponent

A component that displays a preview of a printable document.

Note

This component must be a direct child of the Screen component and cannot be nested inside any other component.

## PrintPreview

Renders a preview of a printable document. This component must a direct child of the Screen component.

* src

  string

  required

  The source to print.

  The src must be either:

  * A relative path that will be appended to your app's [application\_url](https://shopify.dev/docs/apps/build/cli-for-apps/app-configuration#application_url)
  * A full URL to your app's backend that will be used to return the document

  Supported document types:

  * HTML documents (recommended for best printing experience)
  * Text files
  * Image files (PNG, JPEG, etc.)
  * PDF files

### Examples

* #### Basic PrintPreview

  ##### Description

  Basic usage with relative and full URLs:

  ##### 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);
    },
  );
  ```

## Preview

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

## Related

[Handle print operations - Print API](https://shopify.dev/api/pos-ui-extensions/apis/print-api)

[Learn how to implement printing - Build a Print Extension](https://shopify.dev/docs/api/pos-ui-extensions/examples/print-extension)