title: "Understanding MDX" description: "Learn the basics of MDX and how to use it in your projects."

Core Concepts

Let's explore the fundamental ideas behind MDX:

Markdown Foundation

MDX builds upon the familiar syntax of Markdown, making it easy to write and format text. You can use headings, lists, links, and other Markdown elements as you normally would.

JSX Integration

The real magic of MDX lies in its ability to embed JSX components directly within your Markdown. This allows you to render interactive elements, visualizations, and custom UI components alongside your textual content.

function MyComponent() {
 return <div>Hello from JSX!</div>;
}


export default MyComponent;

Component Usage

To use a JSX component in your MDX file, simply import it and then render it like any other JSX element.

import MyComponent from './MyComponent';


<MyComponent />

Benefits of MDX

• Enhanced Content: Create richer and more engaging content with interactive components.
• Code Reusability: Reuse components across your documentation and website.
• Developer Experience: Enjoy a seamless authoring experience with the familiar Markdown syntax and the power of JSX.

Example Usage

Here's a simple example of how to use MDX to create a dynamic heading:

import { useState } from 'react';


function DynamicHeading() {
 const [count, setCount] = useState(0);


 return (
 <h1 onClick={() => setCount(count + 1)}>
 Heading with Count: {count}
 </h1>
 );
}


<DynamicHeading />

Getting Started

To start using MDX, you'll need to install the necessary packages and configure your build process. Refer to the MDX documentation for detailed instructions.

Image Example

<AppearanceSection></AppearanceSection>