Simon-He95/markstream-vue

Multi-framework streaming Markdown renderers for AI apps: Vue/Nuxt, React/Next.js, Svelte, and Angular, with Mermaid, KaTeX, Shiki, Monaco, safe HTML, and low-jitter updates.

해결하고자 하는 문제

많은 표준 Markdown 렌더러는 정적 문서를 위해 설계되어 있어, 채팅 인터페이스와 같이 빠르게 변하는 콘텐츠(예: AI가 생성하는 토큰 스트림)를 렌더링할 때 시각적 깜빡임이나 성능 문제가 발생합니다. markstream-vue는 LLM에서 스트리밍되는 Markdown을 안정적이고 깜빡임 없이 렌더링하는 방법을 제공합니다.

작동 방식

Vue 3 전용 렌더러로 동작하며(React, Svelte, Angular용 형제 패키지도 존재) 불완전한 Markdown 상태를 처리합니다. 두 가지 주요 렌더 모드를 제공합니다: 긴 문서를 위한 가상 윈도우와 "타이핑" 효과를 위한 증분 배치. 원시 Markdown 문자열이나 사전 파싱된 노드를 모두 처리할 수 있으며, Mermaid 다이어그램 및 KaTeX 수식과 같은 무거운 요소에 대한 점진적 렌더링을 지원합니다.

대상 사용자

AI 채팅 UI, SSE(Server‑Sent Events) 또는 WebSocket 기반 스트리밍 인터페이스, Vue, Nuxt, VitePress를 사용하는 문서 사이트를 구축하는 개발자를 위한 것입니다.

하이라이트

  • AI 최적화 스트리밍: LLM 토큰 스트림 중 깜빡임을 최소화하고 예측 가능한 메모리 사용량을 유지하도록 설계되었습니다.
  • 멀티 프레임워크 지원: 이 레포는 Vue용이지만 React, Svelte, Angular를 지원하는 렌더러 패밀리의 일부입니다.
  • 점진적 렌더링: 코드 블록(Monaco/Shiki)과 다이어그램(Mermaid)을 스트리밍하면서 내용이 증가할 때마다 업데이트합니다.
  • 풍부한 통합: KaTeX 수식 및 커스텀 태그(예: thinking 블록)에 대한 내장 지원이 포함됩니다.
  • 유연한 모드: 안정적인 페이싱을 위한 chat 모드와 풍부한 문서 레이아웃을 위한 docs 모드를 포함합니다.