or run

tessl search
Log in

Version

Files

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

Agent Success

Agent success rate when using this tile

97%

Improvement

Agent success rate improvement when using this tile compared to baseline

1.08x

Baseline

Agent success rate without this tile

90%

To install, run

tessl 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.