@markdy/mdx

MDX integration for MarkdyScript with Lighthouse-safe defaults:

• remarkMarkdy converts fenced code blocks (```markdy) into a player component.
• MarkdyPlayer hydrates only when visible and lazy-loads @markdy/renderer-dom.
• Rendered diagrams use the same semantic SVG node cards as @markdy/renderer-dom.

Install

pnpm add @markdy/mdx react react-dom

Package position (text)

@markdy/core -> @markdy/renderer-dom -> @markdy/mdx

MDX integration transforms fenced markdy blocks into lazy player components.

Output preview

Usage

// mdx config
import { remarkMarkdy } from "@markdy/mdx";

export default {
  remarkPlugins: [[remarkMarkdy, { componentName: "MarkdyPlayer" }]],
};

// shared MDX components map
import { MarkdyPlayer } from "@markdy/mdx";

export const mdxComponents = {
  MarkdyPlayer,
};

Then write Markdown:

```markdy width=800 height=400 bg="#07111f" autoplay=false loop=false playback_rate=0.5 scene_boundary_progress=false
scene "Request" theme=paper width=800 height=400
browser Web
service API
beat main:
  show $nodes
  Web -> API "GET /users"
```

Performance Notes

• Default transform options set autoplay=false, loop=false, progressBar=false.
• Runtime player does not import renderer code until the block enters viewport.
• Placeholder is SSR-safe and keeps stable layout ratio to avoid CLS.

Fence Metadata

Fenced block metadata is passed as props to MarkdyPlayer. Snake-case aliases are normalized for renderer options:

| Metadata | Prop | Description | |---|---|---| | progress_bar=false | progressBar={false} | Deprecated compatibility flag for the scene-boundary progress bar | | scene_boundary_progress=false | sceneBoundaryProgress={false} | Preferred flag for the scene-boundary progress bar | | playback_rate=0.5 | playbackRate={0.5} | Timeline speed multiplier |