What is MDX? Why it is so awesome 🔥

If you are new to markdown and haven’t heard about it, no worries 😉, let me introduce you to the world of Markdown 🌎. Markdown is plain text formatting syntax that converts your text into a valid HTML.

Markdown makes it easier when you are writing a whole bunch of lines.😇 Let's see now how it looks like You must have used GitHub readme 🤔 once or a while, GitHub readme uses markdown.😀

How markdown looks like

once you click on the preview button you will see it get converted to valid HTML like this

After markdown conversion

isn’t it is cool how plain text is getting converted to HTML. 🥳If you wanted to create bold text you would use **text** and so on, you can read more about Markdown on this. You can even use custom HTML elements here if you wish to use.

Then why 🤷‍♂️ there is so much noise about MDX when Markdown is already that good and powerful

There are certain scenarios where things are not fitted well with markdown. For Example

Markdown limits

Here we have to repeat the same thing twice but all we wanted is to change the name of the user, and this template can go along as we do with JSX i.e creating a component then reusing it with passing some props

JSX in markdown

but JSX is not allowed in markdown,🙁 it is where MDX came into the picture. 😋

So, MDX gives leverage the power of using Markdown along with allowing you to use JSX inside it so that you can do a whole lot of things inside markdown 😎, something like including a carousel inside your markdown.

JSX inside Markdown

So now this is allowed in JSX and this will look like something like this.

If you enjoyed reading and learnt something from this article, all I ask you to do is 👏 this. You can share your view also in the comment and your queries if you have after reading. Thank you