MDXをすぐに編集・プレビュー
MarkdownとMDX文書のためのシンプルな作業スペース。
左で編集、右でプレビューし、下書きはブラウザに保存されます。
アカウント不要。文書はブラウザ内に保持されます。
MDX Playground
Changes are saved locally and never leave your browser.
---
title: Hello MDX
description: A tiny document rendered in real time
---
# Hello, MDX Viewer 👋
Write **Markdown** and MDX-flavored content on the left, then see the result instantly.
## What works here
- Headings, lists and links
- Tables and task lists
- Quotes and fenced code blocks
- Inline HTML supported by the renderer
> Your draft is saved locally in this browser.
```tsx
export function Greeting({ name }: { name: string }) {
return <strong>Hello {name}!</strong>;
}
```
| Feature | Status |
| --- | --- |
| Live preview | ✅ |
| Local autosave | ✅ |
| Download .mdx | ✅ |
title: Hello MDX description: A tiny document rendered in real time
Hello, MDX Viewer 👋
Write Markdown and MDX-flavored content on the left, then see the result instantly.
What works here
- Headings, lists and links
- Tables and task lists
- Quotes and fenced code blocks
- Inline HTML supported by the renderer
Your draft is saved locally in this browser.
export function Greeting({ name }: { name: string }) {
return <strong>Hello {name}!</strong>;
}
| Feature | Status |
|---|---|
| Live preview | ✅ |
| Local autosave | ✅ |
| Download .mdx | ✅ |
---
title: Hello MDX
description: A tiny document rendered in real time
---
# Hello, MDX Viewer 👋
Write **Markdown** and MDX-flavored content on the left, then see the result instantly.
## What works here
- Headings, lists and links
- Tables and task lists
- Quotes and fenced code blocks
- Inline HTML supported by the renderer
> Your draft is saved locally in this browser.
```tsx
export function Greeting({ name }: { name: string }) {
return <strong>Hello {name}!</strong>;
}
```
| Feature | Status |
| --- | --- |
| Live preview | ✅ |
| Local autosave | ✅ |
| Download .mdx | ✅ |
For safety, this preview renders document markup but does not execute arbitrary JavaScript or imported React components.
MDXに集中できる作業スペース
ドキュメント、README、記事、MDXコンテンツを集中して作成できます。
- リアルタイム編集使い慣れたMarkdownツールバーで書き、結果をすぐに確認できます。
- 下書きを非公開で保存自動保存にはブラウザのローカルストレージを使用します。
- 簡単に書き出しソースをコピーするか、いつでも.mdxファイルを保存できます。
設定ではなく執筆のための設計
プロジェクト作成やアカウント登録なしで、すぐに始められます。
MDXの確認に必要な機能
MarkdownとMDXの下書きに便利なツールです。
ライブプレビュー
見出し、リスト、表、コードを入力と同時に確認。
ローカル保存
同じブラウザで後から下書きを続けられます。
書式ツールバー
構文をすべて覚えずに書式を適用できます。
ソースをコピー
文書全体をワンクリックでコピー。
MDXをダウンロード
内容を.mdxファイルとして書き出します。
サンプル文書
サンプルを復元して構文を試せます。
よくある質問
大切なポイントをわかりやすく説明します。
MDXとは？
MDXはMarkdownとJSXを組み合わせた形式で、ドキュメントやブログ、Reactサイトに使われます。
Reactコンポーネントを実行しますか？
安全モードでは実行しません。任意のJavaScriptや信頼できないコンポーネントは動作しません。
文書はアップロードされますか？
いいえ。編集、プレビュー、保存はブラウザ内で行われます。
作業をダウンロードできますか？
はい。document.mdxとして保存するか、ソースをコピーできます。
次の下書きをMDXに
登録や設定なしですぐに始めましょう。