SvelteKit

Set up Comark Content in a SvelteKit app.

SvelteKit passes web-standard Request objects to endpoints, so content.handler() plugs in with a one-line +server.ts. Server load functions can also skip HTTP entirely and read the Content instance in-process.

Install the packages

pnpm add comark-content @comark/svelte

Create the Content instance

Put the instance under $lib/server so SvelteKit guarantees it never reaches the browser bundle:

src/lib/server/content.ts
import { comarkContent } from 'comark-content'
import fs from 'comark-content/sources/fs'

export const content = comarkContent({
  source: fs('./content'),
})

Mount the handler

A catch-all endpoint hands SvelteKit's native Request straight to the handler:

src/routes/api/content/[...path]/+server.ts
import { content } from '$lib/server/content'

export const GET = ({ request }) => content.handler(request)

Load and render a page

Server load functions read the Content instance in-process — no round-trip through the endpoint:

src/routes/+page.server.ts
import { error } from '@sveltejs/kit'
import { content } from '$lib/server/content'

export async function load() {
  const page = await content.get('/')
  if (!page) error(404, 'content not found')

  return { page }
}
src/routes/+page.svelte
<script lang="ts">
  import { MarkdownDocument } from '@comark/svelte'

  let { data } = $props()
</script>

<MarkdownDocument value={data} />

Map Markdown components to your own Svelte components through the components prop — see the Svelte renderer.

Optional: read from the browser

For client-side reads (e.g. instant search or navigation without a load round-trip), consume the endpoint with the browser client:

src/lib/content-client.ts
import { createContentClient } from 'comark-content/client'

export const contentClient = createContentClient()
// contentClient.get('/'), contentClient.list(), contentClient.navigation()

Generate source types

Type content.get() from your frontmatter by generating source types:

Terminal
npx comark-content prepare --config src/lib/server/content.ts

Add comark-content.d.ts to your tsconfig.json include — see Type Safety.

Going further

Client & handler

How the handler/client pair works, and how to extend it with plugin pairs.

Caching

Persist parsed bodies with any unstorage driver to speed up reads.

Next.js

Set up Comark Content in a Next.js app.

Vite

Set up Comark Content in a Vite app with the official plugin.