Converts Markdown (

) and HTML<img>
nodes into DOCX-compatibleImageRun
elements.
Using
<img>
tag requires@m2d/html
plugin.
npm install @m2d/image
pnpm add @m2d/image
yarn add @m2d/image
The @m2d/image
plugin for mdast2docx
enables inline image rendering in DOCX files.
It supports:
- Base64 and external URLs
- Common image formats like
jpg
,png
,gif
,bmp
- Fallbacks and transformations
import { imagePlugin } from "@m2d/image";
const plugins = [
htmlPlugin(),
mermaidPlugin(),
imagePlugin(), // ✅ Place after htmlPlugin and mermaidPlugin
tablePlugin(),
];
🧠 If you're using
@m2d/html
, or@m2d/mermaid
ensure it comes before this plugin so HTML-based<img>
or<svg>
tags are parsed correctly.
This plugin is production-ready and powers inline image rendering for mdast2docx
.
It has built-in fallbacks and intelligent resolution for base64 and external images.
💬 Contributions and ideas are welcome!
Feel free to open an issue or PR.
jpeg
jpg
png
bmp
gif
SVG is supported with fallback rendering into PNG.
interface IImagePluginOptions {
scale?: number; // default: 3 — scales image resolution when using base64
fallbackImageType?: "png" | "jpg" | "bmp" | "gif";
imageResolver?: (src: string, options?: IImagePluginOptions) => Promise<IImageOptions>;
}
Use this to override how images are loaded and transformed:
const customResolver: ImageResolver = async (src, options) => {
const response = await fetch(src);
const arrayBuffer = await response.arrayBuffer();
return {
type: "png",
data: arrayBuffer,
transformation: {
width: 400,
height: 300,
},
};
};
imagePlugin({ imageResolver: customResolver });
- Checks if the image is a base64 or remote URL.
- Parses image format, dimensions, and scale.
- Wraps the image as a
docx.ImageRun
with metadata (like alt text). - Provides fallbacks if image type is unsupported or fails.
-
Inline Markdown images:

-
HTML
<img>
tags: when combined with@m2d/html
- Auto-scaled rendering using canvas
-
SVG support with fallback to PNG via
canvas
- Requires client-side (DOM) environment (uses
<canvas>
,<img>
, etc.) - Not compatible with server-side rendering (SSR) Node.js image plugin coming soon!
- External images must be accessible (CORS-safe URLs)
Plugin | Purpose |
---|---|
@m2d/core |
Converts extended MDAST to DOCX |
@m2d/html |
Parses raw HTML to extended MDAST |
@m2d/table |
Renders table nodes to DOCX |
@m2d/list |
Enhanced list support (tasks, bullets) |
If you find this useful:
- ⭐ Star mdast2docx on GitHub
- ❤️ Consider sponsoring
MIT © Mayank Chaudhari
Made with 💖 by Mayank Kumar Chaudhari