React PPTX Viewer: Folien, Notizen und Präsentationsmodus

Jemand lädt eine Vertriebspräsentation hoch, und deine App soll sie zeigen: die echten Folien mit ihren Farben und Diagrammen, eine Leiste mit Thumbnails und am besten auch die Sprechernotizen. Ein Download-Link schickt die Leute von der Seite weg, und ein PDF-Export verliert die Notizen und die bearbeitbare Datei. Ein React PPTX Viewer muss jede Folie aus dem XML in der .pptx neu aufbauen, also aus Layouts, Mastern, Theme-Farben, Schriften, Tabellen und Diagrammen. Dieser Guide stellt die Optionen vor und baut dann einen mit dem PowerPoint Viewer von Wingo UI, der Bibliothek, die wir bauen. Wir sind also nicht neutral; Fakten zu anderen Projekten verlinken auf ihre Quellen.

Welche Wege gibt es, eine PowerPoint-Datei in React anzuzeigen?

Realistisch gibt es vier Wege: den Online-Viewer von Microsoft in einem iframe, einen Open-Source-Parser, der im Browser läuft, ein kommerzielles Dokumenten-SDK oder eine Umwandlung in PDF, bevor überhaupt jemand die Datei ansieht. Sie unterscheiden sich vor allem darin, wohin die Datei geht. Die Fakten unten stammen von der jeweiligen Projektseite, geprüft am 5. November 2026.

Wer nach react doc viewer PPTX sucht, findet die Antwort schon in der ersten Zeile: @cyntler/react-doc-viewer reicht .ppt- und .pptx-Dateien an den Online-Viewer von Microsoft in einem iframe weiter. Der braucht eine öffentliche URL, eine private Präsentation hinter deinem Login kann diesen Weg also nicht nehmen. Für private Dateien sind die Parser im Browser die echte Wahl. Extend veröffentlicht auf Basis seines Pakets außerdem eine PPTX-Viewer-Komponente (opens in a new tab) im Stil von shadcn, mit virtualisierten Thumbnails, Zoom, Upload und Download; ihre Doku-Seite erwähnt weder Sprechernotizen noch einen Präsentationsmodus.

Der PowerPoint Viewer von Wingo UI geht denselben Weg im Browser, mit einem eigenen Parser. Er entpackt die Datei mit fflate, einer kleinen ZIP-Bibliothek, die erst mit der ersten Präsentation lädt und nicht mit dem Bundle deiner Route, und dekomprimiert große Teile in einem Worker. Dann liest er die Teile für Folie, Layout, Master und Theme und zeichnet Formen, Text, Bilder, Tabellen und Diagramme als HTML und SVG. Weil Text Text bleibt, kannst du ihn markieren, durchsuchen und mit einem Screenreader lesen. Das ist der Hauptunterschied zu einer Canvas-basierten PPTX Viewer JavaScript Bibliothek wie PptxViewJS.

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

Installier die Komponente mit der CLI. Sie bringt fflate, lucide-react und die Teile von Wingo UI mit, die der Viewer nutzt (Button, Dropdown Menu, Popover, Tooltip):

npx wingo-ui@latest add pptx-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/decks/[id]/page.tsx
import { PptxViewer } from "@/components/ui/pptx-viewer"

export default function DeckPage() {
  return (
    <PptxViewer
      src="/files/q3-business-review.pptx"
      fileName="Quartalsbericht Q3 2026.pptx"
      height="80dvh"
    />
  )
}

Dieses eine Element ist schon eine vollständige React PPTX Preview: eine Toolbar mit Foliennavigation, Zoom und Suche, eine Seitenleiste mit Thumbnails (ausgeblendete Folien sind abgedunkelt) und eine Spalte mit Folien, durch die du scrollst. Gezeichnet werden nur die Folien in der Nähe des sichtbaren Bereichs, so bleiben auch lange Präsentationen beim Scrollen flüssig. defaultZoom="automatic" passt die Folie an die Breite an, höchstens bis 100 %, und maxFileSize (standardmäßig 100 MB) lehnt größere Dateien schon vor dem Parsen ab und bietet stattdessen den Download an.

