MDX

MDX is a library that allows writing markdown files as React components and import JSX directly within the markdown content.

Tuono fully supports MDX.

You can start using it right away with the with-mdx template:

tuono new tuono-with-mdx --template with-mdx

1. Install MDX via your Node.js preferred package manager.

   npm install @mdx-js/react

2. Install also the @mdx-js/rollup vite plugin as devDependency

   npm install -D @mdx-js/rollup

3. Add the MDX vite plugin to tuono.config.ts, as seen in the example below:

   import type { TuonoConfig } from 'tuono/config'
   import mdx from '@mdx-js/rollup'
   
   const config: TuonoConfig = {
     vite: {
       optimizeDeps: {
         exclude: ['@mdx-js/react'],
       },
       plugins: [
         { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
       ],
     },
   }
   
   export default config

MDX is ready to go! You can now start declaring any component/route as MDX:

// src/routes/about.mdx

## About page