DEV Community: king

New Incremark DevTools Release: Built with Svelte, Now with Multi-Parser Support

king — Sun, 11 Jan 2026 15:20:10 +0000

Incremark is a high-performance incremental Markdown parser designed for AI streaming output. We're excited to announce a complete rewrite of Incremark DevTools! The new version is built with Svelte, bringing better performance, internationalization support, and a more polished debugging experience.

About Incremark

Incremark uses incremental parsing technology — only new content is parsed, completed blocks are never reprocessed. The longer the document, the more pronounced the performance advantage — from 4-6x faster on short documents to 16-65x faster on long documents.

Supports Vue, React, Svelte, and Solid frameworks with full TypeScript definitions and rich customization options.

Star us on GitHub ⭐️: https://github.com/kingshuaishuai/incremark

Report Issues 🐛: https://github.com/kingshuaishuai/incremark/issues

What's New

🌐 Internationalization (i18n)

DevTools now supports both Chinese and English interfaces! You can switch languages dynamically:

import { setLocale } from '@incremark/devtools'

// Switch to Chinese
setLocale('zh-CN')

// Switch to English
setLocale('en-US')

🔌 Multi-Parser Support

Monitor multiple parser instances simultaneously! This is incredibly useful when you have different Markdown parsers in your application.

🎨 Framework-Agnostic Design

DevTools is now completely framework-agnostic. It works seamlessly with Vue, React, Svelte, Solid, and vanilla JavaScript.

📊 Enhanced Features

The new DevTools includes four powerful tabs: Overview, Blocks, AST, and Timeline.

Migration Guide

The old useDevTools() hook has been removed. The new API uses createDevTools() to create instances and mount()/unmount() for lifecycle management.

Live Demos

Vue Demo: https://vue.incremark.com/
React Demo: https://react.incremark.com/
Svelte Demo: https://svelte.incremark.com/
Solid Demo: https://solid.incremark.com/

Incremark Now Supports Solid: One Library for Vue, React, Svelte, and Solid

king — Sat, 10 Jan 2026 19:08:17 +0000

Incremark now supports Solid, completing our coverage of all four major frontend frameworks: Vue, React, Svelte, and Solid.

Why Framework-Agnostic?

Most Markdown rendering libraries are built for specific frameworks. React has react-markdown, Vue has various v-md components. This creates problems:

Duplicated effort: Each framework community independently implements similar features
Inconsistent capabilities: Implementation quality varies across frameworks
Switching costs: Changing frameworks means learning a new API

Incremark takes a different approach: core logic is completely decoupled from UI frameworks.

@incremark/core handles all parsing, transformation, and incremental updates, outputting framework-agnostic data structures. Framework packages (@incremark/vue, @incremark/react, @incremark/svelte, @incremark/solid) simply render this data as framework-specific components.

This means:

Core capabilities implemented once, benefiting all four frameworks
Bug fixes and performance optimizations automatically sync to all frameworks
Consistent API design, near-zero learning curve when switching frameworks

Package Structure

┌───────────────────────────────┐
│       @incremark/core         │
│                               │
│  Incremental · Dual Engine ·  │
│        Plugin System          │
└───────────────┬───────────────┘
                │
                ▼
┌───────────────────────────────┐
│  @incremark/vue               │
│  @incremark/react             │
│  @incremark/svelte            │
│  @incremark/solid  ← NEW      │
└───────────────┬───────────────┘
                │
                ▼
┌───────────────────────────────┐
│       @incremark/theme        │
│                               │
│  Styles · Themes · Syntax     │
│        Highlighting           │
└───────────────────────────────┘

Incremental Parsing

Traditional Markdown renderers have performance issues in streaming scenarios: they re-parse the entire document whenever new content arrives, resulting in O(n²) complexity.

Incremark only processes new content. Already-parsed blocks are never reprocessed, reducing complexity to O(n).

Usage Across All Four Frameworks

The component API is identical across all four frameworks, differing only in syntax:

Vue

<script setup>
import { IncremarkContent } from '@incremark/vue'
// ...
</script>

<template>
  <IncremarkContent :content="content" :is-finished="isFinished" />
</template>

React

import { IncremarkContent } from '@incremark/react'
// ...

<IncremarkContent content={content} isFinished={isFinished} />

Svelte

<script>
import { IncremarkContent } from '@incremark/svelte'
// ...
</script>

<IncremarkContent content={content} isFinished={isFinished} />

Solid

import { IncremarkContent } from '@incremark/solid'
// ...

<IncremarkContent content={content()} isFinished={isFinished()} />