Probier es mit dem Beispiel-Quartalsbericht unten aus. Such nach „Midwest“: Treffer auf den Folien und in den Sprechernotizen zählen beide, und der Zähler springt mit Enter von einem zum nächsten.

Wählen Leute eine Präsentation auf ihrem eigenen Gerät aus, brauchst du keinen Upload. Das ⋯-Menü öffnet eine andere .pptx, eine auf den Viewer gezogene Datei öffnet sich ebenfalls, und onPresentationUpload gibt dir das File, wenn du es speichern willst. In Ansichten, die nur zum Lesen da sind, schaltest du das mit showUpload={false} ab.

Wie funktionieren Sprechernotizen und Präsentationsmodus?

Sprechernotizen liegen in eigenen Teilen der .pptx, einer pro Folie, und der Viewer liest sie als reinen Text. defaultNotesVisible öffnet die Notizen der aktuellen Folie unter ihr; der Schalter für die Sprechernotizen in der Toolbar blendet sie ein und aus und ist deaktiviert, wenn die Datei keine Notizen hat. Die Suche deckt auch die Notizen ab, und ein Treffer in den Notizen klappt sie auf.

Der Button „Present“ startet den Vollbildmodus, eine Folie nach der anderen, ohne die ausgeblendeten Folien. Klick, Leertaste, Pfeiltasten oder Bild auf und Bild ab blättern weiter; Pos1 und Ende springen zur ersten und letzten Folie; Escape beendet den Modus. Auf dem Smartphone wischst du nach links oder rechts, und Smartphones ohne Fullscreen API bekommen stattdessen ein festes Overlay.

Dieses Beispiel öffnet sich auf Folie 3 mit sichtbaren Notizen in der Einzelfolienansicht, so wie man eine Präsentation probt:

Eine Folienliste und einen Präsentieren-Button bauen

onPresentationLoadSuccess gibt dir für jede Folie Nummer, Titel, Notizen, Layoutnamen und ob sie ausgeblendet ist, dazu die Foliengröße und die Dokumenteigenschaften. Kombinier das mit der Ref und onSlideChange, und du baust dir dein eigenes Inhaltsverzeichnis neben dem Viewer:

"use client"

import { useRef, useState } from "react"
import { Button } from "@/components/ui/button"
import { PptxViewer, type PptxViewerHandle, type PptxViewerSlideInfo } from "@/components/ui/pptx-viewer"

export function DeckReview({ src }: { src: string }) {
  const viewer = useRef<PptxViewerHandle>(null)
  const [slides, setSlides] = useState<PptxViewerSlideInfo[]>([])
  const [current, setCurrent] = useState(1)

  return (
    <div className="flex flex-col gap-4 md:flex-row">
      <nav aria-label="Folien" className="flex flex-col gap-1 md:w-60">
        {slides.map((slide) => (
          <button
            key={slide.number}
            type="button"
            aria-current={slide.number === current ? "true" : undefined}
            onClick={() => viewer.current?.goToSlide(slide.number, { behavior: "smooth" })}
            className="h-11 truncate rounded-[10px] px-3 text-start text-sm hover:bg-foreground/5 aria-[current]:bg-foreground/10"
          >
            {slide.number}. {slide.title}
          </button>
        ))}
        <Button onClick={() => viewer.current?.enterPresentation(current)}>Ab Folie {current} präsentieren</Button>
      </nav>
      <PptxViewer
        ref={viewer}
        src={src}
        height={560}
        defaultSidebarOpen={false}
        className="min-w-0 flex-1"
        onSlideChange={setCurrent}
        onPresentationLoadSuccess={(deck) => setSlides(deck.slides)}
      />
    </div>
  )
}

