Streamdown

Streamdown이 존재하는 이유는 스트리밍 상황 그 자체다. **굵게처럼 열린 채로 있거나 닫는 괄호가 빠진 링크 같은 불완전한 Markdown을 감지하고, 블록을 닫아 아무것도 생 텍스트로 표시되지 않게 한다. 새 토큰이 도착하면 컴포넌트는 그 자리에서 스타일을 갱신한다. 채팅 UI가 단어가 완성되기 전에 깨진 별표를 번쩍이는 걸 본 적이 있는가. 그게 바로 문제다. 스트리밍 채팅 인터페이스를 만드는 사람에게 이 매끄러움이 바로 핵심이다.

프로젝트가 이미 react-markdown을 쓴다면 Streamdown으로 바꾸는 것은 거의 찾아 바꾸기에 가깝다. 컴포넌트가 같은 markdown 문자열을 자식으로 받으므로, 대부분의 통합은 새 import 하나 이상을 필요로 하지 않는다. 이 낮은 이전 비용 덕에 메시지 뷰를 다시 쓰겠다고 약속하지 않고도 시험해볼 수 있다. 종속도 없다.

Streamdown은 순수 텍스트 이상을 다룬다. GitHub Flavored Markdown이 표, 할 일 목록, 취소선, 각주를 가져온다. KaTeX가 LaTeX 수식을 처리한다. Mermaid는 코드 블록에서 다이어그램을 그리고, Shiki가 코드에 구문 강조를 더한다. 산문과 수식, 코드 조각이 섞인 AI 답변에서 별도 렌더러를 쌓지 않고도 서식을 얻는다.

animated 프로퍼티는 단어를 하나씩 페이드인시키며 fadeIn, blurIn, slideUp 세 가지 스타일을 내장한다. 길이, 이징, 단어나 문자 기준 분할 여부를 설정할 수 있다. blurIn은 빠른 모델에서 편리한데, 흐림이 많은 토큰이 한 번에 도착했다는 사실을 가려주기 때문이다. 스트리밍이 멈추면 애니메이션은 완전히 제거된다.

Streamdown은 rehype-sanitize와 rehype-harden을 기본으로 켠 채 배포된다. harden 플러그인은 허용 프로토콜, 링크 접두사, 이미지 접두사를 설정하게 해주며, 이미지의 data URL 허용 여부도 정할 수 있다. AI 출력에는 내가 작성하지 않은 링크가 들어갈 수 있으므로, 실제 사용자에게 도달하기 전에 이 통제가 중요하다.

내장 처리는 두 단계로 돌아간다. remark는 Markdown 문법을, rehype는 HTML 출력을 맡는다. 직접 만든 플러그인 배열을 넘겨 기본값을 확장하거나 교체할 수 있고, 기본값도 내보내져 있으니 처음부터 새로 만드는 대신 덧붙일 수 있다. 특정 처리 흐름을 염두에 둔 사람이 기본 동작에 묶이지 않는다.