⚡
Incremental Parsing
Only parses new content. Zero overhead for long documents.
IncremarkHigh-performance streaming markdown renderer
Designed for streaming AI output, with extreme performance improvements.
Skip to content
Why Incremark?
Traditional Markdown parsers re-parse the entire document on every new chunk, leading to O(n²) complexity. Incremark's incremental parsing achieves O(n) — the larger the document, the more pronounced the advantage:
| File | Lines | Incremark | Streamdown | markstream | ant-design-x |
|---|---|---|---|---|---|
| concepts.md | 91 | 12.0 ms | 50.5 ms (4.2x) | 381.9 ms (31.9x) | 53.6 ms (4.5x) |
| comparison.md | 109 | 20.5 ms | 74.0 ms (3.6x) | 552.2 ms (26.9x) | 85.2 ms (4.1x) |
| complex-html.md | 147 | 9.0 ms | 58.8 ms (6.6x) | 279.3 ms (31.1x) | 57.2 ms (6.4x) |
| OPTIMIZATION_SUMMARY.md | 391 | 19.1 ms | 208.4 ms (10.9x) | 980.6 ms (51.3x) | 217.8 ms (11.4x) |
| test-md-01.md | 916 | 87.7 ms | 1441.1 ms (16.4x) | 5754.7 ms (65.6x) | 1656.9 ms (18.9x) |
| Total (38 files) | 6484 | 519.4 ms | 3190.3 ms (6.1x) | 14683.9 ms (28.3x) | 3728.6 ms (7.2x) |
📊 Benchmark: 38 real Markdown files, 128.55 KB total. View full results →
Quick Experience
bash
pnpm add @incremark/vue @incremark/themebash
pnpm add @incremark/react @incremark/themebash
pnpm add @incremark/svelte @incremark/themebash
pnpm add @incremark/solid @incremark/themevue
<script setup>
import { ref } from 'vue'
import { IncremarkContent } from '@incremark/vue'
import '@incremark/theme/styles.css'
const content = ref('')
const isFinished = ref(false)
// Handle AI streaming output
async function handleStream(stream) {
for await (const chunk of stream) {
content.value += chunk
}
isFinished.value = true
}
</script>
<template>
<IncremarkContent :content="content" :is-finished="isFinished" />
</template>tsx
import { useState } from 'react'
import { IncremarkContent } from '@incremark/react'
import '@incremark/theme/styles.css'
function App() {
const [content, setContent] = useState('')
const [isFinished, setIsFinished] = useState(false)
// Handle AI streaming output
async function handleStream(stream) {
for await (const chunk of stream) {
setContent(prev => prev + chunk)
}
setIsFinished(true)
}
return <IncremarkContent content={content} isFinished={isFinished} />
}svelte
<script>
import { IncremarkContent } from '@incremark/svelte'
import '@incremark/theme/styles.css'
let content = $state('')
let isFinished = $state(false)
// Handle AI streaming output
async function handleStream(stream) {
for await (const chunk of stream) {
content += chunk
}
isFinished = true
}
</script>
<IncremarkContent {content} {isFinished} />tsx
import { createSignal } from 'solid-js'
import { IncremarkContent } from '@incremark/solid'
import '@incremark/theme/styles.css'
function App() {
const [content, setContent] = createSignal('')
const [isFinished, setIsFinished] = createSignal(false)
// Handle AI streaming output
async function handleStream(stream) {
for await (const chunk of stream) {
setContent(prev => prev + chunk)
}
setIsFinished(true)
}
return <IncremarkContent content={content()} isFinished={isFinished()} />
}