Technical previewShare feedback

Search

Search documentation

MDX plugins

Updated Nov 1, 2026

MDX is Markdown with JSX. Parse it with md.parse and md.mdx, turn it into hast with md.toHtml, then compile it to JavaScript with mdx.compile.

mdx.compile

Compiles the hast of an MDX document into a JavaScript module whose default export renders it.

from textlane import md, mdx, textlane

file = (
    textlane()
    .use(md.parse())
    .use(md.mdx())
    .use(md.to_html())
    .use(mdx.compile())
    .process("# Hi {name}")
)
file["value"]
# import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
# function _createMdxContent(props) {
#   const _components = {
#     h1: "h1",
#     ...props.components
# …

Follows @mdx-js/mdx.

OptionTypeDefaultDescription
jsxboolFalseKeep JSX in the output instead of compiling it to function calls.
jsxRuntimeOptional[str]NoneThe JSX runtime: automatic (default) or classic.
jsxImportSourceOptional[str]NoneWhere the automatic runtime imports jsx and jsxs from (default react).
pragmaOptional[str]NoneThe classic runtime's element function (default React.createElement).
pragmaFragOptional[str]NoneThe classic runtime's fragment (default React.Fragment).
pragmaImportSourceOptional[str]NoneWhere the classic runtime imports the pragma's first name from (default react).
providerImportSourceOptional[str]NoneWhere useMDXComponents is imported from, to take components from a provider.
outputFormatOptional[str]Noneprogram (default), a module, or function-body, the body of a function that gets the runtime as its first argument.
elementAttributeNameCaseOptional[str]NoneHow attribute names of HTML elements are cased: react (default) or html.
stylePropertyNameCaseOptional[str]NoneHow style property names are cased: dom (default) or css.
tableCellAlignToStyleOptional[bool]NoneTurn align on table cells into a textAlign style (default true).

Created with ❤ and Livemark