Configure rendering
Start with a working React, Vue or Mantine setup. Then choose the layer you need to change. React and Vue share parsing options, but their component and styling APIs differ.
Choose what to change
Section titled “Choose what to change”| Goal | Configuration | Guide |
|---|---|---|
| Show incoming text | Update the accumulated content; set streaming from producer state | Streaming input |
| Smooth bursty updates | Use the framework’s smooth component or hook/composable | React · Vue |
| Select optional syntax transforms | enginePlugins | Markdown features |
| Clean up source text before parsing | contentPreprocessors | Preprocessors |
| Replace links, code blocks or other elements | React customComponents; Vue components or named slots | React · Vue |
| Change fonts, spacing and colors | React typography/CSS variables; Vue wrapper styles; Mantine theme | React · Vue · Mantine |
| Control allowed HTML and URLs | sanitizeSchema and urlTransform | Links and HTML safety |
| Share references across sections | AIMarkdownDocuments with an explicit document id | Documents and references |
Know what is enabled
Section titled “Know what is enabled”GFM, math processing, emoji, source line breaks, CJK-aware delimiter parsing and guarded raw HTML belong to the base pipeline. The five shipped optional plugins are enabled by default. Passing enginePlugins replaces that optional set; an empty array does not disable the base pipeline or sanitization.
The highlight plugin means ==marked text==, not code syntax highlighting. Code highlighting and Mermaid require Mantine or your own renderer. See the syntax overview for the full distinction.
Keep configuration stable
Section titled “Keep configuration stable”Define plugin arrays, preprocessors and policy objects outside the render function when they are constant. If they depend on application settings, keep their references stable until those settings change. For Vue composables, pass a live getter so later updates remain observable.
The plugin catalog accepts only the shipped objects. Arbitrary remark/rehype plugins are not accepted through enginePlugins; use the documented preprocessing and custom-rendering extension points instead.
Check the scope before overriding
Section titled “Check the scope before overriding”streaming describes the producer; it is not the switch for incremental parsing. React’s cursor is opt-in, while Vue’s is enabled by default. React typography props and hooks do not apply to Vue.
URL transformation runs after sanitization. A custom component must also apply the application’s output policy to URLs or HTML it creates. Follow Links and HTML safety before changing either stage.
Look up exact options
Section titled “Look up exact options”Use React props, Vue component props or Mantine configuration for types, defaults and precedence. For an unexpected result, start with troubleshooting.