Dioxus Docs Kit

API Reference

Complete API documentation for the dioxus-mdx crate

Overview

The dioxus-mdx crate provides parsing and rendering capabilities for MDX documentation in Dioxus applications.

Core Functions

parse_document

Parses a complete MDX document, extracting frontmatter and content.

content&strrequired

The raw MDX content to parse

Returns: ParsedDoc containing frontmatter, content nodes, and raw markdown.

rust
use dioxus_mdx::parse_document;

let mdx = r#"---
title: My Page
---

## Hello World
"#;

let doc = parse_document(mdx);
assert_eq!(doc.frontmatter.title, "My Page");

parse_mdx

Parses MDX content without frontmatter extraction.

content&strrequired

The MDX content to parse (without frontmatter)

Returns: Vec<DocNode> representing the parsed content tree.

use dioxus_mdx::parse_mdx;

let nodes = parse_mdx("## Hello\n\n

");


## Components

### MdxContent

The main component for rendering MDX content.
contentStringrequired

Raw MDX content to parse and render

rust
use dioxus::prelude::*;
use dioxus_mdx::MdxContent;

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

DocTableOfContents

Displays a table of contents with scroll tracking.

headersstring

" required> List of headers as (id, title, level) tuples

rust
use dioxus_mdx::{DocTableOfContents, extract_headers};

let headers = extract_headers(&mdx_content);
rsx! {
    DocTableOfContents { headers }
}

Types

DocFrontmatter

titleString

Page title used in H1 and browser tab

descriptionany

"> Short description for meta tags

sidebar_titleany

"> Shorter title for sidebar navigation

iconany

"> Lucide icon identifier

DocNode

An enum representing parsed content nodes:

Helper Functions

extract_headers

Extracts headers from markdown content for table of contents.

rust
use dioxus_mdx::extract_headers;

let headers = extract_headers("## Intro\n### Details");
// Returns: [("intro", "Intro", 2), ("details", "Details", 3)]

slugify

Converts a title to a URL-friendly slug.

rust
use dioxus_mdx::slugify;

assert_eq!(slugify("Hello World"), "hello-world");
assert_eq!(slugify("API v1.0"), "api-v1-0");

Usage Example

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

#[component]
fn DocsPage(content: String) -> Element {
    let doc = parse_document(&content);
    let headers = extract_headers(&doc.raw_markdown);

    rsx! {
        div { class: "flex",
            // Sidebar with ToC
            aside {
                DocTableOfContents { headers }
            }
            // Main content
            main {
                h1 { "{doc.frontmatter.title}" }
                MdxContent { content }
            }
        }
    }
}
Navigation