The Apryse Fall 2026 release is here!
Ctrlk
QuickstartContact SalesSign In
For the complete documentation index, see llms.txt. This page is also available as Markdown.
MendixAnnotationsUIRedactionEditing

Integrate WebViewer into Mendix

This is a sample of WebViewer integration into a Mendix low-code app.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

WebViewer.tsx
import { Component, ReactNode, createElement } from "react";
import PDFViewer from "./components/PDFViewer";

import { WebViewerContainerProps } from "../typings/WebViewerProps";

import "./ui/WebViewer.css";

export default class WebViewer extends Component<WebViewerContainerProps> {
    render(): ReactNode {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        const mx = window.mx;
        const viewerProps = {
            ...this.props,
            annotationUser: this.props.annotationUser?.value,
            isVisible: this.props.isVisible?.value,
            mx
        };
        return <PDFViewer {...viewerProps} />;
    }
}

View the full sample on GitHub