I'm Done with Puppeteer - I Built My Own Markdown Rendering Engine

If you've worked on "Markdown → Image" conversions, you've probably hit this wall:

Markdown → HTML → Browser → Screenshot

And then you deal with:

• Chromium is heavy (deployment pain)
• Pagination is unstable (different results each time)
• Batch rendering performance is terrible
• Serverless environments don't work well

I got fed up with this approach recently, so I built my own: marknative ---

Core Concept (Completely Different from Conventional Solutions)

No HTML, no DOM, no browser.

Instead:

Markdown → AST → Custom Document Model → Layout → Pagination → Canvas Rendering

Simply put:

I implemented a minimalist version of "browser layout" myself (specifically for Markdown).

---

What Can It Do?

1. Direct PNG / SVG Output

import { renderMarkdown } from 'marknative'

const pages = await renderMarkdown('# Hello')

await Bun.write('page-1.png', pages[0].data)

No need for:

• Puppeteer
• Headless Chrome
• Screenshots --- ### 2. Native Pagination Support (And It's Stable)

Default dimensions:

• 1080 × 1440
• Card-like aspect ratio

And pagination is deterministic:

• Same Markdown
• Any environment
• Consistent rendering results --- ### 3. Perfect for Batch Content Generation

For example:

• Xiaohongshu cards
• Tech article images
• AI-generated content images

Compared to Puppeteer:

• Faster startup
• Lower memory
• Easier to scale horizontally --- ## This Direction Is Worth Exploring

Essentially, this type of需求 is really:

"Structured Text → Controllable Layout → Image Output"

But browsers are:

• Too general (designed for web pages)
• Uncontrollable (CSS + layout is too complex)
• Too costly

And Markdown scenarios:

• Fixed structure
• Can be constrained
• Perfect for building a "specialized layout engine" --- ## Technical Highlights (A Few Interesting Ones)
• Using micromark + mdast for parsing
• Implemented block / inline layout from scratch
• Using skia-canvas for direct rendering
• Layout and render are completely decoupled

So theoretically you can:

• Swap renderers (SVG / PDF / WebGL)
• Build a custom theming system
• Build a visual editor (future) --- ## Project Link

👉 https://github.com/liyown/marknative