Apart from each framework's reactive syntax (Vue's ref, React's useState, Svelte's $state, Solid's createSignal), the component usage is completely unified.

Live Demos

Links

MIT License.

From O(n ) to O(n): Building a Streaming Markdown Renderer for the AI Era

king — Thu, 08 Jan 2026 03:32:35 +0000

From O(n²) to O(n): Building a Streaming Markdown Renderer for the AI Era

If you've built an AI chat application, you've probably noticed something frustrating: the longer the conversation gets, the slower the rendering becomes.

The reason is simple — every time the AI outputs a new token, traditional markdown parsers re-parse the entire document from scratch. This is a fundamental architectural problem, and it only gets worse as AI outputs get longer.

We built Incremark to fix this.

The Uncomfortable Truth About AI in 2025

If you've been following AI trends, you know the numbers are getting crazy:

2022: GPT-3.5 responses? A few hundred words, no big deal
2023: GPT-4 cranks it up to 2,000-4,000 words
2024-2025: Reasoning models (o1, DeepSeek R1) are outputting 10,000+ word "thinking processes"

We're moving from 4K token conversations to 32K, even 128K. And here's the thing nobody talks about: rendering 500 words and rendering 50,000 words of Markdown are completely different engineering problems.

Most markdown libraries? They were built for blog posts. Not for AI that thinks out loud.

Why Your Markdown Parser is Lying to You

Here's what happens under the hood when you stream AI output through a traditional parser:

Chunk 1: Parse 100 chars ✓
Chunk 2: Parse 200 chars (100 old + 100 new)
Chunk 3: Parse 300 chars (200 old + 100 new)
...
Chunk 100: Parse 10,000 chars 😰

Total work: 100 + 200 + 300 + ... + 10,000 = 5,050,000 character operations.

That's O(n²). The cost doesn't just grow — it explodes.

For a 20KB AI response, this means:

ant-design-x: 1,657 ms parsing time
markstream-vue: 5,755 ms (almost 6 seconds of parsing!)

And these are popular, well-maintained libraries. The problem isn't bad code — it's the wrong architecture.

The Key Insight

Here's the thing:

Once a markdown block is "complete", it will never change.

Think about it. When the AI outputs:

# Heading

This is a paragraph.

After that second blank line, the paragraph is done. Locked in. No matter what comes next — code blocks, lists, more paragraphs — that paragraph will never be touched again.

So why are we re-parsing it 500 times?

How Incremark Actually Works

We built Incremark around this insight. The core algorithm:

Detect stable boundaries — blank lines, new headings, fence closings
Cache completed blocks — never touch them again
Only re-parse the pending block — the one still receiving input

Chunk 1: Parse 100 chars → cache stable blocks
Chunk 2: Parse only ~100 new chars
Chunk 3: Parse only ~100 new chars
...
Chunk 100: Parse only ~100 new chars

Total work: 100 × 100 = 10,000 character operations.

That's 500x less work. Each character is parsed at most once. That's O(n).

Complete Benchmark Data

We benchmarked 38 real markdown files — AI conversations, docs, code analysis reports. Not synthetic test data. Total: 6,484 lines, 128.55 KB.

Here's the full table:

File	Lines	Size	Incremark	Streamdown	markstream-vue	ant-design-x
test-footnotes-simple.md	15	0.09 KB	0.3 ms	0.0 ms	1.4 ms	0.2 ms
simple-paragraphs.md	16	0.41 KB	0.9 ms	0.9 ms	5.9 ms	1.0 ms
introduction.md	34	1.57 KB	5.6 ms	12.6 ms	75.6 ms	12.8 ms
footnotes.md	52	0.94 KB	1.7 ms	0.2 ms	10.6 ms	1.9 ms
concepts.md	91	4.29 KB	12.0 ms	50.5 ms	381.9 ms	53.6 ms
comparison.md	109	5.39 KB	20.5 ms	74.0 ms	552.2 ms	85.2 ms
complex-html-examples.md	147	3.99 KB	9.0 ms	58.8 ms	279.3 ms	57.2 ms
FOOTNOTE_FIX_SUMMARY.md	236	3.93 KB	22.7 ms	0.5 ms	535.0 ms	120.8 ms
OPTIMIZATION_SUMMARY.md	391	6.24 KB	19.1 ms	208.4 ms	980.6 ms	217.8 ms
BLOCK_TRANSFORMER_ANALYSIS.md	489	9.24 KB	75.7 ms	574.3 ms	1984.1 ms	619.9 ms
test-md-01.md	916	17.67 KB	87.7 ms	1441.1 ms	5754.7 ms	1656.9 ms
Total (38 files)	6484	128.55 KB	519.4 ms	3190.3 ms	14683.9 ms	3728.6 ms

