React DOCX Viewer: echte Seiten, Kommentare, Änderungen

Jemand lädt ein Angebot als Word-Datei hoch, und deine App soll es so zeigen, wie es in Word aussieht: Seiten, der Briefkopf in der Kopfzeile, Seitenzahlen in der Fußzeile und die Kommentare der Person, die es geprüft hat. Ein Download-Link oder reiner Text verliert all das. Ein React DOCX Viewer muss die Seiten aus dem XML der Datei neu aufbauen. Schwierig sind dabei die Seitenumbrüche, Felder wie Seitenzahlen und die Markierungen aus der Überarbeitung. Die Beispiele nutzen den DOCX Viewer von Wingo UI, der Bibliothek, die wir bauen. Wir sind also nicht neutral; Fakten von außen verlinken auf ihre Quellen.

Welche Wege gibt es, ein Word-Dokument in React anzuzeigen?

Um ein Word-Dokument in React anzuzeigen, kannst du den Online-Viewer von Microsoft einbetten, die Datei im Browser mit Mammoth oder docx-preview lesen, ein kommerzielles SDK lizenzieren oder die Datei vorher in ein PDF umwandeln. Die fünf Zeilen unten unterscheiden sich darin, wohin die Datei geht und wie nah das Ergebnis an Word herankommt. Die Fakten stammen von der jeweiligen Projektseite, geprüft am 16. Oktober 2026.

Die iframe-Zeile ist die, die Teams erst später überrascht: Der Dienst von Microsoft holt die Datei selbst ab. Eine private Datei hinter deinem Login kann diesen Weg also nicht nehmen. Für private Dokumente sind die Parser im Browser die realistische Wahl. Mammoth passt besser, wenn du den Text in deiner eigenen Typografie willst (ein Artikel im Hilfe-Center, ein Blog-Import) und dir die Seite egal ist.

Für eine schnelle React DOCX Preview liefert dir docx-preview allein gerendertes HTML mit einem Aufruf. Setz die Optionen selbst: Standardmäßig ignoriert die Bibliothek die Seitenumbrüche, die Word zuletzt gerendert hat (ignoreLastRenderedPageBreak: true), und lässt Kommentare und Änderungen weg.

import { renderAsync } from "docx-preview"

// file: ein Blob oder ArrayBuffer, container: ein leeres div
await renderAsync(file, container, undefined, {
  ignoreLastRenderedPageBreak: false,
  renderComments: true,
  renderChanges: true,
})

Der DOCX Viewer startet docx-preview mit genau diesen Flags und ergänzt, was die Bibliothek weglässt. Laut README ist ein Seitenumbruch in Echtzeit nicht implementiert, also misst der Viewer jede Seite und teilt eine, die zu lang wird. Er füllt außerdem die Felder PAGE und NUMPAGES aus, die docx-preview zusammen mit allen anderen Feldern verwirft. So bleibt „Seite 3 von 12“ in einer Fußzeile erhalten. Dazu kommen Seiten-Thumbnails, eine Gliederung aus den Überschriften, eine Suche und Karten für Kommentare und Änderungen.

Wie baue ich einen React DOCX Viewer in eine Next.js-App ein?

Installier die Komponente mit der CLI und gib ihr eine URL. Die CLI bringt docx-preview und die Teile von Wingo UI mit, auf denen der Viewer aufbaut, etwa Button, Dropdown Menu, Popover und Tooltip:

npx wingo-ui@latest add docx-viewer

Die Komponente ist eine Client-Komponente, eine Server-Seite kann sie also direkt rendern. src nimmt eine URL vom selben Origin, eine URL mit CORS oder eine blob:-URL:

// app/proposals/[id]/page.tsx
import { DocxViewer } from "@/components/ui/docx-viewer"

export default function ProposalPage() {
  return (
    <DocxViewer
      src="/files/riverside-proposal.docx"
      fileName="Angebot Renovierung Riverside"
      height="80dvh"
    />
  )
}

docx-preview und JSZip (etwa 190 KB) laden mit dem ersten Viewer auf der Seite und nicht mit dem Bundle deiner Route. Eine Seite, die nur manchmal ein Dokument zeigt, zahlt den Parser also nicht vorab. defaultZoom="automatic" (der Standard) passt die Seite an die Breite an, höchstens bis 100 %. So öffnet sich eine Seite nie riesig auf einem großen Monitor oder abgeschnitten auf dem Smartphone.

