Markdown Stream Parser by NLUX 🌲✨💬

A lightweight JS/TS library that can be used to parse markdown streams as they are being read or generated.
It can be useful for LLM-powered applications that need to parse markdown streams in real-time.

This package is part of the NLUX UI toolkit for AI ecosystem.

Usage

Parsing Markdown Stream

1import {
2    MarkdownStreamParser,
3    MarkdownStreamParserOptions,
4    createMarkdownStreamParser,
5} from "@nlux/markdown";
6
7const options: MarkdownStreamParserOptions = {
8    // markdownLinkTarget?: 'blank' | 'self';                       // default: 'blank'
9    // syntaxHighlighter: (( Highlighter from @nlux/highlighter )), // default: undefined — for code blocks syntax highlighting
10    // showCodeBlockCopyButton?: boolean,                           // default: true — for code blocks
11    // skipStreamingAnimation?: boolean,                            // default: false
12    // streamingAnimationSpeed?: number,                            // default: 10 ( milliseconds )
13    // waitTimeBeforeStreamCompletion?: number | 'never',           // default: 2000 ( milliseconds )
14    // onComplete: () => console.log("Parsing complete"),           // triggered after the end of the stream
15};
16
17const domElement = document.querySelector(".markdown-container");
18const mdStreamParser: MarkdownStreamParser = createMarkdownStreamParser(
19    domElement!,
20    options,
21);
22
23// On each chunk of markdown
24mdStreamParser.next("## Hello World");
25
26// To call when the markdown stream is complete
27// This indicates to the parser that now additional text will be added
28mdStreamParser.complete();

Parsing Markdown Snapshot

1import { parseMdSnapshot } from "@nlux/markdown";
2const parsedMarkdown = parseMdSnapshot(snapshot, options);

Interfaces

1export type MarkdownStreamParser = {
2    next(value: string): void;
3    complete(): void;
4};

1export type MarkdownStreamParserOptions = {
2    markdownLinkTarget?: 'blank' | 'self';
3    syntaxHighlighter?: HighlighterExtension;
4    skipStreamingAnimation?: boolean;
5    streamingAnimationSpeed?: number;
6    waitTimeBeforeStreamCompletion?: number | 'never';
7    showCodeBlockCopyButton?: boolean;
8    onComplete?: () => void;
9};

1export type SnapshotParser = (
2    snapshot: string,
3    options?: {
4        syntaxHighlighter?: HighlighterExtension,
5        htmlSanitizer?: SanitizerExtension;
6        markdownLinkTarget?: 'blank' | 'self',
7        showCodeBlockCopyButton?: boolean;
8        skipStreamingAnimation?: boolean;
9    },
10) => string;