---
title: Full MDX Playground
description: JSX, expressions and components in one document
---

# Full MDX Editor

This page compiles real **MDX** in your browser.

<Callout type="info" title="Real MDX">
  JSX elements, JavaScript expressions and the built-in components below are rendered live.
</Callout>

## Expressions

The answer is **{6 * 7}** and today is **{new Date().toLocaleDateString()}**.

## Components

<div className="demo-grid">
  <Card title="Compose">
    Write Markdown and JSX together in the source editor.
  </Card>
  <Card title="Preview">
    Compilation errors appear without losing your draft.
  </Card>
</div>

<Badge>MDX 3</Badge> <Badge tone="green">GFM</Badge> <Badge tone="violet">React</Badge>

## GitHub-flavored Markdown

| Capability | Ready |
| --- | :---: |
| Tables | ✅ |
| Task lists | ✅ |
| Strikethrough | ✅ |

- [x] Live compilation
- [x] Local autosave
- [ ] Write something wonderful

```tsx
export const meaning = 42
```