Being Honest: Where We're Slower

You'll notice something weird in the data. For footnotes.md and FOOTNOTE_FIX_SUMMARY.md, Streamdown appears much faster:

File	Incremark	Streamdown	Why?
footnotes.md	1.7 ms	0.2 ms	Streamdown doesn't support footnotes
FOOTNOTE_FIX_SUMMARY.md	22.7 ms	0.5 ms	Same — it just skips them

This isn't a performance issue — it's a feature difference.

When Streamdown encounters [^1] footnote syntax, it simply ignores it. Incremark fully implements footnotes — and we had to solve a tricky streaming-specific problem:

In streaming scenarios, references often arrive before definitions:

Chunk 1: "See footnote[^1] for details..."  // reference arrives first
Chunk 2: "More content..."
Chunk 3: "[^1]: This is the definition"     // definition arrives later

Traditional parsers assume you have the complete document. We built "optimistic references" that gracefully handle incomplete links/images during streaming, then resolve them when definitions arrive.

We chose to fully implement footnotes, math blocks ( $...$ ), and custom containers (:::tip) because that's what real AI content needs.

Where We Actually Shine

Excluding footnote files, look at standard markdown performance:

File	Lines	Incremark	Streamdown	Advantage
concepts.md	91	12.0 ms	50.5 ms	4.2x
comparison.md	109	20.5 ms	74.0 ms	3.6x
complex-html-examples.md	147	9.0 ms	58.8 ms	6.6x
OPTIMIZATION_SUMMARY.md	391	19.1 ms	208.4 ms	10.9x
test-md-01.md	916	87.7 ms	1441.1 ms	16.4x

The pattern is clear: the larger the document, the bigger our advantage.

For the largest file (17.67 KB):

Incremark: 88 ms
ant-design-x: 1,657 ms (18.9x slower)
markstream-vue: 5,755 ms (65.6x slower)

Why Such a Huge Gap?

This is O(n) vs O(n²) in action.

Traditional parsers re-parse the entire document on every chunk:

Chunk 1: Parse 100 chars
Chunk 2: Parse 200 chars (100 old + 100 new)
Chunk 3: Parse 300 chars (200 old + 100 new)
...
Chunk 100: Parse 10,000 chars

Total work: 100 + 200 + ... + 10,000 = 5,050,000 character operations.

Incremark only processes new content:

Chunk 1: Parse 100 chars → cache stable blocks
Chunk 2: Parse only ~100 new chars
Chunk 3: Parse only ~100 new chars
...
Chunk 100: Parse only ~100 new chars

Total work: 100 × 100 = 10,000 character operations.

That's a 500x difference. And it only gets worse as documents grow.

When to Use Incremark

✅ Use Incremark for:

AI chat with streaming output (Claude, ChatGPT, etc.)
Long-form AI content (reasoning models, code generation)
Real-time markdown editors
Content requiring footnotes, math, or custom containers
100K+ token conversations

⚠️ Consider alternatives for:

One-time static markdown rendering (just use marked directly)
Very small files (<500 characters) — the overhead isn't worth it

Two Engines, One Goal

Marked or Micromark? Both have tradeoffs.

Marked is blazing fast but lacks advanced features. Micromark is spec-perfect but heavier.

Our answer: support both.

Engine	Speed	Best For
Marked (default)	⚡⚡⚡⚡⚡	Real-time streaming, AI chat
Micromark	⚡⚡⚡	Complex docs, strict CommonMark

We extended Marked with custom tokenizers for footnotes, math, and containers. If you hit edge cases Marked can't handle, switch to Micromark with one config change.

Both engines produce identical mdast output. Your rendering code doesn't care which one is running.

The Typewriter Problem Nobody Talks About

You know that smooth "typing" effect ChatGPT has? Most implementations do this:

displayText = fullText.slice(0, currentIndex)

This breaks markdown constantly. You get half-rendered **bold** tags, flickering code blocks, syntax that looks drunk.

We moved the animation to the AST level. Our BlockTransformer knows the structure — it animates within nodes, never across them. Result: buttery smooth typing that respects markdown semantics.

Try It Yourself

npm install @incremark/vue  # or react, or svelte

<script setup>
import { ref } from 'vue'
import { IncremarkContent } from '@incremark/vue'

const content = ref('')
const isFinished = ref(false)

async function handleStream(stream) {
  for await (const chunk of stream) {
    content.value += chunk
  }
  isFinished.value = true
}
</script>

