Eliminate Redundant Markdown Parsing: Typically 2-10x Faster AI Streaming

Source: Dev.to

The Problem

When an AI streams a new chunk of text, traditional markdown parsers re‑parse the entire document from scratch, wasting CPU cycles on content that has already been rendered. Incremark solves this by parsing only the new portion of the document.

Benchmark Results – See It to Believe It

Short Markdown Document

Longer Markdown Document

Note: The performance‑improvement multiplier can vary between runs because of the chunking strategy.
The demo page uses random chunk lengths:

const chunks = content.match(/[\s\S]{1,20}/g) || []

This simulates real‑world scenarios where a chunk may contain content from the previous or next chunk. Regardless of how the content is chunked, performance improvements are guaranteed. The demo does not use artificial chunking to inflate results.

Live Demos

• Vue Demo:
• React Demo:
• Documentation:

For extremely long markdown documents the gains are even more dramatic. A 20 KB markdown benchmark achieved a 46× speed improvement. The longer the content, the larger the speedup—there is no theoretical upper limit.

Key Advantages

Why Is It So Fast?

The Problem with Traditional Parsers

When building an AI chat app, the AI streams output in small chunks. After each chunk arrives, the whole markdown string is fed to a parser (e.g., remark, marked.js, markdown‑it). Those parsers re‑parse the entire document every time, even the stable parts that have already been rendered. This creates a huge performance waste.

Tools like vue‑stream‑markdown improve the rendering layer by re‑using stable components, but they do not eliminate the repeated parsing of the markdown text—the real CPU bottleneck.

Incremark’s Core Performance Optimization

Incremark’s breakthrough is in the parsing stage: it only parses unstable markdown blocks and never re‑parses stable ones. This reduces the parsing complexity from O(n²) to O(n), meaning the longer the output, the greater the performance gain.

1. Incremental Parsing – From O(n²) to O(n)

Traditional parsers re‑parse the whole document on every update, causing quadratic work growth. Incremark’s IncremarkParser class implements an incremental strategy (see IncremarkParser.ts):

// Design Philosophy:
// 1. Maintain a text buffer to receive streaming input
// 2. Identify "stable boundaries" and mark completed blocks as 'completed'
// 3. For blocks currently being received, re-parse only that block's content
// 4. Complex nested nodes are treated as a whole until confirmed complete

2. Intelligent Boundary Detection

The findStableBoundary() method inside append() is the key optimization:

append(chunk: string): IncrementalUpdate {
  this.buffer += chunk
  this.updateLines()

  const { line: stableBoundary, contextAtLine } = this.findStableBoundary()

  if (stableBoundary >= this.pendingStartLine && stableBoundary >= 0) {
    // Only parse newly completed blocks, never re-parse already completed content
    const stableText = this.lines
      .slice(this.pendingStartLine, stableBoundary + 1)
      .join('\n')
    const ast = this.parse(stableText)
    // …
  }
}

3. State Management to Avoid Redundant Computation

The parser keeps several pieces of state that prevent duplicate work:

By updating only the newly‑stable region, Incremark achieves linear‑time incremental parsing.

Get Started

# Install the core library
npm i incremark

# For Vue
npm i incremark-vue

# For React
npm i incremark-react

// React example
import { IncremarkRenderer } from 'incremark-react'

function ChatMessage({ stream }) {
  return <IncremarkRenderer markdown={stream} />
}

<script setup>
import { IncremarkRenderer } from 'incremark-vue'
defineProps({ stream: String })
</script>

<template>
  <IncremarkRenderer :markdown="stream" />
</template>

License

Incremark is released under the MIT License. Feel free to use, modify, and contribute!

Incremental Calculations

context: Tracks nesting state of code blocks, lists, etc.

4. Incremental Line Update Optimization

The updateLines() method only processes new content, avoiding full split operations:

private updateLines(): void {
  // Find the last incomplete line (which may be continued by a new chunk)
  const lastLineStart = this.lineOffsets[prevLineCount - 1];
  const textFromLastLine = this.buffer.slice(lastLineStart);

  // Re‑split only the last line and subsequent content
  const newLines = textFromLastLine.split('\n');
  // Only update the changed portions
}

Performance Comparison

The Key Invariant

Incremark’s performance advantage stems from a key invariant: once a block is marked as completed, it is never re‑parsed. This ensures each character is parsed at most once, achieving O(n) time complexity.

🚀 Get Started Now

Stop wasting CPU cycles on redundant parsing. Try Incremark today:

Quick Install

npm install @incremark/core
# For React
npm install @incremark/react
# For Vue
npm install @incremark/vue

Resources

• 📚 Documentation
• 🎮 Live Demo (Vue)
• 🎮 Live Demo (React)
• 💻 GitHub Repository

Use Cases

Perfect for:

• 🤖 AI chat applications with streaming responses
• ✍️ Live markdown editors
• 📝 Real‑time collaborative documents
• 📊 Streaming data dashboards with markdown content
• 🎓 Interactive learning platforms

Whether you’re building an AI interface or just want faster markdown rendering, Incremark delivers the performance you need.

💬 Try It Out & Show Your Support

I’d love for you to try Incremark in your projects and see the performance difference for yourself! The live demos are the best way to experience the speed improvements in action.

If you find Incremark useful, please consider giving it a ⭐ star on GitHub—it really helps the project gain visibility and motivates me to keep improving it. Your feedback, issues, and contributions are also highly welcome!

• 🌟 Star on GitHub
• 💡 Report Issues or Ideas
• 🤝 Contribute: Pull requests are welcome!

Thank you for your interest in Incremark! Let’s make markdown rendering faster together. 🚀