Writing with MDX

MDX is Markdown + JSX. It lets you write Markdown with embedded React components for interactive content.

Basic Syntax

MDX supports all standard Markdown syntax:

• **Bold text** for emphasis
• _Italic text_ for style
• [Links](https://example.com)
• Lists and nested items
• Code blocks with syntax highlighting

Embedding React Components

Define React components directly in your MDX file and use them inline:

export const Callout = ({ children, type = 'info' }) => (
  <div className="p-4 rounded-lg bg-blue-100">
    {children}
  </div>
)

<Callout>
  This is important information!
</Callout>

Frontmatter Metadata

Every newsletter file should start with YAML frontmatter:

---
title: "Newsletter Title"
date: "2024-01-15"
author: "Your Name"
tags: ["tag1", "tag2"]
---

Best Practices

• Keep components small and focused
• Use descriptive component names
• Document complex components with comments
• Test components before publishing
• Use semantic HTML elements