Rike Pool

Showcase

MDX lets you use interactive components, variables, and JavaScript logic directly inside Markdown. It’s a direct upgrade, giving you the simplicity of Markdown for writing with the full power of a component framework like React or Svelte when you need it [^1].

This post is a live demonstration of what you can do with MDX in an Astro project. We’ll cover everything from inline expressions and data imports to custom components and new features from 2025. It’s a great example of how modern tools are softening the stack, making it easier to build dynamic, interactive content without complex setups.

In short: you get the best of both worlds - a simple writing experience and limitless interactivity.

---

1. Inline JavaScript Expressions

You can use JavaScript variables and expressions directly in your content. First, define your variables in an export statement.

Then, use them in your text with curly braces:

Hey, I’m Rike! It’s 2025, and I’ve been building with AI for 6 years.

You can also do math right in your text: 2000 projects, 200 hour weeks, 1000000 possibilities.

---

2. Import and Use Data

You can import local data files, like JSON, and use them to populate your content dynamically.

I’ve built 1500 projects using React, Next.js, Python, TypeScript.

My tech stack includes:

• Web: Astro, Next.js, React
• AI: ComfyUI, LangChain, OpenAI
• Automation: N8N, Make.com

I deploy on: Vercel • Cloudflare • Railway • Modal

---

3. Conditional Rendering

Use standard JavaScript logic to show or hide content based on variables.

This is useful for creating personalized or tiered content.

You can also use ternary operators for simple conditional text.

✅ Expert mode enabled

---

4. Interactive Components

The real power of MDX is importing and using Astro, React, or Svelte components. This goes far beyond the simple media embeds you might use for videos or social posts, which can often be handled with simpler directives.

Callout Component

This is a custom Astro component that renders a styled box.

Counter Button

Here’s an interactive button that manages its own state.

Tag Component

A simple, reusable component for displaying tags.

---

5. Remote Image Optimization (New in 2025!)

As of 2025, Astro’s MDX integration can automatically optimize remote images using standard Markdown syntax. You no longer need a special <Image /> component for this [^2].