or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

compilation.mdevaluation.mdindex.mdprocessor.md
tile.json

tessl/npm-mdx-js--mdx

MDX compiler that transforms MDX documents into JavaScript

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mdx-js/mdx@3.1.x

To install, run

npx @tessl/cli install tessl/npm-mdx-js--mdx@3.1.0

index.mddocs/

@mdx-js/mdx

@mdx-js/mdx is the core compiler that transforms MDX documents into JavaScript. MDX is an authorable format that seamlessly blends markdown with JSX, enabling the creation of interactive content by importing and embedding React components directly within markdown documents.

Package Information

  • Package Name: @mdx-js/mdx
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @mdx-js/mdx

Core Imports

import { compile, compileSync, createProcessor, evaluate, evaluateSync, run, runSync, nodeTypes } from "@mdx-js/mdx";

For CommonJS:

const { compile, compileSync, createProcessor, evaluate, evaluateSync, run, runSync, nodeTypes } = require("@mdx-js/mdx");

Basic Usage

import { compile } from "@mdx-js/mdx";

// Basic compilation
const mdxSource = `# Hello World

<MyComponent prop="value" />

export const metadata = { title: "Example" };`;

const compiled = await compile(mdxSource, {
  jsx: false,
  format: 'mdx'
});

console.log(String(compiled));

Architecture

@mdx-js/mdx processes MDX through a unified pipeline:

  • MDX Parsing: Parses markdown with JSX extensions using remark-mdx
  • AST Transformation: Converts MDX AST through mdast → hast → esast transformations
  • Code Generation: Generates JavaScript code that renders to JSX runtime calls
  • Plugin System: Supports remark, rehype, and recma plugins for customization
  • Runtime Integration: Works with React, Preact, Vue and other JSX runtimes

Capabilities

Compilation

Core compilation functionality that transforms MDX source code into executable JavaScript. Supports both sync and async compilation with extensive configuration options.

function compile(
  vfileCompatible: Compatible,
  compileOptions?: CompileOptions
): Promise<VFile>;

function compileSync(
  vfileCompatible: Compatible, 
  compileOptions?: CompileOptions
): VFile;

Compilation

Processor Creation

Advanced processor creation for building custom MDX transformation pipelines with full control over the unified processor chain.

function createProcessor(options?: ProcessorOptions): Processor<Root, Program, Program, Program, string>;

interface ProcessorOptions {
  format?: 'md' | 'mdx';
  jsx?: boolean;
  jsxRuntime?: 'automatic' | 'classic';
  jsxImportSource?: string;
  development?: boolean;
  outputFormat?: 'program' | 'function-body';
  baseUrl?: URL | string;
  remarkPlugins?: PluggableList;
  rehypePlugins?: PluggableList;  
  recmaPlugins?: PluggableList;
}

Processor Creation

Evaluation and Runtime

Safe evaluation and runtime execution of compiled MDX code. These functions compile and immediately execute MDX, ideal for development and dynamic content scenarios.

function evaluate(
  file: Compatible,
  options: EvaluateOptions
): Promise<MDXModule>;

function run(
  code: {toString(): string},
  options: RunOptions
): Promise<MDXModule>;

interface EvaluateOptions {
  Fragment: Fragment;
  jsx?: Jsx;
  jsxDEV?: JsxDev; 
  jsxs?: Jsx;
  baseUrl?: URL | string;
  useMDXComponents?: UseMdxComponents;
}

Evaluation and Runtime

Core Types

interface VFile {
  value: string;
  map?: SourceMapGenerator;
  toString(): string;
}

interface MDXModule {
  default: ComponentType<any>;
  [key: string]: any;
}

type Compatible = VFile | VFileValue | URL | string;
type VFileValue = string | Uint8Array;

type Fragment = ComponentType<{children?: ReactNode}>;
type Jsx = (type: any, props: any, key?: any) => any;
type JsxDev = (type: any, props: any, key?: any, isStaticChildren?: boolean, source?: any, self?: any) => any;

interface UseMdxComponents {
  (): MDXComponents;
}

interface MDXComponents {
  [key: string]: ComponentType<any>;
}

Constants

const nodeTypes: readonly ['mdxFlowExpression', 'mdxJsxFlowElement', 'mdxJsxTextElement', 'mdxTextExpression', 'mdxjsEsm'];

MDX node types that are passed through untouched from the mdast tree to the hast tree during processing.