If you are building a Python backend (such as FastAPI, Flask, or Django) and need to serve MDX content to a frontend, the HtmlRenderer provides a secure, high-performance solution that structurally reflects the Rust AST.
When rendering for the web, you need to define how your custom JSX tags are translated into standard HTML strings.
1. The Source MDX File
mdx
# Dashboard
Here is the server status:
The primary database is **offline**.
2. The Python Backend Mapping
You intercept the JSX tag and inject your own HTML structure, recursively rendering any children (like the bold **offline** text).
python
import html
import omni_mdx
from omni_mdx.renderer import HtmlRenderer
def render_alert(node, ctx) -> str:
"""Custom rendering function for the component."""
# 1. Safely extract native attributes
attrs = node.attributes or {}
level = html.escape(attrs.get("level", "info"))
is_dismissible = attrs.get("dismissible", False)
# 2. Temporarily render inner children (e.g., parsing the **offline** bold tag)
temp_renderer = HtmlRenderer(components=ctx.components)
inner_html = temp_renderer.render(node.children)
# 3. Build the final HTML string
close_btn = "" if is_dismissible else ""
return f'
{close_btn}{inner_html}
'
def main():
# Parse the document
ast = omni_mdx.parse(document_source)
# Initialize the renderer and map the "Alert" tag
renderer = HtmlRenderer(components={"Alert": render_alert}, katex=True)
# Generate the safe HTML string
html_output = renderer.render(ast.nodes)
print(html_output)
# Output:
#
Dashboard
#
Here is the server status:
#
The primary database is offline.
Because the HTML is generated by strictly walking the native AST, it is highly resilient against malformed input and ensures your backend serves structurally sound HTML to your clients.