Streaming API

Render incomplete Markdown correctly during streaming. autoCloseMarkdown() closes unterminated syntax so AI output displays at every frame.

autoCloseMarkdown(source)

Automatically closes unclosed markdown inline syntax and Comark components. Built for streaming scenarios where content arrives incrementally and may be incomplete at any point.

Parameters:

  • source - The markdown content (potentially partial/incomplete)
  • options (optional) - frontmatter: true completes an unclosed leading frontmatter block; syntax: false skips Comark component-fence closing (for content parsed without the components plugin)

Returns: string, the source with all unclosed syntax closed

Example:

import { autoCloseMarkdown } from 'comark'

autoCloseMarkdown('**bold text')
autoCloseMarkdown is also available as a parse option: set autoClose: true (default) in parseMarkdown() or createMarkdownParser() to apply it automatically.

Parser Integration

autoClose is enabled by default in parseMarkdown() and createMarkdownParser(). You can disable it if you want to handle incomplete syntax yourself:

import { parseMarkdown } from 'comark'

const result = await parseMarkdown(content, {
  autoClose: true // default
})

Supported Syntax

Inline Markdown

SyntaxExampleAuto-closed
Bold**text**text**
Italic*text*text*
Code`code`code`
Strikethrough~~text~~text~~
Link[text](url[text](url)
Image![alt](url![alt](url)

Comark Components

Block components are closed based on their marker count:

auto-close.ts
// Double marker (block component)
autoCloseMarkdown('::alert\nContent')
// '::alert\nContent\n::'

// Triple marker (nested component)
autoCloseMarkdown(':::card\nContent')
// ':::card\nContent\n:::'

// Nested components
autoCloseMarkdown('::::outer\n:::inner\n::component')
// '::::outer\n:::inner\n::component\n::\n:::\n::::'

Props and Attributes

Components with props are handled correctly:

auto-close.ts
// Inline props
autoCloseMarkdown('::alert{type="info" title="Note"}')
// '::alert{type="info" title="Note"}\n::'

// YAML props
autoCloseMarkdown(`::component\n---\nkey: value\n---\nContent`)
// '::component\n---\nkey: value\n---\nContent\n::'

Use Cases

AI Streaming

When streaming AI-generated markdown, content arrives in chunks and may be incomplete at any point:

chat.ts
import { autoCloseMarkdown, parseMarkdown } from 'comark'

let accumulated = ''

socket.on('chunk', async (chunk) => {
  accumulated += chunk

  // Auto-close before parsing to ensure valid AST at every chunk
  const closed = autoCloseMarkdown(accumulated)
  const result = await parseMarkdown(closed)

  renderContent(result.nodes)
})

socket.on('end', async () => {
  const result = await parseMarkdown(accumulated)
  renderFinalContent(result.nodes)
})

AI SDK

Build a streaming AI chat with live Comark rendering in just a few lines. The <Markdown> component applies autoCloseMarkdown on every render by default, so the AST stays valid at every chunk and you get smooth incremental rendering without any extra wiring.

Install dependencies

npm install ai @ai-sdk/vue

Create a server route

server/api/chat.post.ts
import { convertToModelMessages, streamText } from 'ai'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: 'anthropic/claude-sonnet-4.6',
    system: 'You are a helpful assistant. Always respond using Comark syntax.',
    messages: await convertToModelMessages(messages),
  })

  return result.toUIMessageStreamResponse()
})

Render on the client

Use the Chat class from @ai-sdk/vue and the <Markdown> component to parse and render the content as it arrives. Use isPartStreaming(part) for per-part streaming detection:

app/pages/chat.vue
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import { isTextUIPart } from 'ai'
import { isPartStreaming } from '@nuxt/ui/utils/ai'

const chat = new Chat({})
const input = ref('')

function onSubmit() {
  chat.sendMessage({ text: input.value })
  input.value = ''
}
</script>

<template>
  <UChatMessages
    should-auto-scroll
    :messages="chat.messages"
    :status="chat.status"
  >
    <template #indicator>
      <UChatShimmer text="Thinking..." />
    </template>

    <template #content="{ message }">
      <template
        v-for="(part, index) in message.parts"
        :key="`${message.id}-${part.type}-${index}`"
      >
        <template v-if="isTextUIPart(part)">
          <p v-if="message.role === 'user'" class="whitespace-pre-wrap">
            {{ part.text }}
          </p>
          <Suspense v-else>
            <Markdown :value="part.text" :streaming="isPartStreaming(part)" caret />
          </Suspense>
        </template>
      </template>
    </template>
  </UChatMessages>

  <UChatPrompt v-model="input" placeholder="Ask something…" @submit="onSubmit">
    <UChatPromptSubmit
      :status="chat.status"
      @stop="chat.stop()"
      @reload="chat.regenerate()"
    />
  </UChatPrompt>
</template>
See the full working example with server route and chat UI wired together.

The caret prop on <Markdown> appends a blinking cursor to the last text node while streaming. See the Vue rendering docs for custom caret styling.

Real-time Editor

Show a live preview while the user types:

editor.ts
import { autoCloseMarkdown, parseMarkdown } from 'comark'
import { renderHtmlFromDocument } from '@comark/html'

editor.addEventListener('input', async (e) => {
  const closed = autoCloseMarkdown(e.target.value)
  const result = await parseMarkdown(closed)
  preview.innerHTML = await renderHtmlFromDocument(result)
})

Incremental File Upload

Parse content progressively as a file uploads:

upload.ts
import { autoCloseMarkdown, parseMarkdown } from 'comark'

async function uploadAndParse(file: File) {
  const chunkSize = 64 * 1024 // 64KB
  let offset = 0
  let accumulated = ''

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize)
    accumulated += await chunk.text()

    const closed = autoCloseMarkdown(accumulated)
    const result = await parseMarkdown(closed)

    updateProgress({
      percent: (offset / file.size) * 100,
      preview: result.nodes
    })

    offset += chunkSize
  }

  return parseMarkdown(accumulated)
}

Performance

Call autoCloseMarkdown once per chunk on the accumulated content, not on every character:

stream.ts
// ✅ Good: call once per chunk
for await (const chunk of stream) {
  accumulated += chunk
  const closed = autoCloseMarkdown(accumulated)
  render(await parseMarkdown(closed))
}

// ❌ Avoid: calling for every character
for (const char of text) {
  accumulated += char
  const closed = autoCloseMarkdown(accumulated) // too frequent
  render(await parseMarkdown(closed))
}

Parse API

Parse Markdown into a compact, serializable document with parseMarkdown() or createMarkdownParser(), on the server, in the browser, or from a stream.

Cheat Sheet

Quick reference for all Comark exports, types, and APIs across all packages.