Build your first page

This guide adds a paginated preview to an existing React app. When you finish, the same component will show your HTML as A4 pages and expose print and EPUB actions.

Before you begin

You need React 18 or later and a client-side browser environment. Imposia does not render pages in Node.js or during server-side rendering.

1. Install the React package

pnpm add @imposia/react react react-dom

Import the package stylesheet once in the component or in your application's client entry file.

2. Render a page document

import { ImposiaPageViewer, type ImposiaPageViewerHandle } from "@imposia/react";
import { useRef } from "react";
import "@imposia/react/styles.css";

export function Preview() {
  const viewer = useRef<ImposiaPageViewerHandle>(null);

  return (
    <>
      <ImposiaPageViewer
        ref={viewer}
        source={{ html: "<article><h1>Hello</h1><p>Browser-native pages.</p></article>" }}
        documentOptions={{ page: { size: "A4", margin: "18mm" } }}
      />
      <button type="button" onClick={() => void viewer.current?.print()}>
        Print
      </button>
      <button
        type="button"
        onClick={() =>
          void viewer.current?.exportEpub({
            metadata: { title: "Hello", language: "en", identifier: "urn:example:hello" },
          })
        }
      >
        Export EPUB
      </button>
    </>
  );
}

source.html is the content to paginate. documentOptions.page sets the page size and margin. The handle always points to the latest page document that finished successfully.

3. Check the result

Open the component in a browser and confirm that the HTML appears as an A4 page.

• Print opens the browser's print flow for the page currently shown in the Viewer.
• Export EPUB returns a reflowable EPUB 3.3 Blob. The example calls the export method; connect the returned Blob to your app's download or storage flow.

If you update source, Imposia keeps the current page visible until the next version is ready. Read How preview and output stay consistent before adding asset loading or production export controls.

Use the API reference when you need every React handle method, Core controller option, Publication reader action, or Viewer lifecycle constraint.