Eine Anwendung mit PDF-, Excel- oder DOCX-Ansicht zu bauen klingt simpel, bis der eigene Viewer Wochen verschlingt. Extend AI hat seine intern entwickelten Komponenten dafür jetzt als Open Source freigegeben. Extend UI liefert fertige React-Bausteine für Dokumenten-Oberflächen, kostenlos und im eigenen Projekt frei anpassbar.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Mit Extend UI steht seit Mitte Juni 2026 ein offenes Komponenten-Set für Dokumenten-Anwendungen bereit. Auf GitHub sammelte das Projekt binnen weniger Tage rund tausend Sterne. Der Reiz liegt im Zuschnitt: fertige Viewer für genau die Dateiformate, die in Büro- und Branchensoftware täglich auftauchen.
Das Wichtigste in Kürze
- Extend UI ist eine quelloffene React-Bibliothek für Dokumenten-Oberflächen, veröffentlicht von Extend AI
- Enthalten sind Viewer für PDF, DOCX, XLSX und CSV, dazu Datei-Upload, E-Signatur und ein Schema-Builder
- Die Komponenten landen per shadcn-CLI als Quellcode im Projekt und lassen sich frei umbauen
- Die Bausteine entstanden zuerst intern, auf Kundenwunsch folgte die Freigabe als Open Source
Was steckt in Extend UI?
Die Bibliothek bündelt mehrere Bausteine, die Dokumenten-Produkte täglich brauchen. Im Kern stehen Viewer für PDF, DOCX und XLSX, ergänzt um einen CSV-Reader. Daneben gibt es Komponenten für den Datei-Upload, eine E-Signatur, einen Dateisystem-Browser und einen Schema-Builder zum Strukturieren ausgelesener Inhalte. Eine Besonderheit sind Bounding-Box-Zitate, die markierte Stellen im Dokument direkt mit den extrahierten Daten verknüpfen. Ähnlich wie quelloffene Werkzeuge aus unserer Übersicht kostenloser Ressourcen für Webentwickler senkt das die Einstiegshürde spürbar.
Wie kommen die Komponenten ins Projekt?
Extend UI folgt dem Modell von shadcn. Statt ein fertiges Paket einzubinden, kopieren Sie jede Komponente als Quellcode in Ihr Projekt. Der Befehl npx shadcn@latest add @extend/pdf-viewer holt zum Beispiel den PDF-Viewer. Die Eigentumsfrage ist damit geklärt: Der Code gehört danach Ihnen und passt sich an Ihr Design-System an. Gemeinsame Grundbausteine wie Buttons oder Dialoge erwartet die Bibliothek aus Ihrer bestehenden Oberfläche, die dokumentspezifischen Teile pflegt Extend selbst.
Fertige Bausteine sind erst dann ein Geschenk, wenn man sie auch wieder aufbrechen kann. Genau das macht den Quellcode-Ansatz von Extend UI für eigene Produkte interessant.
— Markus Seyfferth, Chefredakteur Dr. Web
Lohnt sich der Blick für DACH-Teams?
Für Software-Häuser und interne IT in der DACH-Region trifft das Projekt einen wunden Punkt. Der Datenschutz spielt mit: Da die Viewer lokal im Browser rendern und der Code im eigenen Repository liegt, bleiben sensible Dokumente unter eigener Kontrolle, statt durch einen externen Dienst zu laufen. Teams, die ohnehin auf React und Tailwind setzen, sparen sich den Eigenbau der Viewer-Schicht und stecken den Aufwand in die eigentliche Fachlogik. Wie sich offene Standards langfristig auszahlen, zeigt auch der Blick auf Progressive Web Apps.
Der erste Schritt bleibt überschaubar: ein bestehendes React-Projekt mit Tailwind nehmen, dann eine einzelne Komponente per CLI testen, etwa den PDF-Viewer. Ob die Bibliothek den Eigenbau ersetzt, zeigt sich schon am ersten echten Dokument. Quellcode und Beispiele stellt Extend unter extend.ai/ui bereit.
Mehr Newshunger?