Für eine Datei, die jemand auf dem eigenen Gerät auswählt, brauchst du keinen Upload. Das ⋯-Menü der Toolbar öffnet eine andere .docx, eine auf den Viewer gezogene Datei öffnet sich ebenfalls, und onDocxUpload gibt dir das File, wenn du es speichern willst. In Ansichten, die nur zum Lesen da sind, schaltest du das mit showUpload={false} ab.

Kann ein React DOCX Viewer Kommentare und nachverfolgte Änderungen zeigen?

Ja: Der DOCX Viewer zeigt Kommentare standardmäßig und nachverfolgte Änderungen, wenn du sie einschaltest. Kommentare (defaultCommentsVisible, true) stehen als Karten in einer Spalte neben den Seiten, die kommentierte Stelle ist hervorgehoben. Nachverfolgte Änderungen sind standardmäßig aus (defaultChangesVisible={false}), das Dokument liest sich also, als wären alle Änderungen angenommen. Schaltest du sie ein, sind Einfügungen grün unterstrichen und Löschungen rot durchgestrichen, jeweils mit Autor und Datum.

Probier es unten aus: Das Beispielangebot öffnet sich mit sichtbaren Änderungen. Klick auf eine Kommentarkarte oder den hervorgehobenen Text, um ihn auszuwählen, und blende dann Kommentare oder Änderungen mit den Schaltern in der Toolbar aus.

onAnnotationClick meldet den Kommentar oder die Änderung, die jemand auswählt. onDocumentLoadSuccess gibt dir alle gleich zu Beginn (annotations, jeweils mit kind, author, date, text, anchorText und pageNumber). Das reicht für eine Review-Checkliste neben dem Dokument.

Ein Inhaltsverzeichnis aus der Gliederung bauen

Derselbe Callback liefert outline, die Überschriften des Dokuments mit Ebene und Seite. Kombinier das mit scrollToHeading aus der Ref und mit onActivePageChange, und du bekommst eine Liste der Abschnitte, die durch das Dokument springt und den sichtbaren Abschnitt markiert:

"use client"

import { useRef, useState } from "react"
import { DocxViewer, type DocxViewerHandle, type DocxViewerHeading } from "@/components/ui/docx-viewer"

export function ProposalWithOutline() {
  const viewer = useRef<DocxViewerHandle>(null)
  const [outline, setOutline] = useState<DocxViewerHeading[]>([])
  const [page, setPage] = useState(1)
  const current = outline.filter((heading) => heading.pageNumber <= page).at(-1)

  return (
    <div className="flex flex-col gap-4 md:flex-row">
      <nav aria-label="Abschnitte" className="flex flex-col gap-1 md:w-56">
        {outline.map((heading) => (
          <button
            key={heading.id}
            type="button"
            aria-current={heading.id === current?.id ? "location" : undefined}
            onClick={() => viewer.current?.scrollToHeading(heading.id, { behavior: "smooth" })}
            className="h-11 rounded-[10px] px-3 text-start text-sm hover:bg-foreground/5 aria-[current=location]:bg-foreground/10"
          >
            {heading.title} <span className="text-muted-foreground">S. {heading.pageNumber}</span>
          </button>
        ))}
      </nav>
      <DocxViewer
        ref={viewer}
        src="/files/riverside-proposal.docx"
        height={560}
        showThumbnails={false}
        className="min-w-0 flex-1"
        onDocumentLoadSuccess={(doc) => setOutline(doc.outline)}
        onActivePageChange={setPage}
      />
    </div>
  )
}

Zwei weitere Props solltest du kennen. toolbarActions setzt deine eigenen Buttons ans Ende der Toolbar (Freigeben, Teilen, Zur Unterschrift senden). renderPageOverlay zeichnet über jede Seite, mit Seitengröße und Skalierung beim aktuellen Zoom. Ein Stempel oder ein Unterschriftsfeld, das du in Prozent platzierst, bleibt so beim Zoomen an seiner Stelle.

Wie funktioniert ein DOCX Viewer auf dem Smartphone?

Der DOCX Viewer passt sich an seine eigene Breite an, gemessen mit einem ResizeObserver. In einem schmalen Seitenpanel verhält er sich also genauso wie auf dem Smartphone. Unter 720px Breite wandern die Schalter für Kommentare, Änderungen und dunkle Seiten sowie Download ins ⋯-Menü. Unter 520px startet die Thumbnail-Leiste geschlossen und gleitet beim Öffnen über die Seiten, und unter 440px landen auch die Zoomstufen im Menü. Wenn die Seite keinen Platz für die Kommentarspalte lässt, werden Kommentare zu Markierungen am Seitenrand. Sie öffnen die Karte in einem Popover, auf dem Smartphone in einem Bottom Sheet. Pinch zoomt um deine Finger herum, und Strg oder ⌘ plus Scrollen macht dasselbe mit der Maus.

