react-router-markdown

Vite plugin to parse Markdown files as React Router pages. It supports defining React Router's meta function returned data, as frontmatter.

Setup

pnpm add react-router-markdown

Usage

Vite config

// vite.config.ts

import { defineConfig } from 'vite'
import markdown from 'react-router-markdown/vite'

export default defineConfig({
  plugins: [
    markdown({
      parseHtml: true,
      wrapperModule: '@/components/markdown-wrapper',
      handleData: (mdContent, frontmatter) => ({
        layoutClass: 'mx-auto max-w-5xl lg:p-4',
        title: frontmatter.title,
        contentLength: mdContent.length,
      }),
      beforeTransform: (rawFileContent) =>
        rawFileContent.replaceAll('%YEAR%', new Date().getFullYear().toString()),
      afterTransform: (mdContent, frontmatter) => [mdContent, frontmatter],
    }),
  ],
})

Plugin options

• parseHtml?: boolean - Parse HTML tags in markdown as HTML (default: false).
• wrapperModule?: string - Module specifier of a default-exported React wrapper component.
• beforeTransform?: (content: string) => string - Transform raw markdown before frontmatter parsing.
• afterTransform?: (content: string, frontmatter: Record<string, any>) => [string, Record<string, any>] - Transform parsed content/frontmatter.
• handleData?: (content: string, frontmatter: Record<string, any>) => Record<string, any> - Return React Router handle export data.

Imports and TypeScript support

In order to TypeScript import .md files with type hints, add the following to your vite.d.ts file:

/// <reference types="react-router-markdown/references" />

Optionally, you can also add the following to your tsconfig.json file:

{
  "compilerOptions": {
    "types": ["react-router-markdown/references"]
  }
}

Now you can use any .md file as a React Router page.