Beautiful Documentation, Zero Config
A Dioxus-powered documentation framework with MDX rendering, OpenAPI reference pages, full-text search, and dark/light themes — all embedded at compile time.
Everything You Need
A complete toolkit for building beautiful documentation sites.
MDX Documents
Write docs in MDX with full component support, syntax highlighting, and table of contents generation.
OpenAPI Reference
Auto-generate interactive API reference pages from your OpenAPI/Swagger specifications.
Full-Text Search
Instant search across all documentation with keyboard shortcuts and highlighted results.
Dark & Light Themes
Built-in theme support with DaisyUI. Seamless switching with persisted preferences.
Compile-Time Embedding
All content is embedded at build time — no file I/O at runtime, instant page loads.
Dioxus Fullstack
Server-side rendering, hydration, and server functions out of the box with Dioxus 0.7.
Simple Integration
Set up your documentation site with an skill and a bit of glue code.
Claude Code Integration Skill
This repo includes a Claude Code skill that automates the entire setup. Install the skill once, then use it in any Dioxus project.
Install the skill
git clone https://github.com/hauju/dioxus-docs-kit.git /tmp/ddk && cp -r /tmp/ddk/skills/dioxus-docs-kit-integration ~/.claude/skills/Open your Dioxus project in Claude Code and ask:
"Add dioxus-docs-kit documentation to this project"Claude handles the rest — dependencies, build.rs, routes, layout, Tailwind safelist, and starter content
use dioxus_docs_kit::{
DocsConfig, DocsContext, DocsLayout, DocsPageContent,
DocsRegistry, SearchButton, use_docs_providers,
};
use std::sync::LazyLock;
// build.rs: dioxus_docs_kit_build::generate_content_map("docs/_nav.json");
dioxus_docs_kit::doc_content_map!();
static DOCS: LazyLock<DocsRegistry> = LazyLock::new(|| {
DocsConfig::new(include_str!("../docs/_nav.json"), doc_content_map())
.with_openapi("api-reference", include_str!("../docs/api.yaml"))
.with_default_path("getting-started/introduction")
.with_theme_toggle("light", "dark", "dark")
.build()
});
#[component]
fn MyDocsLayout() -> Element {
let docs_ctx = DocsContext { /* ... */ };
let providers = use_docs_providers(&DOCS, docs_ctx);
rsx! {
DocsLayout {
header: rsx! { SearchButton { search_open: providers.search_open } },
Outlet::<Route> {}
}
}
}