Wann brauchst du stattdessen einen React DOCX Editor?

Du brauchst einen React DOCX Editor, wenn Leute den Text ändern und eine Word-Datei zurückgeben müssen. Ein Viewer reicht, wenn sie die Datei lesen, freigeben oder woanders besprechen. Der DOCX Editor öffnet dieselbe Art von Datei als echte Seiten und speichert eine .docx:

"use client"

import { DocxEditor } from "@/components/ui/docx-editor"

export function AgreementEditor() {
  return (
    <DocxEditor
      src="/files/northwind-supply-agreement.docx"
      author="Emma Carter"
      defaultSuggesting
      height="80dvh"
      onSave={async (blob, { fileName }) => {
        const body = new FormData()
        body.append("file", blob, fileName)
        await fetch("/api/documents", { method: "POST", body })
      }}
    />
  )
}

onSave zeigt einen Speichern-Button und belegt Strg oder ⌘+S. Gibst du ein Promise zurück, zeigt der Editor erst „Wird gespeichert“, dann „Gespeichert“ oder den Fehler. defaultSuggesting öffnet im Modus „Vorschlagen“: Jede Bearbeitung wird zu einer nachverfolgten Änderung unter author, und Prüfende nehmen sie über die Änderungskarten an oder lehnen sie ab. Installier ihn mit npx wingo-ui@latest add docx-editor. Er baut auf ProseMirror und der Layout-Engine @eigenpal/docx-editor-core (Apache-2.0) auf; beides lädt wie der Parser des Viewers erst bei Bedarf.

Markier unten etwas Text und füg einen Kommentar hinzu, oder stell das Modus-Menü auf Vorschlagen und tipp los: Die Bearbeitung erscheint als nachverfolgte Änderung, die du annehmen oder ablehnen kannst.

Eine Grenze solltest du einplanen: Kopf- und Fußzeilen lassen sich im Editor nicht bearbeiten. Ihre ursprünglichen Teile gehen unverändert in die gespeicherte Datei zurück. Briefköpfe und Felder für Seitenzahlen bleiben so intakt, aber eine Änderung am Text der Fußzeile braucht weiterhin Word.

Wann solltest du die Word-Datei stattdessen in ein PDF umwandeln?

Wandle sie in ein PDF um, wenn jede Seite für alle an derselben Stelle umbrechen muss, denn ein Browser baut das Layout einer .docx neu auf, statt es aus der Datei zu lesen. Eine .docx-Datei speichert für die meisten Seiten nicht, wo Word umbricht; Word berechnet das aus den installierten Schriften und seiner eigenen Layout-Engine. docx-preview bricht Seiten an expliziten Seitenumbrüchen, Abschnittswechseln und den zuletzt von Word gerenderten Umbrüchen um, und der DOCX Viewer teilt eine Seite, die dann noch zu lang ist, an ihren Absätzen und Tabellenzeilen. Das kommt nah heran, aber eine fehlende Schrift oder ein schwebendes Textfeld kann trotzdem eine Zeile auf die nächste Seite schieben.

Wandle in ein PDF um, wenn dieser Unterschied zählt:

• Unterschriebene oder rechtliche Dokumente, bei denen Seite 4 für alle Seite 4 sein muss.
• Druck und Archive, wenn die Datei fertig ist und niemand sie mehr bearbeitet.
• Komplexe Layouts: schwebende Formen, Textfelder und mehrspaltige Designs, die HTML anders setzt.
• Alte .doc-Dateien, die die Parser im Browser nicht lesen.

LibreOffice wandelt auf dem Server über die Kommandozeile um (Startparameter (opens in a new tab)):

soffice --headless --convert-to pdf --outdir ./converted contract.docx

Zeig das Ergebnis dann im PDF Viewer. Er hat eine ähnliche Toolbar, Thumbnails und eine Suche, dazu Markierungen mit Notizen, die als echte PDF-Annotationen exportiert werden (unser Guide zum React PDF Viewer zeigt ihn im Detail). Ein häufiges Setup behält beides: die .docx im DOCX Viewer, solange ein Dokument geprüft wird, und das PDF, sobald es unterschrieben ist. Präsentationen folgen derselben Logik mit dem PPTX Viewer.

