Learn how to create interactive blog posts with MDX and Sandpack. This post demonstrates code syntax highlighting, live code editing, and custom React components integration.

My MDX Post Title

This is my first post written in MDX.

Here’s some JavaScript code:

function greetUser(name) {
  console.log(`Hello, ${name}! Welcome to my blog.`);
}

const user = 'Yuri';
greetUser(user);

And here’s some TypeScript:

interface User {
  id: number;
  name: string;
  email: string;
}

const createUser = (userData: Omit<User, 'id'>): User => {
  return {
    id: Date.now(),
    ...userData,
  };
};

Interactive Example

Here’s an interactive React component you can edit:

Advanced Example with Custom Setup

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function App() {
const [data, setData] = useState(null);

useEffect(() => {
// Simulated API call
setTimeout(() => {
setData({ message: 'Hello from API!' });
}, 1000);
}, []);

return (

<div style={{ padding: '20px' }}>
<h1>Blog Post Demo</h1>
{data ? <p>{data.message}</p> : <p>Loading...</p>}
</div>
); }

Open Sandbox

My Post

My MDX Post Title

Interactive Example

Advanced Example with Custom Setup