MDX is JSX in Markdown

MDX is JSX in Markdown
Average rating: 0
(0 votes)

JSX is a very popular choice nowadays for templating in various frameworks. We even wrote about some JSX alternatives for you. And now it’s time to share with you some other useful material regarding this topic. MDX is JSX in Markdown that lets you import components. 

MDX lets you use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components very easy. It lets you write JSX embedded inside markdown. That’s very useful because it allows you to use markdown’s syntax for the little things and JSX for more advanced components. What other advantages we can specify:

  • powerful. MDX blends markdown and JSX syntax to fit perfectly in React/JSX-based projects.
  • everything is a component: You can use existing components inside your MDX and import other MDX files.
  • customizable: you can decide which component is rendered for each markdown element ({ h1: MyHeading }).
  • markdown-based: it’s simple and elegant, you interleave JSX only when you want to.
  • blazing fast: MDX has no runtime, all compilation occurs during the build stage.
  • Fast
  • No runtime compilation
  • Pluggable
  • Element to React component mapping
  • React component import/export
  • Customizable layouts
  • Webpack loader
  • Parcel plugin
  • Next.js plugin
  • Gatsby plugin

MDX seeks to make a writing with markdown and JSX simpler while being more expressive. You have a great range of possibilities when you combine components.

Please find more here.

How about routing in React with hooks? Are you with us? If so, check this material.

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Phone (+1) 9035021111