AI Markdown
Render Markdown in React and Vue, including streaming AI responses, math, tables and coordinated references. Choose your framework to start with its installation, stylesheet requirements and public API.
Choose your framework
Section titled “Choose your framework”| Your application | Start here | What it provides |
|---|---|---|
| React 19 | React installation and API | Components, hooks and customizable element renderers |
| Vue 3.5 | Vue installation and API | Components, scoped slots and setup composables |
| React with Mantine 9 | Mantine integration | Theme-aware typography, highlighted code and Mermaid diagrams |
Compare packages and setup requirements before choosing. React hooks and Mantine providers belong to the React integration; Vue has its own props and composables.
Build a streaming experience
Section titled “Build a streaming experience”Start with one accumulated Markdown string per message. Update it as transport deltas arrive; use document coordination only when a logical document intentionally spans multiple renderers.
- Streaming and performance: rendering flags, caching and integration patterns, with framework scope called out.
- Smooth streaming: paced output and completion behavior.
- Cross-chunk coordination: references shared across separate Markdown units.
- Interactive examples: explore the React, Vue and Mantine Storybook catalogs.
Customize rendering
Section titled “Customize rendering”Use the guide index to find recipes for custom components, typography, URL policies, metadata and CJK text. Each guide identifies its framework scope; use the Vue API reference for Vue-specific examples.
Build an adapter
Section titled “Build an adapter”Core owns framework-independent orchestration. Engine owns parsing and tree algorithms. Read their public contracts and the architecture guide when implementing another framework adapter.