Customize Markstream renderer nodes without global state

Markstream Custom Components lets you override specific Markdown renderer nodes (image, link, code_block, mermaid, inline_code) or add trusted custom HTML-like tags (such as thinking) without replacing the entire parser or polluting global renderer state. It provides scoped, framework-specific registration APIs for Vue, Vue 2, Svelte, Angular, and React that keep customizations isolated to individual renderers or application contexts.

Use this skill to replace built-ins such as image, link, code_block, mermaid, or inline_code; render trusted tags such as thinking; or scope overrides to one renderer or app. Use parser transforms only when token or AST reshaping is required.

Do not use this skill when you need arbitrary remark/rehype AST transforms - component overrides cannot reproduce those. Avoid it for container overrides unless you are prepared to handle careful child rendering and accessibility review.

You provide a custom component function or class that receives node props (content, attributes, children) and a scoped registration ID. The skill registers your component against a specific node type or trusted tag name.

You receive a Markdown renderer that invokes your custom component whenever it encounters the registered node or tag, while all other Markdown elements render with default behavior. The renderer preserves node/loading props, identity keys, scope IDs, theme state, and preview-height estimates for async diagrams.

• markstream-react: Use setCustomComponents(customId, mapping) for global scoped registration or pass streamingComponents for parser-backed nodes and htmlComponents for sanitized attributes plus children.
• Vue, Vue 2: Use setCustomComponents(customId, mapping) for scoped component registration.
• Svelte, Angular: Use setCustomComponents(customId, mapping) or pass renderer-local maps directly to the component.

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"
    />
  )
}

Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.

1. Classify the change as a built-in override, trusted tag, or parser transform.
2. Prefer scoped mappings. Vue, Vue 2, Svelte, and Angular can use setCustomComponents(customId, mapping); Svelte and Angular can also pass renderer-local maps.
3. In React, prefer streamingComponents for parser-backed nodes and htmlComponents for sanitized attributes plus children.
4. Start with leaf nodes before containers that must preserve children.
5. For trusted tag bodies containing Markdown, use a nested renderer with the same allowlist. Do not add a second smooth-streaming loop.
6. Preserve node/loading props, identity keys, scope IDs, theme state, and preview-height estimates for async diagrams.
7. Remove temporary scoped registrations on cleanup and validate repeated and nested tags.

Security note: Treat custom HTML-like tags as trusted input only. Keep safe HTML enabled and do not pass unsanitized attributes into host components.