Skip to content
ironmark

Vite

ironmark/vite works in Vite 5 or newer and in tools built on it: SvelteKit, Nuxt, Storybook, Vitest.

// vite.config.js
import react from "@vitejs/plugin-react";
import ironmarkMdx from "ironmark/vite";
 
export default {
  plugins: [ironmarkMdx(), react()],
};

Put ironmarkMdx() before the framework plugin. It runs with enforce: "pre", compiles .md and .mdx to JSX and then transforms the JSX with the project's own Vite: Oxc in Vite 8, esbuild before. Imports with ?raw, ?url, ?inline or ?worker are left to Vite.

Preact

import preact from "@preact/preset-vite";
import ironmarkMdx from "ironmark/vite";
 
export default {
  plugins: [ironmarkMdx({ jsxImportSource: "preact" }), preact()],
};

Storybook

In .storybook/main.ts, add the plugin through viteFinal. Use providerImportSource so MDXProvider components from @mdx-js/react apply:

import ironmarkMdx from "ironmark/vite";
 
export default {
  async viteFinal(config) {
    config.plugins = [
      ironmarkMdx({ providerImportSource: "@mdx-js/react" }),
      ...(config.plugins ?? []),
    ];
    return config;
  },
};

See options for everything the plugin accepts.

Edit this page on GitHub