Crate dioxus_mdx 

dioxus-mdx

MDX parsing and rendering components for Dioxus applications.

This crate provides a complete solution for rendering Mintlify-style MDX documentation in Dioxus applications, including:

• Parser: Extracts frontmatter, code blocks, and custom components from MDX
• Components: Pre-built Dioxus components for callouts, cards, tabs, steps, etc.
• Syntax Highlighting: Code blocks with language-aware highlighting

Quick Start

use dioxus::prelude::*;
use dioxus_mdx::{parse_document, MdxContent};

#[component]
fn DocsPage(content: String) -> Element {
    rsx! {
        MdxContent { content }
    }
}

Parsing Only

If you want to parse MDX without using the components:

use dioxus_mdx::{parse_document, parse_mdx, DocNode};

let mdx_content = r#"---
title: Getting Started
---

<Tip>This is a helpful tip!</Tip>

# Introduction

Welcome to the documentation.
"#;

// Parse with frontmatter
let doc = parse_document(mdx_content);
assert_eq!(doc.frontmatter.title, "Getting Started");

// Parse content only
let nodes = parse_mdx("## Hello\n\n<Note>A note</Note>");

Supported Components

• Callouts: <Tip>, <Note>, <Warning>, <Info>
• Cards: <Card>, <CardGroup>
• Tabs: <Tabs>, <Tab>
• Steps: <Steps>, <Step>
• Accordion: <AccordionGroup>, <Accordion>
• Code: <CodeGroup>, fenced code blocks with syntax highlighting
• API Docs: <ParamField>, <ResponseField>, <Expandable>
• Examples: <RequestExample>, <ResponseExample>
• Changelog: <Update>

Styling

Components use Tailwind CSS with DaisyUI classes. Ensure your project has Tailwind and DaisyUI configured. The components use:

• Base/neutral classes: bg-base-200, text-base-content, etc.
• Color classes: text-primary, bg-success/10, etc.
• Typography: prose, prose-sm

Features

• web (default): Enables web-specific features like clipboard copy

Custom Link Handling

For internal navigation, components accept an on_link callback:

use dioxus::prelude::*;
use dioxus_mdx::DocCardGroup;

#[component]
fn DocsPage(group: CardGroupNode) -> Element {
    let nav = use_navigator();

    rsx! {
        DocCardGroup {
            group,
            on_link: move |href: String| nav.push(&href),
        }
    }
}

Re-exports

pub use parser::AccordionGroupNode;

pub use parser::AccordionNode;

pub use parser::ApiInfo;

pub use parser::ApiOperation;

pub use parser::ApiParameter;

pub use parser::ApiRequestBody;

pub use parser::ApiResponse;

pub use parser::ApiServer;

pub use parser::ApiTag;

pub use parser::CalloutNode;

pub use parser::CalloutType;

pub use parser::CardGroupNode;

pub use parser::CardNode;

pub use parser::CodeBlockNode;

pub use parser::CodeGroupNode;

pub use parser::DocFrontmatter;

pub use parser::DocNode;

pub use parser::ExpandableNode;

pub use parser::HttpMethod;

pub use parser::MediaTypeContent;

pub use parser::OpenApiError;

pub use parser::OpenApiNode;

pub use parser::OpenApiSpec;

pub use parser::ParamFieldNode;

pub use parser::ParamLocation;

pub use parser::ParameterLocation;

pub use parser::ParsedDoc;

pub use parser::RequestExampleNode;

pub use parser::ResponseExampleNode;

pub use parser::ResponseFieldNode;

pub use parser::SchemaDefinition;

pub use parser::SchemaType;

pub use parser::StepNode;

pub use parser::StepsNode;

pub use parser::TabNode;

pub use parser::TabsNode;

pub use parser::UpdateNode;

pub use parser::extract_frontmatter;

pub use parser::get_raw_markdown;

pub use parser::highlight_code;

pub use parser::parse_document;

pub use parser::parse_mdx;

pub use parser::parse_openapi;

pub use components::ApiInfoHeader;

pub use components::DocAccordionGroup;

pub use components::DocAccordionItem;

pub use components::DocCallout;

pub use components::DocCard;

pub use components::DocCardGroup;

pub use components::DocCodeBlock;

pub use components::DocCodeGroup;

pub use components::DocContent;

pub use components::DocExpandable;

pub use components::DocNodeRenderer;

pub use components::DocParamField;

pub use components::DocRequestExample;

pub use components::DocResponseExample;

pub use components::DocResponseField;

pub use components::DocSteps;

pub use components::DocTableOfContents;

pub use components::DocTabs;

pub use components::DocUpdate;

pub use components::EndpointCard;

pub use components::EndpointPage;

pub use components::MdxContent;

pub use components::MdxIcon;

pub use components::MdxIcon;

pub use components::MdxRenderer;

pub use components::MdxRenderer;

pub use components::MethodBadge;

pub use components::OpenApiViewer;

pub use components::ParameterItem;

pub use components::ParametersList;

pub use components::RequestBodySection;

pub use components::ResponseItem;

pub use components::ResponsesList;

pub use components::SchemaDefinitions;

pub use components::SchemaTypeLabel;

pub use components::SchemaViewer;

pub use components::TagGroup;

pub use components::UngroupedEndpoints;

pub use components::extract_headers;

pub use components::slugify;

pub use components::MermaidDiagram;

Modules

components

Dioxus components for rendering MDX documentation.

parser

MDX documentation parser for extracting frontmatter and components.