Get Started with MDX!
This is an interactive environment where you can play around with MDX (Markdown + JSX). Feel free to edit the code and see the output update in real-time.
Here's a simple example of how to use MDX:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
And here's how you can use the Counter
component in your MDX file:
<Counter />
Check out the official MDX documentation for more information.
```mdx
---
title: "MDX Playground: A Starting Point"
description: "Try out MDX features and instantly view the outcomes."
---
# Begin Your MDX Journey!
This is an active space designed for experimenting with MDX (Markdown + JSX). Don't hesitate to modify the code; the resulting output will refresh immediately.
## Defining MDX
MDX provides the ability to combine Markdown and JSX effortlessly. Consequently, you can compose content using well-known Markdown formatting while also incorporating React components directly into your documents.
### Core Attributes
* **React Components in Markdown:** Integrate React components inside your Markdown content.
* **Markdown Files in React:** Import and utilize Markdown files within your React components.
* **Interactive Content:** Develop interactive and dynamic content leveraging React's capabilities.
## Illustration
Below is a basic illustration of MDX usage:
```jsx
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
This demonstrates how to insert the Counter
component into your MDX document:
<Counter>
Consult the official MDX documentation for a deeper understanding.