Skip to main content

Migration from react-markdown

Finished content is a component swap:

// Before
<ReactMarkdown>{markdown}</ReactMarkdown>

// After
<HyperMarkdown md={markdown} />

Streaming changes the ownership model:

// Before: rebuild the growing document through React.
const [markdown, setMarkdown] = useState("");
setMarkdown((current) => current + delta);
<ReactMarkdown>{markdown}</ReactMarkdown>

// After: deliver only the new fragment.
renderer.current?.write(delta);
<HyperMarkdown ref={renderer} streaming />
Previous patternHyperMarkdown
Markdown passed as childrenmd={markdown}
Growing text propwrite(delta)
Clear statereset()
End-of-stream flagwrite("", true)
GFM remark pluginBuilt in
Component mappingcomponents={{ ... }}
Math, highlighting, MermaidTyped optional plugins
Raw HTML pluginBuilt in and sanitized by default

HyperMarkdown does not accept arbitrary remarkPlugins or rehypePlugins. Use typed feature plugins and component overrides. Verify any custom AST transform before removing the old renderer.