import docs from 'mdx-butler';
import { Component } from 'mdx-butler/client';

// Prepare
const doc = docs<{ title: string }>()[0];

// Serve
return (
  <>
    <h1>{doc.frontmatter.title}</h1>
    <Component doc={doc} />
  </>
);

Fields and their types can be dynamically resolved and inferred.

Most web frameworks and build tools offer plugins to handle MDX documents. While convenient, these plugins can in some cases limit control, force specific dependencies, create performance bottlenecks and complicate the migration of your documentation to a Microservice, CMS or database in the future.

mdx-butler (built upon mdx-bundler) aims to offer a performant, flexible and framework-agnostic abstraction to manage your MDX documents. This maximizes flexibility and future-proofs your work for easy updates, migrations, and changes to your content source.

• Enhanced content organization with typed Frontmatter and MDX syntax support for titles and descriptions within frontmatter.
• Framework independent: Work smoothly without worrying about framework-specific plugins and dependencies.
• Adaptability: Switch content sources (Backend/Service, CMS, database, etc.) without major rewrites.
• Performance: Leverages mdx-bundler and esbuild for efficient compilation and bundling of MDX documents with imported dependencies.
• Customization: Easily inject globals, components, and application logic for rich, interactive documentation.

• vike for providing a customizable, versatile web framework.
• mdx-bundler for providing a blazingly fast esbuild based bundler for MDX files.
• Contentlayer for providing inspiration around the MDX Developer Experience.