KPdfViewer: render the active PDF page in Compose UI

Render the active PDF page in your Compose UI using KPdfViewer. Reads zoom and page state from KPdfViewerState and displays a Material3-styled card surface.

KPdfViewer is the primary composable for displaying a PDF document. It reads the current rendered page and zoom level from a KPdfViewerState instance and paints that page inside a rounded Card surface styled with your app’s MaterialTheme colors. You pass in state — KPdfViewer handles everything else.

Signature

@Composable
fun KPdfViewer(
    state: KPdfViewerState,
    modifier: Modifier = Modifier,
)

Parameters

state · KPdfViewerState · required

The shared state holder for the viewer. KPdfViewer collects state.renderedPage as a Compose state and recomposes whenever the active page or zoom level changes. Create this with rememberPdfViewerState in a Composable context.

modifier · Modifier · default: "Modifier"

Standard Compose modifier applied to the outer Card. Use it to set the size, padding, or weight of the viewer surface.

Visual behavior

KPdfViewer wraps the page content in a Material3 Card with:

• Shape — RoundedCornerShape(24.dp) on all corners.
• Border — 1 dp stroke using MaterialTheme.colorScheme.outlineVariant.
• Background — MaterialTheme.colorScheme.surface.

The inner KPdfContent composable fills the card completely and delegates gesture handling, panning, and zoom rendering to the state.

KPdfViewer does not control navigation or zoom directly. Call methods such as state.nextPage(), state.zoomIn(), or state.goToPage(index) on KPdfViewerState to drive the viewer.

Minimal usage

Create a KPdfViewerState with rememberPdfViewerState, then pass it to KPdfViewer.

@Composable
fun PdfScreen(source: KPdfSource) {
    val viewerState = rememberPdfViewerState(source = source)

    KPdfViewer(state = viewerState)
}

Usage with a modifier

Use modifier to size KPdfViewer within a layout. The example below makes the viewer fill all remaining vertical space inside a Column.

@Composable
fun PdfScreen(source: KPdfSource) {
    val viewerState = rememberPdfViewerState(source = source)

    Column(modifier = Modifier.fillMaxSize()) {
        KPdfViewer(
            state = viewerState,
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f),
        )
    }
}

Always pass a concrete size or weight to KPdfViewer. Without a constrained height, the outer Card has unbounded height and the page content may not render correctly.

Connecting to a toolbar and thumbnail strip

KPdfViewer, KPdfViewerToolbar, and KPdfThumbnailStrip all share the same KPdfViewerState. Pass the same instance to each composable — no additional wiring is required.

@Composable
fun FullPdfScreen(source: KPdfSource) {
    val viewerState = rememberPdfViewerState(source = source)
    var thumbnailsVisible by remember { mutableStateOf(true) }

    Column(modifier = Modifier.fillMaxSize()) {
        KPdfViewerToolbar(
            state = viewerState,
            isThumbnailStripVisible = thumbnailsVisible,
            onThumbnailToggle = { thumbnailsVisible = it },
            modifier = Modifier.fillMaxWidth().padding(12.dp),
        )

        KPdfViewer(
            state = viewerState,
            modifier = Modifier.fillMaxWidth().weight(1f),
        )

        if (thumbnailsVisible) {
            KPdfThumbnailStrip(
                state = viewerState,
                modifier = Modifier.fillMaxWidth().height(172.dp),
            )
        }
    }
}