Streaming Markdown

createStream() accepts Markdown chunks and emits documents and change information through a subscription callback. Completed block IDs remain stable, and an incomplete fenced code block can be displayed safely until the stream finishes.

React

React streaming

Waiting for stream input…

Vue

Vue streaming

Waiting for stream input…

Core API

const stream = runtime.createStream()

stream.subscribe(({ document, changes }) => {
  console.log(document, changes)
})

stream.write('# Hello')
stream.write('\n\nworld')
stream.finish()

Complete example

The following code is loaded directly from examples/streaming.ts in the repository:

examples/streaming.ts

import { createMarkdown } from '@markvia/core'

const stream = createMarkdown().createStream()

stream.subscribe((update) => {
  console.log(`version ${update.version}`, update.changes)
})

stream.write('# Streaming Markdown')
stream.write('\n\nThe last block can still be incomplete.')
stream.finish()

In React or Vue, pass each update’s document to the corresponding Markdown component:

<Markdown document={document} />