Create Next App

Introduction

428 words

3483 chars

# MDX-Craft

> Open-source MDX utility for rich, interactive markdown experiences.

## Open Source First

MDX-Craft is an **MIT-licensed** open-source project that democratizes access to professional documentation tools. We believe great documentation experiences shouldn't be locked behind paywalls or proprietary platforms.

Built by developers, for developers. No vendor lock-in, no licensing fees, just powerful tools at your fingertips.

## Why MDX-Craft?

MDX-Craft empowers developers to create documentation that users actually want to read. Whether you're building API documentation, technical blogs, or knowledge bases, you get professional results without complexity.

**Progressive enhancement** is at the core. Start with basic markdown and add interactive components as needed. Your content remains portable and version-controlled.

## What is MDX-Craft?

MDX-Craft transforms standard markdown into rich, interactive documentation. It bridges the gap between basic markdown processors and complex custom solutions, providing a comprehensive toolkit for building engaging content experiences.

<Tip title="Your Existing Tool Chain">
 Built on **MDX-js** with native **Tailwind v4** support, it seamlessly integrates with your React ecosystem such as **Shadcn** and **Next.js** while maintaining markdown's simplicity.
</Tip>

## The Challenge

Modern developers need more than basic markdown rendering. Current solutions fall short:

- **Tailwind Typography**: Limited to prose classes, lacks interactive components
- **Custom Solutions**: Time-consuming to build and maintain
- **Proprietary Platforms**: Expensive with vendor lock-in

MDX-Craft provides the missing piece: an open-source solution with enterprise features.

## Core Features

<Stack direction="horizontal" wrap fullWidth>
 <Card title="Component Library" className="flex-1" size="sm">
 10+ professionally designed components including code blocks, tabs, accordions, and callouts. Each component crafted for aesthetics and functionality.
 </Card>
 
 <Card title="Tailwind v4 Native" className="flex-1" size="sm">
 
 First-class Tailwind CSS v4 support. Your documentation seamlessly matches your application's design system without style conflicts.
 
 </Card>
</Stack>

<Stack direction="horizontal" wrap>
 <Card title="Plugin Ecosystem" className="flex-1" size="sm">
 
 Full support for remark and rehype plugins. Extend functionality with custom components and transformations as needed.
 
 </Card>
 
 <Card title="Production Ready" className="flex-1" size="sm">
 
 TypeScript support, accessibility features, dark mode, and optimized performance. Every component designed for real-world usage.
 
 </Card>
</Stack>

## Roadmap

<Steps>
 <Step title="More Core Components">
 We are working on more components to make your documentation more engaging and interactive.
 </Step>
 <Step title="MDX Editor">
 We are working on a full-featured MDX editor with live preview for seamless content creation and real-time visualization.
 </Step>
 <Step title="Performance Optimization and Error Handling">
 We are working on performance optimization and error handling to make your documentation more stable and reliable.
 </Step>
</Steps>

---

**Transform your markdown into experiences worth reading.**