BoosAPI/desktop/libs/markstream-vue/docs/guide/installation.md

description

description
Install markstream-vue with the right peer dependency set for docs sites, AI chat UIs, Mermaid, KaTeX, Monaco, and large documents.

Installation

If you only want the renderer on screen quickly, install the main package first and add peers only for the features you actually use.

1. Minimal install

pnpm add markstream-vue
# or
npm install markstream-vue
# or
yarn add markstream-vue

Then continue with Quick Start if you only need basic Markdown rendering.

2. Choose peers by capability

Capability	Packages	When you need it
Lightweight highlighted code blocks	stream-markdown	Docs sites, SSR, lower bundle budgets
Monaco-powered code blocks	stream-monaco	Copy/preview/expand controls and richer code UX
Mermaid diagrams	mermaid	Fenced mermaid blocks
D2 diagrams	@terrastruct/d2	Fenced d2 or d2lang blocks
KaTeX math	katex	Inline or block math rendering

3. Common install recipes

Docs site or SSR-first app

pnpm add markstream-vue stream-markdown

Then continue with Docs Site & VitePress if you are wiring a docs site, content hub, or VitePress theme.

AI / chat UI with richer code blocks and diagrams

pnpm add markstream-vue stream-monaco mermaid katex

Then follow AI Chat & Streaming for the recommended nodes + final data flow and chat-specific tuning.

Diagram-heavy content

pnpm add markstream-vue mermaid @terrastruct/d2 katex

Everything enabled

pnpm add markstream-vue stream-markdown stream-monaco mermaid @terrastruct/d2 katex

4. CSS order matters as much as installation

The package entry already imports the default stylesheet, but when your app uses reset layers or utility frameworks you usually want explicit control over order.

@import 'modern-css-reset';
@tailwind base;

@layer components {
  @import 'markstream-vue/index.css';
}

Also import KaTeX CSS when you use math:

import 'katex/dist/katex.min.css'

stream-monaco, mermaid, and @terrastruct/d2 do not need extra CSS imports from this package.

5. Optional loaders (only for CDN or custom control)

After installing peers, default loaders are already enabled. Only call loader helpers if you previously disabled them or want a custom loader, for example with CDN assets:

import { enableD2, enableKatex, enableMermaid } from 'markstream-vue'

enableMermaid()
enableKatex()
enableD2()

6. First-run checklist

• If you render standalone node components, wrap them in <div class="markstream-vue">...</div>.
• If math does not render, check that katex is installed and its CSS is imported.
• If Monaco is blank, verify worker bundling and browser-only guards.
• If styles look wrong, check Troubleshooting.

7. Quick test

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'

type MarkdownRenderProps = InstanceType<typeof MarkdownRender>['$props']

const md: MarkdownRenderProps['content'] = '# Hello from markstream-vue!'
const customId: MarkdownRenderProps['customId'] = 'install-check'
</script>

<template>
  <MarkdownRender
    :content="md"
    :custom-id="customId"
  />
</template>

Next steps:

• Quick Start for the smallest integration
• Usage & Streaming for content vs nodes
• AI Chat & Streaming for chat UIs, SSE, and token streams
• Override Built-in Components if you need custom rendering