Using MDX in Obsidian Notes

While Obsidian uses standard Markdown, your Astro website can take advantage of MDX (Markdown with JSX) to create more interactive and dynamic content. This guide will show you how to use MDX features in your Obsidian notes for Astro.

What is MDX?

MDX is a format that lets you write JSX directly in your Markdown documents. It combines the simplicity of Markdown for content-focused writing with the power of components from frameworks like React, Vue, or Astro.

Adding Components to Your Notes

Basic Component Import

At the top of your MDX file, after the frontmatter, you can import components:

---
title: "My Note"
description: "A note with components"
pubDate: "2024-04-11"
---

import MyComponent from '../../components/MyComponent.astro';

# My Note with Components

Here's my component in action:

<MyComponent prop="value" />

More markdown content here...

Example: Adding an Image Component

The Foxi theme includes an MDXImage component for enhanced images:

import MDXImage from '../../components/MDXImage.astro';

# My Note

<MDXImage 
  src="/images/my-image.jpg" 
  alt="Description of image"
  caption="This is an image caption"
/>

Using JavaScript Expressions

You can use JavaScript expressions directly in your MDX content:

# Dynamic Content

The current year is: {new Date().getFullYear()}

5 + 5 = {5 + 5}

Creating Dynamic Components Inline

You can create and use components right in your MDX file:

# Custom Component Example

{(() => {
  const InfoBox = ({title, children}) => (
    <div style={{
      padding: '1rem',
      border: '1px solid #ccc',
      borderRadius: '0.5rem',
      marginBottom: '1rem'
    }}>
      <h3 style={{marginTop: 0}}>{title}</h3>
      {children}
    </div>
  );
  
  return (
    <InfoBox title="Important Information">
      This is a custom component created right in the MDX file.
    </InfoBox>
  );
})()}

Best Practices for MDX in Obsidian

1. Keep It Simple: While MDX is powerful, use components sparingly for clarity
2. Focus on Content: Let the Markdown shine and use components to enhance, not distract
3. Document Dependencies: Make note of any components your MDX files depend on
4. Test Rendering: Always check how your MDX renders in Astro
5. Avoid Obsidian-Specific Features: Some Obsidian-specific syntax won’t work in MDX

Editing MDX in Obsidian

Obsidian’s Markdown editor will not interpret or render JSX or component syntax. Here’s how to handle MDX in Obsidian:

Tips for Editing

1. Code Blocks: Put complex JSX in code blocks when editing for better readability
2. Comments: Use HTML comments to leave notes for future editing
3. Separate Concerns: Keep complex components in separate files
4. Preview Limitations: Remember that Obsidian’s preview won’t show components

Workflow

1. Write standard Markdown content in Obsidian
2. Add component imports and JSX enhancements
3. Preview in your Astro development server
4. Refine as needed

Example: A Note with Enhanced Features

Here’s an example of a note that combines Markdown with MDX features:

---
title: "Project Planning"
description: "Planning document for our new project"
pubDate: "2024-04-11"
---

import Timeline from '../../components/Timeline.astro';
import StatusBadge from '../../components/StatusBadge.astro';

# Project Planning <StatusBadge status="in-progress" />

## Overview

This document outlines our plans for the new project.

## Timeline

<Timeline 
  milestones={[
    { date: "2024-05-01", title: "Research Phase", status: "completed" },
    { date: "2024-06-15", title: "Design Phase", status: "in-progress" },
    { date: "2024-08-01", title: "Development", status: "upcoming" },
    { date: "2024-10-15", title: "Testing", status: "upcoming" },
    { date: "2024-11-30", title: "Launch", status: "upcoming" }
  ]}
/>

## Action Items

- Research competitors
- Create wireframes
- Develop prototype
- User testing

Conclusion

MDX brings powerful capabilities to your notes, allowing you to create rich, interactive content while maintaining the simplicity of Markdown. By following best practices and understanding the limitations of editing MDX in Obsidian, you can create enhanced content that stands out on your Astro website.