Skip to content

SvelteKit

The SvelteKit starter: server loads, typed env, drafts and t.js.

DocsGet started

Docs menuSvelteKit

The SvelteKit starter reads Manifolio in server loads, with the secret key from $app/env/private. It renders any entry from your schema, switches to drafts with ?mf_preview= and adds t.js. Download it from Connect your site → SvelteKit → Starter.

Setup in three steps

  1. Keys. Copy .env.example to .env (filled in the downloaded starter). The variables are declared in src/env.ts.
  2. Install. npm install, then npm run types (writes src/manifolio.d.ts).
  3. Run. npm run dev and open http://localhost:5173. In production: npm run build && npm start.

Caching and the webhook

SvelteKit has no data cache. src/lib/server/manifolio.ts keeps published responses in memory for five minutes; src/routes/api/revalidate/+server.ts verifies the webhook and clears it. Behind a CDN, purge it there instead.

Visual editor

src/hooks.server.ts allows framing by MANIFOLIO_ADMIN_ORIGIN and turns caching off in preview. The entry page builds its nodes on the server with client.editable, so data-mf-edit attributes appear only with a token. Preview URL: https://your-site/{type}/{slug}.

Until @manifolio/sdk is on npm, the downloaded starter carries it in vendor/manifolio-sdk.