Markstream Custom Components
SkillDev toolsLets your agent customize how Markstream renders nodes and add custom tags in Vue, React, Svelte, or Angular apps.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Markstream Custom Components skill
About this capability
Override built-in Markstream node renderers and add trusted custom tags across Vue, React, Svelte, and Angular. Use when Codex needs scoped `setCustomComponents`, renderer-local React `streamingComponents` or `htmlComponents`, Angular/Svelte `customComponents`, Vue app-scoped components, node overri
What this skill tells your AI
The instructions your AI receives, as published by simon-he95/markstream-vue in .agents/skills/markstream-custom-components/SKILL.md and read by ahel’s review.
Use this skill when the task is to change how Markstream renders specific nodes or custom tags.
Read references/patterns.md before choosing an override strategy.
Workflow
- Classify the request.
built-in override: replace an existing renderer such asimage,link,code_block,mermaid,d2, orinline_code.custom tag: support trusted HTML-like tags such asthinking.parser-level: requires token transforms or AST reshaping. Only then should you leave this skill and use low-level parser hooks.
- Prefer scoped mappings.
- Vue, Vue 2, Svelte, and shared Angular registration: use
setCustomComponents(customId, mapping)instead of global mappings whenever practical, and pass the samecustomId/custom-id. - React custom tags: prefer renderer-local
streamingComponentsfor parser-backed nodes orhtmlComponentsfor sanitized HTML props pluschildren. UsedefineStreamingComponents(...)/defineHtmlComponents(...)for typed maps. KeepsetCustomComponentsfor built-in node overrides or shared legacy registration. - Svelte and Angular can also pass a renderer-local
customComponentsmap when the override should not enter the shared registry. - In Vue 3 app/plugin setup, import
{ VueRendererMarkdown }frommarkstream-vueand install it with{ components }when the override should be scoped to the Vue app instance.
- Vue, Vue 2, Svelte, and shared Angular registration: use
- Start with the smallest safe override.
- Leaf-like nodes (
image,link,inline_code,mermaid) are easier than container nodes (heading,paragraph,list_item). - If the request only changes Mermaid, use
mermaid, notcode_block.
- Leaf-like nodes (
- Preserve nested Markdown when needed.
- For trusted custom tags with inner Markdown, render
node.contentwith a nested renderer. - Pass the same custom-tag allowlist to nested renderers.
- Nested renderers inside a smooth-streaming parent are automatically suppressed from double pacing — do not add
smooth-streamingto child renderers. - In React,
streamingComponentsautomatically contributes its keys to the effective custom-tag list; do not duplicate those keys incustomHtmlTagsunless another parser path needs them.
- For trusted custom tags with inner Markdown, render
- Keep props and cleanup intact.
- Preserve
node,loading,indexKey,customId, andisDark. - For
mermaidandinfographicoverrides, preserveestimatedPreviewHeightPxso async preview shells keep stable height during remounts. - Remove temporary scoped mappings with
removeCustomComponents(customId)when the scope is no longer needed.
- Preserve
- Validate with the smallest useful check.
- Prefer a local demo, targeted test, or docs build.
- Call out whether the implementation is safe for repeated and nested custom tags.
Default Decisions
- Scoped overrides first, global overrides only when the whole app truly needs them.
- Leaf-node overrides before container-node overrides.
customHtmlTagsplus scoped custom components before parser hooks.- In React, renderer-local component maps before registry mutation.
- Nested renderers for tag bodies that contain Markdown.
Useful Doc Targets
docs/guide/component-overrides.mddocs/guide/custom-components.mddocs/guide/react-components.mddocs/guide/components.mddocs/guide/advanced.md
Signals
- GitHub stars
- 3k
- Forks
- 182
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
markstream-custom-components- Source
- github.com/simon-he95/markstream-vue