<template>
  <IncremarkContent 
    :content="content" 
    :is-finished="isFinished"
    :incremark-options="{ gfm: true, math: true }"
  />
</template>

We support Vue 3, React 18, and Svelte 5 with identical APIs. One core, three frameworks, zero behavior differences.

What's Next

This is version 0.3.0. We're just getting started.

The AI world is moving toward longer outputs, more complex reasoning traces, and richer formatting. Traditional parsers can't keep up — their O(n²) architecture guarantees it.

We built Incremark because we needed it. Hopefully you find it useful too.

📚 Docs: incremark.com
💻 GitHub: kingshuaishuai/incremark
🎮 Live Demos: Vue | React | Svelte

If this saved you debugging time, a ⭐️ on GitHub would mean a lot. Questions? Open an issue or drop a comment below.

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

king — Tue, 16 Dec 2025 03:44:43 +0000

Yesterday, I released incremark, a project I developed over the weekend. The real-world performance exceeded all expectations—typically delivering 2-10x speed improvements for AI streaming scenarios, with even greater gains for longer documents. While initially intended as an internal tool for my product, I realized that open-sourcing it could be a great direction to take.

The Problem

Every time an AI streams a new chunk of text, traditional markdown parsers re-parse the entire document from scratch—wasting CPU cycles on content that's already been rendered. Incremark solves this by parsing only what's new.

Benchmark Results: See It to Believe It

Short Markdown Document:

Longer Markdown Document:

Note: The performance improvement multiplier may vary between benchmark runs due to the chunking strategy. The demo page uses random chunk lengths: const chunks = content.match(/[\s\S]{1,20}/g) || []. This chunking affects stable block generation and better 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 website does not use any artificial chunking strategies to inflate results.

Live Demos:

Vue Demo: https://incremark-vue.vercel.app/
React Demo: https://incremark-react.vercel.app/
Documentation: https://incremark-docs.vercel.app/

For extremely long markdown documents, the performance gains are even more dramatic. A 20KB markdown benchmark achieves an incredible 46x speed improvement. The longer your content, the more dramatic the speedup—there's no theoretical upper limit.

Key Advantages

⚡ Typically 2-10x faster for AI streaming scenarios

🚀 Even greater speedup for longer documents (up to 46x tested)

🎯 Zero redundant parsing - each character is parsed only once

✨ Perfect for AI streaming - optimized for incremental updates

💪 Works with regular markdown too - not just for AI use cases

🔧 Framework support - React and Vue components included

Why Is It So Fast?

The Problem with Traditional Parsers

Anyone who has built an AI chat application knows that AI streaming output delivers content in small chunks to the frontend. After receiving each chunk, the entire markdown string must be fed to a markdown parser (whether it's remark, marked.js, or markdown-it). These parsers re-parse the entire markdown document every time, even the parts that have already been rendered and are stable. This creates significant performance waste.

Tools like vue-stream-markdown have made efforts at the rendering layer by rendering stable tokens as stable components and only updating unstable components, achieving smooth streaming output in the UI layer.

However, this still doesn't solve the fundamental performance issue: repeated parsing of markdown text. This is the real CPU performance monster. The longer the output document, the higher the performance waste.

Incremark's Core Performance Optimization

Beyond achieving smooth component reuse and updates at the UI rendering layer, incremark's key innovation is in markdown parsing: it only parses unstable markdown blocks and never re-parses stable ones. This reduces parsing complexity from O(n²) to O(n). In theory, the longer the output, the greater the performance improvement.

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

Traditional parsers re-parse the entire document every time, causing parsing work to grow quadratically. Incremark's IncremarkParser class uses an incremental parsing 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 in the append function is a 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 maintains several key states to eliminate duplicate work:

buffer: Accumulated unparsed content
completedBlocks: Array of completed blocks that are never re-parsed
lineOffsets: Line offset prefix sums, supporting O(1) line position 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

This design delivers exceptional results in real-world testing:

Document Size	Traditional Parser (chars)	Incremark (chars)	Reduction
1KB	1,010,000	20,000	98%
5KB	25,050,000	100,000	99.6%
20KB	400,200,000	400,000	99.9%

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: https://incremark-docs.vercel.app/
🎮 Live Demo (Vue): https://incremark-vue.vercel.app/
🎮 Live Demo (React): https://incremark-react.vercel.app/
💻 GitHub Repository: https://github.com/kingshuaishuai/incremark

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: https://github.com/kingshuaishuai/incremark
💡 Report Issues or Ideas: GitHub Issues
🤝 Contribute: Pull requests are welcome!

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