Markstream-Install

# Markstream Install

Integrate the appropriate [Markstream](https://github.com/Simon-He95/markstream-vue) package into an existing application without installing unnecessary optional dependencies or weakening its security defaults.

Read [references/scenarios.md](references/scenarios.md) before choosing packages or peers.

When to Use

Use this skill when the user asks to:

- add streaming Markdown rendering to an AI chat or document interface;

- install Markstream in Vue, Nuxt, React, Next.js, Svelte, Angular, or Vue 2;

- repair a broken Markstream installation, missing styles, or SSR failure;

- replace another Markdown renderer with Markstream;

- choose between static, smooth-streaming, and externally parsed AST input.

Workflow

1. Inspect the host application

Before changing dependencies, inspect:

- the framework and version in `package.json`;

- the package manager lockfile;

- whether the application uses SSR;

- reset, Tailwind, UnoCSS, or design-system styles;

- required optional features: code highlighting, enhanced File/Diff surfaces, Monaco, Mermaid, D2, infographic blocks, or KaTeX.

Do not assume the Vue package is correct merely because the source repository is named `markstream-vue`. Select the framework-specific package from the scenario table.

2. Install the smallest dependency set

Install exactly one framework package. Add optional peers only when the requested UI uses their feature.

Examples:

npm install markstream-vue
npm install markstream-react
npm install markstream-svelte
npm install markstream-angular
npm install markstream-vue2

Preserve the repository's existing package manager. Do not install every optional peer preemptively.

3. Wire styles in the correct order

Import application resets before Markstream styles. Import package CSS explicitly; do not rely on component imports to inject it.

For Tailwind or UnoCSS, use the relevant package subpath in a component layer:

@import 'markstream-vue/index.css' layer(components);

Use the matching package name for React, Svelte, Angular, or Vue 2. If math rendering is enabled, also import:

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

Vue CLI 4 and other Webpack 4-based Vue 2 applications cannot resolve package export maps. In those projects, import the published file directly:

import 'markstream-vue2/dist/index.css'

4. Add the smallest working renderer

Prefer `content` for static documents and most streaming chat interfaces. Markstream's built-in smooth streaming can pace irregular token delivery without requiring the host to maintain an AST.

For Vue 3 chat surfaces, start with:

<MarkdownRender
  mode="chat"
  :content="markdown"
  :final="false"
  smooth-streaming="auto"
  :fade="false"
  typewriter
/>

For completed chat history, keep the same renderer mode and switch pacing off:

<MarkdownRender
  mode="chat"
  :content="markdown"
  :final="true"
  :smooth-streaming="false"
  :fade="true"
  :typewriter="false"
/>

In React, Svelte, and Angular, use the equivalent camelCase or framework binding syntax. Keep `smoothStreaming="auto"`, `fade=false`, and `typewriter=true` while streaming; use `smoothStreaming=false` and `typewriter=false` for completed history.

Use `nodes` plus `final` only when a worker, shared AST store, custom transform, or another application layer already owns parsing.

5. Handle framework-specific boundaries

- In Nuxt, keep browser-only optional peers behind client boundaries.

- In Next.js, use the root `markstream-react` entry inside a `'use client'` component for live SSE or WebSocket streams. Use `markstream-react/next` for SSR-first HTML with hydration, or `markstream-react/server` for server-only rendering.

- Use `markstream-svelte` only with Svelte 5.

- Confirm the Angular application meets the current `markstream-angular` version requirement.

- In Vue 3, use `mode="chat"` for AI chat, `mode="docs"` for rich documents, and `mode="minim