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

hastOrJsonToJsx

| HastNodes
| { hastJson: string }
| { hastGzip: string }

hastToJsx

stringOrHastToJsx

| string
| HastNodes
| { hastJson: string }
| { hastGzip: string }

stringOrHastToString

| string
| HastNodes
| { hastJson: string }
| { hastGzip: string }

Additional Types

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