MDX क्या है?

MDX एक ऐसा format है जो आपको Markdown दस्तावेज़ों के अंदर सीधे JSX लिखने की सुविधा देता है। यह content लेखन के लिए Markdown की सरलता को React components की शक्ति के साथ जोड़ता है, जिससे यह Next.js, Gatsby और Docusaurus जैसे frameworks से बने documentation sites, blogs और content-heavy applications के लिए लोकप्रिय बन गया है। एक MDX फ़ाइल में standard Markdown syntax के साथ-साथ import statements, exported variables और inline JSX components — सब कुछ एक ही फ़ाइल में हो सकता है।

सामान्य Markdown के विपरीत, MDX को JavaScript में compile किया जाता है, जिसका अर्थ है कि आपके JSX या import statements में syntax errors पूरे दस्तावेज़ को तोड़ सकती हैं। इससे MDX content के साथ काम करते समय validation और उचित formatting विशेष रूप से महत्वपूर्ण हो जाती है।

टूल का विवरण

MDX Editor एक browser-आधारित वातावरण प्रदान करता है जहाँ आप MDX content लिख सकते हैं, उसे validate कर सकते हैं और format कर सकते हैं। इसमें Markdown और JSX दोनों के लिए syntax highlighting, एक built-in validator जो आपके MDX में compilation errors की जाँच करता है, और एक formatter जो सुसंगत और पठनीय दस्तावेज़ों के लिए spacing और structure को व्यवस्थित करता है — ये सभी सुविधाएँ शामिल हैं।

उदाहरण

Formatting से पहले:

import {Chart} from './components'
# Dashboard
Some intro text.


Extra blank lines here.
## Section
<Chart data={stats} />

Formatting के बाद:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

विशेषताएँ

  • एक ही editor में Markdown और JSX के लिए syntax highlighting
  • MDX validation जो real time में compilation errors की जाँच करता है
  • स्वचालित formatting जो blank lines और spacing को सामान्य बनाती है
  • Editor को तुरंत reset करने के लिए Clear बटन
  • आपके formatted content को आसानी से export करने के लिए Copy सुविधा

यह कैसे काम करता है

  • Validate: आपके MDX content को @mdx-js/mdx compiler का उपयोग करके compile करता है। यदि दस्तावेज़ में syntax errors हैं — जैसे कि गलत JSX, बंद न किए गए tags, या अमान्य imports — तो validator error message दिखाता है ताकि आप उसे ठीक कर सकें।
  • Format: एकाधिक लगातार blank lines को एक में समेटकर, headings से पहले और import/export blocks के आसपास blank lines सुनिश्चित करके, और trailing whitespace हटाकर whitespace को सामान्य बनाता है। परिणाम एक स्वच्छ, सुसंगत रूप से संरचित दस्तावेज़ होता है।

उपयोग के मामले

  • MDX का उपयोग करने वाले React-आधारित projects के लिए documentation लिखना
  • Static site deploy करने से पहले MDX compilation errors को debug करना
  • एकाधिक लेखकों द्वारा योगदान की गई असंगत spacing वाली MDX फ़ाइलों को साफ़ करना