Sample MDX Page

This is a sample MDX page to demonstrate MDX functionality. MDX allows you to use JSX components directly in your markdown content, combining the best of both worlds.

Introduction to MDX

MDX is a format that combines Markdown with JSX. It lets you write JSX directly in your markdown files, making it perfect for content-heavy sites that need dynamic components.

"MDX is markdown for the component era." — MDX Documentation

Features

• Rich content: Mix markdown with JSX
• Components: Import and use React components
• Styling: Apply custom styling to markdown elements
• Dynamic content: Include interactive elements in your content
• Code highlighting: Syntax highlighting for code blocks
• Reusable components: Create a library of content components

Code Examples

JavaScript

// Sample JavaScript code
function greet(name) {
  return `Hello, ${name}!`
}
 
console.log(greet('MDX User'))

TypeScript

// Sample TypeScript code
function greet(name: string): string {
  return `Hello, ${name}!`
}
 
interface User {
  firstName: string
  lastName: string
  age: number
}
 
const user: User = {
  firstName: 'MDX',
  lastName: 'User',
  age: 30,
}
 
console.log(greet(user.firstName))

React Component

import React, { useState } from 'react'
 
interface CounterProps {
  initialCount?: number
}
 
const Counter: React.FC<CounterProps> = ({ initialCount = 0 }) => {
  const [count, setCount] = useState(initialCount)
 
  return (
    <div className="rounded-lg bg-gray-100 p-4">
      <p className="text-lg font-bold">Count: {count}</p>
      <button
        className="mr-2 rounded bg-blue-500 px-4 py-2 text-white"
        onClick={() => setCount(count + 1)}
      >
        Increment
      </button>
      <button
        className="rounded bg-gray-500 px-4 py-2 text-white"
        onClick={() => setCount(initialCount)}
      >
        Reset
      </button>
    </div>
  )
}
 
export default Counter

Using Components in MDX

One of the most powerful features of MDX is the ability to import and use React components directly in your content.

Here's an example of how you would use a component in MDX:

import { Counter } from '../components/Counter'
 
# My Interactive Page
 
Here's a counter component:
 
<Counter initialCount={5} />
 
You can interact with it directly in the content!

Formatting Examples

Text Formatting

You can use all standard markdown formatting:

Bold text for emphasis
Italic text for slight emphasis
~~Strikethrough~~ for deleted text
inline code for code snippets
Links to other resources
for images

Lists

Ordered Lists

1. First item
2. Second item
3. Nested item 1
4. Nested item 2
5. Third item

Unordered Lists

• Apples
  • Gala
  • Honey
• Oranges
• Bananas

Blockquotes

This is a blockquote.

It can span multiple lines.

And can be nested.

Tables

| Feature | Markdown | MDX | HTML | | -------------- | -------- | ------ | ------- | | Basic text | ✅ | ✅ | ✅ | | Components | ❌ | ✅ | ❌ | | JavaScript | ❌ | ✅ | Partial | | Ease of use | High | High | Medium | | Learning curve | Low | Medium | High |

Why Use MDX?

MDX allows you to use JSX in your markdown content. This means you can import and use React components directly in your markdown.

Benefits include:

• Interactive documentation: Add live examples to your docs
• Rich blog posts: Enhance blog content with custom components
• Dynamic content sites: Create content-driven sites with interactive elements
• Consistent styling: Apply your design system to markdown content

You can also use all standard markdown features like:

1. Lists
2. Tables
3. Images
4. Code blocks

| Feature | Supported | | ---------- | --------- | | Markdown | ✅ | | JSX | ✅ | | Components | ✅ | | Styling | ✅ |

Advanced Usage

Frontmatter

You can use frontmatter in MDX to add metadata:

---
title: My MDX Page
date: 2025-07-13
author: Daniel Krsiak
tags: [mdx, react, nextjs]
---
 
# {frontmatter.title}
 
Posted on {frontmatter.date} by {frontmatter.author}
 
...content...

Custom Layouts

You can wrap MDX content in custom layouts:

import React from 'react'
import MyLayout from '../components/MyLayout'
 
interface LayoutProps {
  children: React.ReactNode
}
 
export default function Layout({ children }: LayoutProps): React.ReactElement {
  return <MyLayout>{children}</MyLayout>
}
 
# Page Content
 
This will be wrapped in the custom layout.

Conclusion

MDX is a powerful way to create content-rich pages while leveraging the full capabilities of React. It's perfect for:

• Documentation sites
• Blogs with interactive elements
• Tutorial websites
• Content-heavy applications

By combining the simplicity of Markdown with the power of React components, MDX gives you the best of both worlds.

This is a sample page created to demonstrate MDX capabilities in Next.js