markstream-vue: Markdown rendern, während die Antwort noch wächst

Das Problem heißt unvollständiges Markdown, nicht Markdown

Klassische Renderer gehen davon aus, dass ein Dokument fertig ist, bevor es geparst wird. Bei einer LLM-Antwort trifft das nie zu. Der Text kommt in Häppchen an, und nach jedem Häppchen kann ein Codeblock offen, eine Liste halb geschrieben oder eine Tabellenzeile ohne Abschluss sein. Wer in diesem Moment neu parst, bekommt entweder einen Absturz, ein sichtbar umgebautes Layout oder einen Sprung, weil ein Block plötzlich seine Form ändert. Genau an dieser Stelle setzt das Projekt an. Das README formuliert die Abgrenzung selbst: marked, markdown-it oder react-markdown seien für fertiges Markdown gedacht, Markstream dagegen für Text, der sich ändert, während der Nutzer liest. Zielgruppe sind damit Frontend-Teams, die Chat-Oberflächen, Assistenten oder Dokumentationsansichten mit Live-Ausgabe bauen, und zwar ausdrücklich auch solche mit mobilen WebViews, wo ein Neuaufbau des DOM teurer ist als auf dem Desktop.

Wie die Paketfamilie aufgeteilt ist

Das Repository ist kein einzelnes Paket, sondern eine Familie mit gemeinsamer Wurzel. markstream-vue bedient Vue 3, Nuxt und VitePress. markstream-react deckt React, Next.js und Remix ab, markstream-svelte setzt auf Svelte 5, markstream-angular auf Angular standalone, markstream-vue2 auf Vue 2.6 und 2.7, markstream-octane auf Octane. Darunter liegen zwei Bausteine ohne Framework-Bindung: stream-markdown-parser für reines Parsen in beliebigen JS- und TS-Anwendungen und markstream-core für Streaming-Controller-Utilities. Diese Trennung ist der eigentliche Architekturentscheid. Das Parsen und die Zustandsverwaltung des Streams liegen nicht im Vue-Paket, sondern in den Core-Paketen, und die Framework-Pakete setzen darauf auf. Für Anwender heißt das: Wer nur den Parser braucht, muss keine Vue-Abhängigkeit in ein React-Projekt ziehen. Wer später das Framework wechselt, tauscht die oberste Schicht und behält die untere.

Einbindung in Vue 3 in wenigen Zeilen

Die Installation erfolgt über pnpm add markstream-vue. Das Stylesheet kommt separat dazu, im Beispiel als import 'markstream-vue/index.css'. Die Komponente heißt MarkdownRender und wird als Default-Export importiert. Das README zeigt sie mit den Props mode="chat", content und final, wobei final ein Boolean ist, der den Abschluss des Streams signalisiert. Dieses final ist der interessanteste Teil der Schnittstelle: Die Komponente weiß nicht nur, welcher Text da ist, sondern auch, ob noch weitere Token zu erwarten sind, und kann ihr Verhalten danach richten. Für die erweiterten Code- und Diff-Blöcke nennt das README einen optionalen Peer namens stream-diffs, der nur bei Bedarf installiert wird. Das ist eine bewusste Entscheidung gegen eine große Standardabhängigkeit und bedeutet im Gegenzug, dass ein Teil der Funktionalität ohne diesen Peer fehlt.

Version 2 hat die Codeblock-Laufzeiten entfernt

Der Sprung von 1.x auf 2.0 ist kein reines Versionsinkrement. Das README stellt klar, dass Version 2 die Monaco- und stream-markdown-Codeblock-Laufzeiten entfernt und stattdessen den optionalen Peer stream-diffs vorsieht. Wer diese Blöcke genutzt hat, muss also nach dem Upgrade etwas nachinstallieren, sonst fehlt die Oberfläche, die vorher da war. Für Anwendungen, die den Schnitt nicht mitten im Betrieb vollziehen können, hält das Projekt zwei Wege offen: markstream-vue@1 pinnt die gepflegte 1.x-Linie, und dieselbe Linie liegt zusätzlich auf dem npm-Tag legacy, mit Vorabversionen auf legacy-next. Dass eine alte Hauptversion weiter gepflegt wird, ist ein Aufwand, den viele Projekte scheuen. Es ist aber auch ein Signal, dass der Autor den Bruch für real hält und nicht als Formalie.