Dieselben Foliendaten helfen auch außerhalb des Viewers: Speicher Titel und Notizen neben der Datei, dann findet deine eigene Suche oder ein KI-Assistent eine Präsentation über das, was der Vortragende auf Folie 7 sagt. Für Freigabeprozesse setzt toolbarActions deine eigenen Buttons (Teilen, Präsentation freigeben) ans Ende der Toolbar. renderSlideOverlay zeichnet über jede Folie, mit ihrer Größe und Skalierung beim aktuellen Zoom. Eine Review-Markierung, die du in Prozent platzierst, bleibt so an ihrer Stelle, während die Leute zoomen.

Wie verhält sich ein React PowerPoint Viewer auf dem Smartphone?

Er passt sich an die Breite an, die er bekommt, denn ein React PowerPoint Viewer landet genauso oft in schmalen Seitenpanels wie auf Smartphones. Der PowerPoint Viewer misst seinen eigenen Rahmen mit einem ResizeObserver und ignoriert die Fenstergröße. Unter 720px (880px, wenn du toolbarActions übergibst) wandern die Schalter für Einzelfolie und Sprechernotizen sowie Present und Download ins ⋯-Menü. Unter 520px startet die Thumbnail-Leiste geschlossen und gleitet beim Öffnen über die Folien, und unter 440px landen auch die Zoomstufen im Menü. Menüs öffnen sich auf dem Smartphone als Bottom Sheets, zwei Finger zoomen per Pinch um den Punkt zwischen ihnen, und Strg oder ⌘ plus Scrollen macht dasselbe mit der Maus. Folien behalten im Dark Mode ihre eigenen Farben, denn eine Präsentation ist ein gestaltetes Werk, und Invertieren würde sie verfälschen.

Auf der Tastatur wechseln ← → und Bild auf / Bild ab die Folie, Pos1 und Ende springen an die Enden, und Strg+F oder ⌘F öffnet die Suche des Viewers, solange der Fokus in ihm liegt. Außerhalb des Viewers funktioniert die Suche des Browsers wie gewohnt.

Was wird nicht gerendert, und wann ist ein PDF die bessere Wahl?

Animationen, Medien, einige Bildformate, komprimierte eingebettete Schriften und alte .ppt-Dateien werden nicht gerendert. Ein PDF ist die bessere Wahl, wenn genau das zählt oder wenn alle exakt dieselben Seiten sehen müssen. Im Detail, mit dem PowerPoint Viewer:

• Animationen und Übergänge werden nicht abgespielt. Jede Folie erscheint im Endzustand mit allen Formen sichtbar.
• Video, Audio und eingebettete Objekte (zum Beispiel eine eingebettete Arbeitsmappe) zeigen einen beschrifteten Platzhalter, mit dem Vorschaubild des Objekts, wenn die Datei eines enthält.
• EMF-, WMF- und TIFF-Bilder kann ein Browser nicht zeichnen; sie zeigen einen beschrifteten Platzhalter.
• Schriften, die PowerPoint oder Google Slides einbetten, werden verwendet; komprimierte eingebettete Schriften werden nicht dekodiert. Fehlt eine Schrift, springt eine ähnliche ein (Carlito für Calibri, wenn installiert), dann kann eine Zeile anders umbrechen.
• Alte .ppt- und passwortgeschützte Dateien zeigen eine Fehlermeldung, die nach einer .pptx fragt.

Diagramme werden aus den Werten gerendert, die PowerPoint in der Datei speichert (Balken, Linie, Fläche und Kreis), und SmartArt aus der gezeichneten Kopie, die PowerPoint daneben ablegt. Beides sieht also so aus, wie es beim letzten Speichern in PowerPoint aussah.

Exportier ein PDF, wenn diese Grenzen zählen: ein unterschriebenes Angebot, bei dem Folie 9 für alle gleich aussehen muss, ein Archiv, eine Präsentation, die von Animationsschritten lebt, oder ein Bestand alter .ppt-Dateien. LibreOffice wandelt auf dem Server über die Kommandozeile um (Startparameter (opens in a new tab)):

soffice --headless --convert-to pdf --outdir ./converted deck.pptx

