MDAN MDAN Docs
Site
EN 中文

Custom Rendering

If you want to keep the MDAN browser runtime while letting your own framework fully own the UI, this is the path to take.

Shared Principle

In other words: keep the MDAN behavior layer, replace the view layer.

Lifecycle Pattern

Whether you use Vue or React, the recommended pattern is the same:

  1. create the host once in the component mount lifecycle
  2. subscribe to current state immediately after creation
  3. call host.mount()
  4. unsubscribe and host.unmount() during teardown

That avoids duplicate subscriptions, stale runtime instances, and memory leaks.

If you want to inspect raw protocol traffic while building a custom UI, you can also enable browser-side debug messages on the host:

const host = createHeadlessHost({
  root: document,
  debugMessages: true
});

That keeps a browser-visible log of raw Markdown send/receive messages at window.__MDAN_DEBUG__.messages.

Forms and Operations

UI should be derived from current runtime state plus local form state, not from a duplicated set of server assumptions.

Vue Example

Reference: examples/vue-starter/app/client.ts

This is the right path if you want Vue to own the component tree and visual system while keeping MDAN behavior underneath.

React Example

Reference: examples/react-starter/app/client.tsx

This is the right path if you want React to own state projection and interaction components while keeping the same MDAN runtime.

Using a Third-Party Markdown Renderer

If you do not want to use the built-in Markdown rendering behavior, you can also bring a third-party renderer into this path.

Common choices include:

There are two example shapes for this in the repository:

If you want the server output and the default UI to share the same rendering rules as well, see:

In that setup, the same renderer is typically injected into:

That keeps the server-rendered HTML and the default UI aligned.

Common Pitfalls