Simon-He95/markstream-vue

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

해결하는 문제

기존 Markdown 렌더러는 정적 문서를 위한 것입니다. AI 채팅 인터페이스에서 텍스트가 토큰 단위로 스트리밍될 때, 문서가 다시 분석되고 다시 렌더링되면서 시각적 깜빡임, 메모리 급증, 레이아웃 이동이 발생하는 경우가 많습니다. markstream-vue는 이러한 스트리밍 상태에 특화된 안정적이고 고성능의 렌더러를 제공하여, 복잡한 포맷팅을 희생하지 않으면서도 부드러운 '타이핑' 효과를 보장합니다.

작동 방식

이 프로젝트는 Vue 3(그리고 다른 프레임워크를 위한 동반 패키지)용 전용 렌더러를 제공합니다. 불완전한 Markdown 구문을 처리할 수 있으며, 두 가지 주요 렌더링 모드를 사용합니다: 긴 문서용 가상 창과 채팅 스타일 스트리밍용 인크리멘탈 배치입니다. stream-markdown-parser와 통합되어 부분적인 Markdown 상태의 로직을 처리하며, Mermaid 다이어그램, KaTeX 수식, 스트리밍 코드 블록(다음 stream-diffs 피어 패키지 통해)과 같은 무거운 블록의 점진적 렌더링을 지원합니다.

대상 사용자

AI 채팅 UI, LLM 기반 애플리케이션, 또는 Server-Sent Events (SSE) 또는 WebSocket 스트림으로 Markdown 텍스트를 소비하는 모든 인터페이스를 개발하는 개발자들. 전문적이고 깜빡임 없는 사용자 경험을 필요로 하는 분들입니다.

주요 특징

  • 스트리밍 우선 설계: AI 토큰 스트림 중 깜빡임 최소화 및 예측 가능한 메모리 사용량 유지에 특화되어 있습니다.
  • 다중 프레임워크 지원: 이 패키지는 Vue 3/Nuxt/VitePress용이지만, Markstream 패밀리에는 React, Svelte, Angular, Vue 2용 어댑터도 포함되어 있습니다.
  • 풍부한 미디어 지원: Mermaid 다이어그램, KaTeX 수식, D2 인포그래픽의 점진적 렌더링을 지원합니다.
  • 고급 코드 블록: stream-diffs와 통합되어 실시간으로 업데이트되는 코드 및 차이 블록 렌더링을 강화합니다.
  • 유연한 렌더링 모드: 일정한 리듬을 유지하는 chat 모드와 풍부한 문서 레이아웃을 위한 docs 모드를 제공합니다.

관련

  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트