MUI Docs Infra

HAST Utilities

The hastUtils module provides utilities for converting between HAST (Hypertext Abstract Syntax Tree) nodes, strings, and React JSX elements. These utilities are essential for processing syntax-highlighted code and converting markdown/HTML structures to React components.

Features

  • Converts HAST nodes to React JSX elements
  • Extracts plain text from HAST trees
  • Handles serialized HAST JSON format
  • Used in code highlighting and markdown processing pipelines

Usage

import {
  hastToJsx,
  hastOrJsonToJsx,
  stringOrHastToString,
  stringOrHastToJsx,
} from '@mui/internal-docs-infra/pipeline/hastUtils';

// Convert HAST to React JSX
const jsxElement = hastToJsx(hastNode);

// Convert HAST or serialized JSON to JSX
const jsxFromJson = hastOrJsonToJsx({ hastJson: '{"type":"element",...}' });

// Extract plain text from string or HAST
const plainText = stringOrHastToString(hastNodeOrString);

// Convert to JSX with optional highlighting
const jsx = stringOrHastToJsx(hastNodeOrString, true);

API

hastToJsx(hast: HastNodes): React.ReactNode

Converts a HAST node directly to React JSX using hast-util-to-jsx-runtime.

hastOrJsonToJsx(hastOrJson: HastNodes | { hastJson: string }): React.ReactNode

Converts either a HAST node or serialized JSON representation to React JSX.

stringOrHastToString(source: string | HastNodes | { hastJson: string }): string

Extracts plain text from strings, HAST nodes, or serialized HAST JSON using hast-util-to-text.

stringOrHastToJsx(source: string | HastNodes | { hastJson: string }, highlighted?: boolean): React.ReactNode

Converts strings or HAST to JSX. If highlighted is true and source is HAST, returns JSX; otherwise returns plain text.

When to Use

  • When processing syntax-highlighted code in CodeHighlighter
  • When writing custom remark/rehype plugins that need to convert HAST to React
  • When handling serialized HAST data from build-time processing