Zeig das Ergebnis dann im PDF Viewer. Er hat dieselbe Art von Toolbar, Thumbnails und Suche, dazu Markierungen mit Notizen; unser Guide zum React PDF Viewer zeigt ihn im Detail. Viele Apps behalten beides: die .pptx im PowerPoint Viewer, solange die Präsentation geprüft wird, und das PDF, sobald sie fertig ist. Word-Dateien folgen derselben Logik mit dem DOCX Viewer (siehe den Guide zum React DOCX Viewer), Tabellenkalkulationen mit dem Excel Viewer.

Was geht schief, wenn du Präsentationen von anderen Origins oder aus Uploads lädst?

In Produktion gehen drei Dinge schief: URLs von anderen Origins ohne CORS-Header, Präsentationen, die für ein Smartphone zu schwer sind, und ungeprüfte Uploads. Kläre alle drei vor dem Launch:

• CORS. Eine Präsentation auf einem anderen Origin, etwa in einem S3-Bucket, braucht Access-Control-Allow-Origin für deine Seite, 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; gib sie wieder frei, wenn der Viewer unmountet.
• Größe. Präsentationen mit Video können Hunderte Megabyte groß sein, und jedes Byte wird auf dem Gerät heruntergeladen und entpackt. Setz maxFileSize auf ein Limit, das die Smartphones deiner Nutzer schaffen; Video- und Audioteile bleiben komprimiert, weil sie nie gezeichnet werden.
• Uploads. Wenn Leute dir die Präsentationen zuerst schicken, prüf Typ und Größe, bevor du sie speicherst. Der 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 pptx-viewer und setz src auf eine deiner eigenen Präsentationen, am besten eine mit einem Diagramm, einer Tabelle und Sprechernotizen, denn genau dort unterscheiden sich Renderer. PowerPoint Viewer, DOCX Viewer und PDF Viewer gehören zu Wingo UI Pro, ab 8 $ im Monat oder einmalig 150 $ für lebenslangen Zugang (Stand November 2026); alle Pläne stehen auf der Preisseite von Wingo UI. Mehr Guides dieser Art 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 PowerPoint-Datei in React ohne Server an?

Nimm einen Viewer, der die .pptx im Browser parst: Die Datei ist ein ZIP aus XML-Teilen, sie lässt sich also auf dem Gerät entpacken und als HTML und SVG zeichnen. Der PowerPoint Viewer von Wingo UI macht das; gib als src eine URL vom selben Origin, eine URL mit CORS oder eine blob:-URL an, und nichts wird hochgeladen.

Kann ein React PPTX Viewer Sprechernotizen zeigen?

Ja, wenn er die Notizteile der Datei liest. Der PowerPoint Viewer zeigt die Notizen der aktuellen Folie darunter (defaultNotesVisible oder der Schalter in der Toolbar), und seine Suche findet Text in den Notizen genauso wie auf den Folien.

Spielt der Viewer PowerPoint-Animationen und Folienübergänge ab?

Nein. Der PowerPoint Viewer zeigt jede Folie im Endzustand mit allen Formen sichtbar, und Video, Audio und eingebettete Objekte erscheinen als beschriftete Platzhalter. Wenn die Animationen die Geschichte tragen, teil stattdessen ein Video oder ein PDF mit einer Seite pro Animationsschritt.

Kann React alte .ppt-Dateien im Browser öffnen?

Der PowerPoint Viewer liest nur .pptx (Office Open XML) und zeigt bei .ppt- und passwortgeschützten Dateien eine klare Meldung. Wandle .ppt auf dem Server um, zum Beispiel mit LibreOffice, oder schau dir @extend-ai/react-pptx an, das laut README auch das alte .ppt liest.

Sollte ich PowerPoint für eine Web-App in PDF umwandeln?

Wandle um, wenn die Folien überall identisch aussehen müssen, etwa bei unterschriebenen Angeboten, Archiven oder Präsentationen mit ungewöhnlichen Schriften. Behalte die .pptx, wenn Leute die Sprechernotizen, die Folientitel als Daten oder einen Download der bearbeitbaren Datei brauchen.