Customize Markstream renderer nodes without global state

Guides customizing specific Markstream markdown-rendering nodes or adding trusted custom tags without replacing the parser or leaking global renderer state. It first classifies the change into one of three kinds - a built-in override (image, link, code_block, mermaid, inline_code), a trusted custom tag (such as thinking), or a parser transform (only when token or AST reshaping is actually required) - and then prefers scoped mappings over global ones: Vue, Vue 2, Svelte, and Angular register overrides through setCustomComponents(customId, mapping), with Svelte and Angular additionally able to pass renderer-local maps; React instead uses streamingComponents for parser-backed nodes and htmlComponents for sanitized HTML-style attributes plus children. The workflow starts with leaf-node overrides before touching containers that must preserve their children correctly, uses a nested renderer with the same tag allowlist (and no independent smooth-streaming loop) whenever a trusted tag's body itself contains Markdown, and preserves node/loading props, identity keys, scope IDs, theme state, and preview-height estimates for async diagrams throughout. Temporary scoped registrations must be removed on cleanup, and repeated/nested tag cases need explicit validation.

A reference pattern table maps each override key to its typical use: image for lightboxes/captions/lazy loading, link for routing/analytics/tooltips, code_block for fenced code blocks, mermaid/d2/infographic for a single diagram renderer, inline_code for inline typography, and heading/paragraph/list_item as containers that must preserve their children. For Vue/Vue 2/Svelte/Angular shared registration, the pattern is to allowlist the tag, register it under a scoped customId, and pass that scope explicitly to the renderer - reaching for a renderer-local map instead when sharing across scopes isn't actually needed.

Use it to replace built-ins such as image, link, code_block, mermaid, or inline_code; to render a trusted custom tag such as thinking; or to scope an override to one specific renderer or app instance. Reach for parser transforms only when token or AST reshaping is genuinely required - not as the default path for a simple visual override. Its own limitations: component overrides cannot reproduce arbitrary remark/rehype transforms, container overrides need careful child rendering and an accessibility review, and the framework registration APIs (Vue's setCustomComponents, React's streamingComponents/htmlComponents) are not interchangeable across frameworks.

Before changing dependencies or source files, the workflow inspects the existing package manager and project conventions, previews the intended edits, and gets explicit user approval. Output is the registered component override itself, for example in React:

import MarkdownRender, {
  type NodeComponentProps,
  setCustomComponents,
} from 'markstream-react'
import 'markstream-react/index.css'

function ThinkingNode({ node }: NodeComponentProps<any>) {
  return <details><summary>Thinking</summary>{node.content}</details>
}

setCustomComponents('assistant-panel', { thinking: ThinkingNode })

export function Answer({ markdown }: { markdown: string }) {
  return (
    <MarkdownRender
      content={markdown}
      customId="assistant-panel"
      customHtmlTags={['thinking']}
      htmlPolicy="safe"
    />
  )
}

Works across the Markstream family of markdown renderers for Vue, Vue 2, React, Svelte, and Angular, and is listed as usable from Claude, Cursor, Gemini, and Codex.

Frontend developers customizing how a Markstream-rendered markdown stream displays specific nodes or trusted custom tags - lightboxes, diagram renderers, collapsible "thinking" panels - without touching the underlying parser or leaking overrides globally. Official skill from Simon-He95/markstream-vue under the MIT license, added 2026-07-21.