MDX to PDF Converter & Editor | Online MDX Formatter & Markdown Editor

Drag & drop your MDX/Markdown file here, or click to select a file

# Showcase: Explore MDX Features

Welcome to our MDX showcase! This example demonstrates the powerful mix of Markdown and inline JSX components, highlighting all the cool features you can use in our editor.

## Inline Component Definition

Below, we define an inline component called Alert. This component is declared and exported within the MDX file so you can use it later in the same document.

export const Alert = ({ children, type = "info" }) => {
  return (
    <div style={{
      padding: "1rem",
      border: "1px solid",
      borderColor: type === "warning" ? "#d73a49" : "#28a745",
      backgroundColor: type === "warning" ? "#ffeef0" : "#e6ffed",
      color: type === "warning" ? "#86181d" : "#22863a",
      margin: "1rem 0",
      borderRadius: "4px"
    }}>
      {children}
    </div>
  );
};

## Markdown Elements

This paragraph demonstrates standard Markdown: *italic text*, **bold text**, and <code>inline code</code>.

### Lists

**Unordered List:**

- Unordered item 1
- Unordered item 2 with nested items:
  - Nested item A
  - Nested item B

**Ordered List:**

1. Ordered item 1
2. Ordered item 2
3. Ordered item 3 with nested items:
   - Nested item one
   - Nested item two

## Blockquotes

&gt; This is a blockquote that highlights important information.
&gt;
&gt; &gt; This is a nested blockquote for extra emphasis.

## Table Example

| Feature     | Description                       | Example                              |
|-------------|-----------------------------------|--------------------------------------|
| Heading     | Markdown heading (H1–H6)          | <code># Heading</code>                |
| List        | Unordered or ordered list         | <code>- item</code> or <code>1. item</code>  |
| Blockquote  | Quoted text                       | <code>&gt; Quote</code>               |
| Link        | Hyperlink                         | <code>[GitHub](https://github.com)</code>      |

## Using the Inline Component

<Alert type="warning">
  This warning alert is rendered using the inline Alert component.
</Alert>

## Conditional Rendering

{ true && <p>This paragraph is conditionally rendered because the condition is true.</p> }

## Inline HTML

<div style={{ padding: "1rem", backgroundColor: "#f6f8fa", border: "1px solid #ddd", borderRadius: "4px" }}>
  This inline HTML block demonstrates custom styling and layout.
</div>

## Additional Showcase

This MDX example illustrates how you can seamlessly combine Markdown syntax with inline JSX components and HTML elements to create rich content. Explore and modify this text to see all the possibilities in action!

Loading preview…

How It Works

Upload or Drag & Drop: Use the upload area above to drag and drop your MDX or Markdown file, or click to select a file from your device.
Live Preview: Once uploaded, your file content is displayed in the editor on the left and in the live preview on the right.
Resize Panels: Adjust the size of the editor and preview panels by dragging the blue gutter between them.
Download PDF: When you’re satisfied with your document, click the "Download PDF" button to generate a professional, print-ready PDF.
Troubleshooting & Tips: If you encounter any issues, consult our help documentation or contact support for assistance.