Multi-framework Quick Start

Choose the package that matches your app runtime. All renderers support raw Markdown content; streaming surfaces should also pass the completion state so incomplete Markdown can settle when the response ends.

Vue / Nuxt

pnpm add markstream-vue

<script setup>
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'

const content = '# Hello from Markstream'
</script>

<template>
  <MarkdownRender :content="content" />
</template>

Use Vue Quick Start for the detailed Vue path and Nuxt when SSR and browser-only peers matter.

React / Next.js

pnpm add markstream-react

import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'

export function Message({ content, isDone }: { content: string, isDone: boolean }) {
  return <MarkdownRender content={content} final={isDone} fade={false} />
}

Use root markstream-react in a client component for live SSE/WebSocket surfaces. Use Next.js for SSR-first or server-only Markdown rendering.

Svelte 5

pnpm add markstream-svelte svelte@^5

<script lang="ts">
  import MarkdownRender from 'markstream-svelte'
  import 'markstream-svelte/index.css'

  let { content = '# Hello from markstream-svelte' }: { content?: string } = $props()
</script>

<MarkdownRender {content} />

markstream-svelte requires Svelte 5. Use Svelte Quick Start for workers and custom components.

Angular

pnpm add markstream-angular

import { Component, signal } from '@angular/core'
import { bootstrapApplication } from '@angular/platform-browser'
import { MarkstreamAngularComponent } from 'markstream-angular'
import 'markstream-angular/index.css'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MarkstreamAngularComponent],
  template: '<markstream-angular [content]="content()" [final]="true" />',
})
class AppComponent {
  readonly content = signal('# Hello from markstream-angular')
}

bootstrapApplication(AppComponent)

Use Angular Quick Start for standalone component setup details.