Browser Usage

Using mdx-formatter in browser environments via WASM

Browser Usage

For browser environments, use the dedicated WASM package. The main @takazudo/mdx-formatter package uses a native Rust module (napi-rs) that only works in Node.js.

Installation

npm install @takazudo/mdx-formatter-wasm

Usage

import init, { format, format_with_defaults } from "@takazudo/mdx-formatter-wasm";

// Initialize the WASM module first
await init();

// Format with default settings
const formatted = format_with_defaults("# Hello\nSome text");

// Format with custom settings (JSON string)
const settings = JSON.stringify({
  addEmptyLineBetweenElements: { enabled: true },
  formatMultiLineJsx: { indentSize: 4 },
});
const formatted2 = format("# Hello\nSome text", settings);

The WASM module provides the same Rust formatting engine that powers the Node.js package, compiled to WebAssembly. See the Playground for a live example.

Detecting MDX

The detectMdx utility is available from the main package’s /browser subpath export (no Node.js fs/path dependencies):

import { detectMdx } from "@takazudo/mdx-formatter/browser";

if (detectMdx(content)) {
  console.log("Content has MDX syntax");
}

Note: The /browser export only provides detectMdx. For formatting, use the WASM package above.

Limitations

Config file loading (.mdx-formatter.json) is not supported in browser/WASM mode because it requires Node.js file system access. Pass settings directly to the format function instead.

Package Summary