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