blockmark-preview

Zero-config Markdown preview components for React, Vue, Svelte, Angular, and HTML5. Powered by blockmark.

Features:

• GFM, syntax highlighting (highlight.js), Mermaid diagrams (WebAssembly), math (KaTeX), YAML front matter
• React, Vue 3, Svelte 5, Angular 17+, and Web Component adapters
• Virtual scroll for large documents
• Light / dark / auto theme — CSS and KaTeX styles injected automatically; no manual setup

Installation

npm install blockmark-preview blockmark

Usage

React

import { BlockmarkPreview } from 'blockmark-preview/react'

<BlockmarkPreview markdown={content} theme="auto" />

For incremental editing (textarea sync):

import { useRef, useEffect } from 'react'
import { BlockmarkPreview } from 'blockmark-preview/react'
import type { Preview } from 'blockmark-preview/react'

const previewRef = useRef<Preview>(null)

// initial parse
useEffect(() => { previewRef.current?.core.parse(markdown) }, [])

// on each edit: derive r1,c1,r2,c2 from the textarea selection, then:
previewRef.current?.core.update(r1, c1, r2, c2, inserted)

<BlockmarkPreview ref={previewRef} theme="auto" />

Vue

<script setup lang="ts">
import { BlockmarkPreview } from 'blockmark-preview/vue'
</script>

<template>
  <BlockmarkPreview :markdown="content" theme="auto" />
</template>

Svelte

<script>
  import BlockmarkPreview from 'blockmark-preview/svelte'
</script>

<BlockmarkPreview markdown={content} theme="auto" />

Angular

import { BlockmarkPreviewComponent } from 'blockmark-preview/angular'

@Component({
  imports: [BlockmarkPreviewComponent],
  template: `<blockmark-preview [markdown]="content" theme="auto" />`
})

Web Component

<script type="module">
  import 'blockmark-preview/web'
</script>
<blockmark-preview markdown="# Hello" theme="auto"></blockmark-preview>

Props / Attributes

| Prop | Type | Default | Description | |------|------|---------|-------------| | markdown | string | — | Markdown string to render | | src | string | — | URL to fetch Markdown from (used when markdown is not set) | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | Color theme | | batchSizes | number[] | blockmark default | Progressive rendering batch sizes | | disableIndentedCode | boolean | false | Disable 4-space indented code blocks | | wordWrap | boolean | true | Enable word wrap (React only) |

Preview API (React ref)

const previewRef = useRef<Preview>(null)
<BlockmarkPreview ref={previewRef} theme="auto" />

| Member | Type | Description | |--------|------|-------------| | core | BlockMaker | Direct access to the underlying parser for parse(), update(), allBlocks(), etc. | | scrollTo(x, y) | void | Scroll the preview to a pixel position | | scrollTextTo(rune, line) | void | Scroll to a text position | | scrollRawTextTo(line) | void | Scroll to a raw source line number | | getLineMappings() | {n,m,y}[] | Map each rendered line n to raw source line m and viewport Y; real DOM positions | | onScroll(cb) | void | Register scroll callback: (x: number, y: number) => void | | onTextScroll(cb) | void | Register text-scroll callback: (line: number, fromUser: boolean) => void; fires only when the line changes | | onRawTextScroll(cb) | void | Register raw-line scroll callback: (line: number, fromUser: boolean) => void; fires only when the line changes | | onCursorUpdated(cb) | void | Register click-to-cursor callback: (line: number, col: number) => void | | destroy() | void | Tear down the preview (called automatically on unmount) |

Container Setup

The BlockmarkPreview component renders as a single .blockmark-preview element that is its own scroll root. Give it layout constraints directly:

.blockmark-preview { flex: 1; min-height: 0; overflow-y: auto; }

Vite Setup

Add mermaid-rs-wasm to optimizeDeps.exclude so Vite serves the WASM binary with the correct Content-Type:

// vite.config.js
export default {
  optimizeDeps: { exclude: ['mermaid-rs-wasm'] }
}

Build

npm run build