Sichere HTML-Ausgabe und schwere Blöcke

Das README nennt eine safe HTML policy als Teil der stabilen Oberfläche, ebenso optionales Mermaid und KaTeX. Die Formulierung optional ist wichtig: Diese Renderer sind nicht der Kern, sondern zuschaltbare Erweiterungen für Diagramme und Formeln. Wer sie aktiviert, lädt zusätzliche Abhängigkeiten und zusätzliche Rechenarbeit in den Hauptthread, und zwar in genau dem Moment, in dem der Stream läuft. Die Dokumentation beschreibt an dieser Stelle ein progressives Vorgehen für schwere Blöcke, ohne im vorliegenden Material die Mechanismen im Detail auszuführen. Wer Mermaid oder KaTeX produktiv einsetzen will, sollte deshalb im eigenen Profil prüfen, wie sich die Aktivierung auf die Bildrate während des Streamens auswirkt. Eine Zahl dazu liefert das Material nicht, und ich werde keine erfinden.

Wann ein fertiger Renderer die bessere Wahl bleibt

markstream-vue ist nicht für jede Markdown-Aufgabe gedacht, und das README sagt das selbst. Wer ein fertiges Dokument rendert, etwa eine Changelog-Seite, ein Handbuch oder einen Blogbeitrag, für den ist marked oder markdown-it die schlankere Antwort. Diese Werkzeuge parsen einmal, liefern HTML oder einen Syntaxbaum, und die Seite ist danach statisch. Der Unterschied liegt nicht in der Qualität der Ausgabe, sondern im Zustandsmodell: Markstream hält einen Stream-Zustand über viele Teilaktualisierungen hinweg, ein klassischer Renderer kennt nur Eingabe und Ergebnis. Wer also keine Zwischenzustände anzeigen muss, bezahlt mit Markstream für eine Fähigkeit, die er nie aufruft. Auch react-markdown ist in dieser Hinsicht ein fertiger Renderer und kein Streaming-Werkzeug.

Wartung, Lizenzen und der Blick vor dem Upgrade

Das Projekt steht unter MIT-Lizenz, was die Einbindung in kommerzielle Anwendungen ohne gesonderte Vereinbarung erlaubt. Für die Weitergabe gilt die übliche Pflicht, den Lizenztext beizulegen; eine Rechtsberatung ist das nicht, und bei gebündelten Abhängigkeiten lohnt der Blick auf die Lizenzen der optionalen Peers, etwa von stream-diffs. Die Versionsstände der Familie laufen synchron: 2.0.11 erscheint für markstream-vue, markstream-vue2 und markstream-svelte am selben Tag, was auf eine gemeinsame Release-Pipeline hindeutet. Für Anwender bedeutet das, dass ein Fehler in einer Framework-Bindung nicht zwingend in allen anderen gleichzeitig behoben ist. Vor einem Upgrade auf 2.x ist die Seite guide/migration-2-0 im Dokumentationsbereich die erste Station, nicht die Release-Notes. Und wer die 1.x-Linie weiterfährt, sollte sich im Klaren sein, dass er zwei Pfade parallel verfolgen muss, sobald er später doch auf 2.x wechselt.

Redaktionelles Fazit

Für Vue-3-, Nuxt- und VitePress-Oberflächen, die Token für Token wachsende Antworten anzeigen, ist markstream-vue die passende Wahl, solange die Oberfläche den Zwischenzustand wirklich sichtbar hält. Wer fertige Dokumente rendert, bleibt bei marked, markdown-it oder react-markdown und spart sich eine Abhängigkeit. Vor dem Umstieg auf 2.x gehört die Migrationsseite guide/migration-2-0 gelesen, weil die Codeblock-Laufzeiten entfallen und der optionale Peer stream-diffs nachinstalliert werden muss. Wer auf der 1.x-Linie bleiben will, pinnt markstream-vue@1.

Offizielle Quellen

1. License: MIT
2. Project website
3. README
4. Releases
5. Simon-He95/markstream-vue on GitHub