mdxe

Execute MDX documents as live, interactive applications across any JavaScript runtime.

What is mdxe?

mdxe is the execution layer for MDX documents. It compiles and runs MDX content in:

Node.js - Server-side execution
Edge - Cloudflare Workers, Vercel Edge
Browser - Client-side rendering
Terminals - CLI applications with Ink

Features

Universal Execution - Run MDX anywhere JavaScript runs
Isolated Contexts - Secure sandboxed execution
Hot Reloading - Development with instant feedback
Component Injection - Custom component libraries
Streaming - Progressive rendering support

Runtime Adapters

Package	Runtime	Description
@mdxe/workers	Cloudflare	Edge worker execution (local dev via Miniflare)
@mdxe/hono	Hono	Lightweight web framework
@mdxe/ink	Terminal	CLI applications

Supporting Packages

Package	Purpose
@mdxe/isolate	Sandboxed execution
@mdxe/vitest	Testing utilities
@mdxui/fumadocs	Documentation sites

Installation

npm install mdxe

Or install runtime-specific packages:

# Cloudflare Workers
npm install @mdxe/workers
 
# Hono HTTP serving
npm install @mdxe/hono

Quick Example

import { execute } from 'mdxe'
 
const mdx = `
# Hello World
 
<Counter initial={0} />
`
 
const result = await execute(mdx, {
  components: {
    Counter: ({ initial }) => <button>{initial}</button>
  }
})

Architecture

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Source    │────▶│   Compile   │────▶│   Execute   │
│    MDX      │     │    (mdxld)  │     │   (mdxe)    │
└─────────────┘     └─────────────┘     └─────────────┘
                                               │
                    ┌──────────────────────────┴──────────┐
                    │                                     │
              ┌─────▼─────┐  ┌─────────┐  ┌─────────────┐
              │  Node.js  │  │  Edge   │  │  Browser    │
              └───────────┘  └─────────┘  └─────────────┘

Next Steps

Getting Started - Set up your first mdxe project
Workers Runtime - Cloudflare Workers and local Miniflare execution

mdxe

On this page