MDX Collections Svelte

An easy way to create collections of markdown pages in SvelteKit.

• 🪵 CHANGELOG
• 📦 NPM

Example

$lib/collections.ts:

1import {
2    useTypedCollections,
3    type ImportGlobMarkdownMap,
4} from "mdx-collections-svelte"
5import { z } from "mdx-collections-svelte/zod"
6
7/**
8 * All markdown pages.
9 *
10 * Paths that contain (`_`) in their name are ignored to avoid conflict between pages and components.
11 *
12 * [Glob Import](https://vite.dev/guide/features.html#glob-import).
13 */
14export const pages = import.meta.glob(
15    [
16        "/src/content/*/**/*.md",
17        "!/src/content/*/**/_*/*.md", // ignored
18        "!/src/content/*/**/_*.md", // ignored
19    ],
20    { eager: true },
21) satisfies ImportGlobMarkdownMap
22
23const postsSchema = z.object({
24    title: z.string().min(1),
25    description: z.string().min(1),
26})
27
28const productsSchema = z.object({
29    title: z.string().min(1),
30    price: z.number().min(1),
31})
32
33export const collections = useTypedCollections(pages, {
34    posts: postsSchema,
35    products: productsSchema,
36})

posts/+page.ts:

1import { collections } from "$lib/collections.js"
2
3export const load = async () => {
4    const allPosts = collections.getEntries("posts") // You'll get type suggestions.
5    const helloWorldPost = collections.getEntry("hello-world") // You'll get type suggestions.
6    return { allPosts, helloWorldPost }
7}

Empty frontmatter

Use this schema if you don't use frontmatter for a collection.

1z.object({}).default({})