Was geht schief, wenn du DOCX-Dateien im Browser renderst?

Plan vor dem Launch vier Dinge ein: Dateien von anderen Origins, fehlende Schriften, sehr lange Dokumente und ungeprüfte Uploads.

• CORS. Eine Datei auf einem anderen Origin braucht Access-Control-Allow-Origin, oder du holst sie auf deinem Server und lieferst sie von deiner Domain aus. Für eine Datei im Speicher gibt dir URL.createObjectURL(file) eine blob:-URL, die du als src übergibst.
• Schriften. Fehlt Calibri auf dem Gerät, fällt der Text auf eine ähnliche generische Schrift zurück, und Zeilen brechen etwas anders um. Der Viewer behält Schriften, die in die Datei eingebettet sind. Der Editor hat das Prop webFonts, das metrisch kompatible Schriften (Carlito für Calibri, Caladea für Cambria) von Google Fonts lädt. Es ist standardmäßig aus, es gibt also keine Anfragen an Dritte, solange du es nicht einschaltest.
• Lange Dokumente. Bei mehr als 24 Seiten setzt der Viewer content-visibility: auto auf jede Seite, der Browser überspringt also Layout und Paint für Seiten außerhalb des Bildschirms. Die Suche deckt trotzdem die ganze Datei ab, denn sie indexiert den Text und nicht das, was gezeichnet wird.
• Uploads. Wenn Leute dir die Datei zuerst schicken, prüf Typ und Größe, bevor du sie speicherst. Unser Guide zum React File Upload beschreibt diesen Ablauf, und die Komponente File Upload übernimmt Auswahl und Fortschritt.

Wie geht es weiter?

Installier den Viewer mit npx wingo-ui@latest add docx-viewer und setz src auf eine deiner eigenen Word-Dateien, am besten eine mit Tabellen, einer Kopfzeile und ein paar Kommentaren, denn genau dort unterscheiden sich Renderer. DOCX Viewer, DOCX Editor und PDF Viewer gehören zu Wingo UI Pro; was enthalten ist, steht unter Preise. Tabellenkalkulationen werfen dieselben Fragen auf, die der Guide zum React Excel Viewer beantwortet. Mehr findest du in den Komponenten-Guides, oder du startest mit dem Guide zu React-Formularkomponenten, dem Pillar-Artikel dieser Kategorie.

Häufige Fragen

Wie zeige ich eine .docx-Datei in React ohne Server an?

Lies sie im Browser mit einer Bibliothek wie docx-preview, die das ZIP öffnet und das Dokument als HTML rendert. Der DOCX Viewer packt das in eine Komponente: Gib als src eine URL vom selben Origin, eine URL mit CORS oder eine blob:-URL an, und die Datei verlässt das Gerät nie.

Kann ein React DOCX Viewer Kommentare und nachverfolgte Änderungen zeigen?

docx-preview kann beides rendern, laut README ist beides aber experimentell und standardmäßig deaktiviert. Der DOCX Viewer schaltet beides ein: Kommentare erscheinen standardmäßig als Karten neben den Seiten, nachverfolgte Änderungen (Einfügungen in Grün, Löschungen in Rot), sobald du ihren Schalter in der Toolbar umlegst oder defaultChangesVisible setzt.

Warum brechen Word-Seiten im Browser anders um?

Eine .docx-Datei speichert für die meisten Seiten nicht, wo Word umbricht; Word berechnet das beim Rendern aus Schriften und Layout. docx-preview bricht nur an expliziten Seitenumbrüchen, Abschnittswechseln und den Umbrüchen, die Word zuletzt gerendert hat. Deshalb teilt der Viewer zusätzlich jede zu lange Seite an ihren Absätzen und Tabellenzeilen.

Kann React alte .doc-Dateien rendern?

Mit diesen Werkzeugen nicht im Browser. Der DOCX Viewer und docx-preview lesen nur das Format .docx (Office Open XML); wandle .doc-Dateien vorher auf dem Server um, zum Beispiel mit LibreOffice.

Sollte ich Word-Dokumente zum Anzeigen in PDF umwandeln?

Wandle sie um, wenn das Layout auf jedem Gerät exakt gleich sein muss: unterschriebene oder rechtliche Dokumente, Druck, Archive oder Dateien mit komplexen schwebenden Layouts. Behalte die .docx, wenn Leute sie kommentieren, prüfen oder bearbeiten, denn ein PDF verliert die bearbeitbare Struktur.