vite-plugin-svelte-md

0.6.0 verified Mon Apr 27 auth: no javascript

Vite plugin that converts Markdown files into Svelte component templates, enabling use of Svelte components directly within Markdown content. Current stable version is 0.6.0, released in March 2025. The plugin uses markdown-exit (an async-compatible fork of markdown-it) and supports frontmatter with YAML only. It is distributed as ESM-only, requires Node >=20, and works with Vite 3–8. Key differentiators: seamless integration with SvelteKit and Vite, support for Svelte script tags and components inside Markdown, and head tag generation from frontmatter.

Common errors

error ERR_REQUIRE_ESM: require() of ES Module not supported ↓

cause Using require() with ESM-only package since v0.3.0.

fix

Switch to import syntax or set type: 'module' in package.json.

error Unknown file extension ".md" ↓

cause .md extension not registered with the Svelte plugin.

fix

Ensure svelte({ extensions: ['.md'] }) is configured.

Warnings

breaking ESM-only since v0.3.0; Node >=20 required. ↓

fix Use ESM imports and update Node to 20+.

deprecated Replaced deprecated `context="module"` with `module` attribute in Svelte 5. ↓

fix Update to v0.6.0 or later.

breaking Replaced gray-matter with yaml parser in v0.5.0; JS/JSON frontmatter no longer supported. ↓

fix Convert frontmatter to YAML format.

breaking Replaced markdown-it with markdown-exit in v0.4.0; async plugins now supported. ↓

fix Update plugins for markdown-exit compatibility if they relied on markdown-it specifics.

gotcha Must add '.md' to Svelte plugin's extensions list to process .md files. ↓

fix Set svelte({ extensions: ['.svelte', '.md'] }) in Vite config.

Install

npm install vite-plugin-svelte-md

yarn add vite-plugin-svelte-md

pnpm add vite-plugin-svelte-md

Imports

default

wrong

const svelteMd = require('vite-plugin-svelte-md')

correct

import svelteMd from 'vite-plugin-svelte-md'

ESM-only since v0.3.0. CommonJS require() will throw an error.

Quickstart

Minimal Vite config with Svelte to process .svelte and .md files using vite-plugin-svelte-md.

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import svelteMd from 'vite-plugin-svelte-md';

export default defineConfig({
  plugins: [
    svelteMd(),
    svelte({
      extensions: ['.svelte', '.md'],
    }),
  ],
});