Frontend · GitHub · Markdown

UnifiedJS Turns Any Text Format Into a Parse-Transform-Generate Pipeline

By 秋天的一阵风 · Jul 16, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Content conversion in frontend projects usually means gluing together single-purpose libraries with ad-hoc logic. UnifiedJS replaces that with a composable pipeline where the same AST manipulation works across Markdown, HTML, and JSX, so a custom transform written once applies everywhere.

Summary

UnifiedJS treats every text format as an abstract syntax tree, making Markdown-to-HTML, stripping formatting, or adding code highlighting a matter of swapping plugins in a single pipeline. The framework's core is a parse-transform-stringify flow: remark-parse builds a Markdown AST, plugins like strip-markdown or rehype-highlight mutate it, and a stringifier outputs the target format.

Three hands-on cases walk through removing all Markdown formatting to plain text, converting Markdown to syntax-highlighted HTML, and building a Vue 3 real-time preview component. Each case shows the exact npm installs and pipeline assembly, with synchronous processing for small texts and Web Worker chunking for documents over 100,000 words.

Advanced patterns include caching the processor instance for a 40% speedup under frequent re-renders, and assembling plugin chains for specific domains like component-library docs (auto-TOC, slug anchors, image lazy-loading) or WeChat Official Account formatting with watermark injection and mobile width constraints.

Takeaways

— UnifiedJS is not a Markdown converter; it is a text-processing framework built on a parse-transform-stringify pipeline driven by ASTs.

— strip-markdown handles all standard Markdown syntax, including tables, code blocks, and footnotes, without manual edge-case handling.

— remark-rehype bridges the Markdown AST and HTML AST ecosystems, letting a single pipeline produce syntax-highlighted HTML.

— Caching the processor instance avoids repeated initialization and yields roughly a 40% performance gain during high-frequency conversions like live preview.

— Documents larger than 10,000 characters benefit from splitting by paragraph and offloading parsing to a Web Worker to keep the main thread responsive.

— Plugin chains can target specific output contexts: component-library docs (remark-toc, rehype-slug, rehype-autolink-headings) or WeChat formatting (rehype-weixin-style, rehype-img-process with watermark and max-width).

Conclusions

UnifiedJS's real power is that the AST is format-agnostic; a transform written for Markdown nodes can often be reused on HTML nodes with minimal adjustment, collapsing what would otherwise be separate conversion scripts.

The framework's plugin granularity means performance tuning is explicit — caching the processor, choosing sync vs. async, and deciding when to spawn a Worker are all developer-controlled, not hidden behind a black-box API.

Strip-markdown is a better default than hand-rolled regex because it tracks the Markdown spec; custom regex solutions silently break on footnotes, nested formatting, or edge-case table syntax that the plugin already handles.

Concepts & terms

AST (Abstract Syntax Tree)

A tree representation of the syntactic structure of text. In UnifiedJS, every format (Markdown, HTML) is first parsed into an AST, allowing plugins to traverse and modify nodes programmatically before the tree is serialized back into a target format.

remark-rehype

A bridge plugin that converts a Markdown AST (from remark-parse) into an HTML AST (for the rehype ecosystem), enabling a single pipeline to start with Markdown and end with HTML transformations like syntax highlighting.

strip-markdown

A remark plugin that replaces all formatted Markdown AST nodes (headings, bold, links, tables, code blocks) with plain text nodes, producing a clean text output without any markup.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