Use SvelteKit with Prismic

Overview

Prismic has a first-party SvelteKit integration that supports all of Prismic’s features:

• Build pages using slices and page types.

• Write content alongside live previews.

• Preview pages before publishing with full-website previews.

• Model content with Slice Machine.

• Fetch and display Prismic content using SDKs.

• Code with confidence using generated TypeScript types.

• Write content in multiple languages with locales.

Your favorite SvelteKit features are also supported:

• Use the latest releases of Svelte 5 and SvelteKit 2.

• Fetch content using load functions.

• Serve performant pages using prerendering.

• Optimize images using imgix’s image CDN.

Set up a SvelteKit website

Prismic can be added to new or existing SvelteKit websites. Follow these steps to set up a SvelteKit project.

• Create a Prismic repository

  From the Prismic dashboard, create a Prismic repository. Select SvelteKit.

  

  When asked to select a starter, select Connect your own web app.

• Set up a SvelteKit project

  Follow the setup instructions shown in your Prismic repository.

  

  The instructions guide you through creating a new SvelteKit project (if needed) and adding Prismic using @slicemachine/init.

  The @slicemachine/init command performs the following:

  • Installs Slice Machine, @prismicio/svelte, and @prismicio/client.

  • Sets up content previews by creating an endpoint at /api/preview, a [[preview=preview]] route directory, a root +layout.ts file, and a root +layout.server.ts file.

  • Sets up live previews by creating a page at /slice-simulator.

  • Creates a Prismic client at $lib/prismicio.ts.

  • Saves Slice Machine configuration at slicemachine.config.json.

• Model page content

  Content modeling is the process of converting page designs into structured fields. We recommend adding support for a homepage and general pages.

  See the Recommended models guide for instructions.

• Set up content previews

  Content writers can preview content on your website before publishing.

  See the Live previews and Preview draft content sections for instructions.

• Deploy your website

  Before content writers can collaborate on the website, you’ll need to host it online.

  See the Deploy section for instructions.

• Publish content

  Your SvelteKit website is now set up and ready for content. Visit your Prismic repository to build pages.

  To recap, you completed the following:

  • Created a Prismic repository to store your website’s content.

  • Set up a SvelteKit project and integrated Prismic.

  • Prepared your website for a homepage and general pages.

  • Added support for live and full-website previews.

  • Deployed your website to your hosting provider.

  Continue adding slices and other content models as you develop your website.

Create pages

Website pages are managed in Prismic using page types. Page types are created in Slice Machine.

Learn how to model pages and create SvelteKit page files in the Content Modeling guide. In the guide, you’ll find code snippets to bootstrap your pages.

Define routes

Prismic needs to know your website’s routes to fill in link URLs. Configure the routes constant in your project’s $lib/prismicio.ts with a set of route resolvers.

This example includes routes for a homepage, general pages, and a blog.

// `type` is the API ID of a page type.
// `path` determines the URL for a page of that type.
const routes: Routes[] = [
  { type: "homepage", path: "/" },
  { type: "page", path: "/:uid" },
  { type: "blog_post", path: "/blog/:uid" },
];

Your route resolvers should match your SvelteKit file-system-based routes. Here are some commonly used routes:

Create slices

Page content is written using reusable page sections called slices. Slices are created in Slice Machine.

Write Svelte components

Slice Machine generates a bootstrapped Svelte component when a slice is created. You can find the generated files in src/lib/slices or whichever slice library was selected.

Once your slice is configured with fields, edit the slice’s index.svelte file to display the slice’s content.

Here is an example of a Call to Action slice. It displays some text and a link using a rich text and link field.

<script lang="ts">
  import type { Content } from "@prismicio/client";
  import { PrismicRichText, PrismicLink } from "@prismicio/svelte";

  export let slice: Content.TextSlice;
</script>

<section className="flex flex-col gap-4 p-8">
  <PrismicRichText field={slice.primary.text} />
  <PrismicLink field={slice.primary.link} className="button" />
</section>

Fetch content

Use @prismicio/client and its methods to fetch page content.

Set up a Prismic client

Create a $lib/prismicio.ts file to centralize your Prismic client setup.

This file contains route resolvers and default Prismic client settings.

import {
  createClient as baseCreateClient,
  type Route,
} from "@prismicio/client";
import {
  enableAutoPreviews,
  type CreateClientConfig,
} from "@prismicio/svelte/kit";
import sm from "../../slicemachine.config.json";

export const repositoryName = sm.repositoryName;

// TODO: Update with your route resolvers.
const routes: Route[] = [
  { type: "homepage", path: "/" },
  { type: "page", path: "/:uid" },
  { type: "blog_post", path: "/blog/:uid" },
];

export function createClient({ cookies, ...config }: CreateClientConfig = {}) {
  const client = prismic.createClient(repositoryName, {
    routes,
    ...config,
  });

  enableAutoPreviews({ client, cookies });

  return client;
}

Fetch content in pages and slices

Import createClient() from $lib/prismicio.ts and create a client. Use the client to fetch content.

This example page fetches content for a /[uid] dynamic route.

import { createClient } from "$lib/prismicio";

export async function load({ params, fetch, cookies }) {
  const client = createClient({ fetch, cookies });
  const page = await client.getByUID("page", params.uid);

  return { page };
}

We do not recommend fetching content in slices on the client. Instead, you can use a content relationship field to fetch linked content. You can also use <SliceZone>’s context prop to pass arbitary data from a page to a slice.

Display content

Prismic content can be displayed using @prismicio/svelte.

Here are the most commonly used components in SvelteKit websites:

• <PrismicLink> - Display links.
• <PrismicImage> - Display images.
• <PrismicRichText> - Display rich text.
• <PrismicText> - Display plain text.
• <SliceZone> - Display slices.

Live previews in the Page Builder

Content writers can preview content live while editing in the Page Builder. Each slice in a page is shown as a live-updating thumbnail.

Set up live previewing

Live previews require a special /slice-simulator route in your SvelteKit website.

• Create a page at /slice-simulator

  Create a file at src/routes/slice-simulator/+page.svelte with the following contents.

  src/routes/slice-simulator/+page.svelte

  Copy

  <script>
    import { SliceSimulator } from "@slicemachine/adapter-sveltekit/simulator";
    import { SliceZone } from "@prismicio/svelte";
    import { components } from "$lib/slices";
  </script>
  
  <SliceSimulator let:slices>
    <SliceZone {slices} {components} />
  </SliceSimulator>

• Set the simulator URL in the Page Builder

  Navigate to your Prismic repository and open a document.

  Click the ”…” button next to the Publish/Unpublish button in the top-right corner. Select Live preview settings.

  

  In the modal, enter http://localhost:5173/slice-simulator and click Save.

Preview draft content

Content writers can preview content on your website before publishing.

@slicemachine/init performs most of the setup for you during project setup. However, there are a few steps to complete manually.

Set up previews in SvelteKit

@prismicio/svelte provides helpers and a component to support content previews.

• Add <PrismicPreview> to src/routes/+layout.svelte

  <PrismicPreview> adds the Prismic toolbar and event listeners. The website automatically refreshes when a content draft is saved.

  src/routes/+layout.svelte

  Copy

  <script>
    import { PrismicPreview } from "@prismicio/svelte/kit";
    import { repositoryName } from "$lib/prismicio";
  </script>
  
  <main>
    <slot />
  </main>
  <PrismicPreview {repositoryName} />

• Call enableAutoPreviews() with your Prismic client

  enableAutoPreviews() configures a Prismic client to automatically fetch draft content during a preview. Include it in your $lib/prismicio.ts file.

  src/lib/prismicio.ts

  Copy

  import { createClient as baseCreateClient } from "@prismicio/client";
  import {
    type CreateClientConfig,
    enableAutoPreviews,
  } from "@prismicio/svelte/kit";
  import sm from "../slicemachine.config.json";
  
  export const repositoryName = sm.repositoryName;
  
  export function createClient({ cookies, ...config }: CreateClientConfig = {}) {
    const client = baseCreateClient(repositoryName, config);
  
    enableAutoPreviews({ client, cookies });
  
    return client;
  }

• Create an /api/preview endpoint

  This endpoint enables content previews and redirects a content writer to the previewed document. It uses redirectToPreviewURL().

  src/routes/api/preview/+server.ts

  Copy

  import { redirectToPreviewURL } from "@prismicio/svelte/kit";
  import { createClient } from "$lib/prismicio";
  
  export async function GET({ fetch, request, cookies }) {
    const client = createClient({ fetch });
  
    return await redirectToPreviewURL({ client, request, cookies });
  }

• Create a preview route matcher

  This route matcher tells SvelteKit when to fetch draft content and dynamically render a page during content previews. It matches routes prefixed with /preview (e.g. /preview/about).

  Create a file at src/params/preview.ts with the following contents.

  src/params/preview.ts

  Copy

  export function match(param) {
    return param === "preview";
  }

• Create a [[preview=preview]] route parameter

  This route parameter optionally prefixes routes with /preview. It uses the preview route matcher created in the previous step.

  Create a directory at src/routes/[[preview=preview]]. Nest all page routes within it.

• Configure prerender to auto

  Setting the prerender page option to auto tells SvelteKit to prerender all pages it knows about.

  Because SvelteKit does not know about routes prefixed with /preview (e.g. /preview/about), routes prefixed with /preview are not prerendered.

  Create a file at src/routes/+layout.server.ts with the following contents.

  src/routes/+layout.server.ts

  Copy

  export const prerender = "auto";

Set up previews in Prismic

After setting up previews in your SvelteKit project, set up previews in Prismic.

• Open your preview settings

  Navigate to your Prismic repository and go to Settings > Previews.

  

• Create a preview

  In the Manage your previews section, create a preview using the following values:

  Field	Value
  Site name	Development
  Domain for your application	http://localhost:5173
  Preview route	/api/preview

  Click Create my preview.

Deploy

To deploy your website, follow the instructions for deploying SvelteKit with your chosen hosting provider:

• Vercel
• Netlify
• AWS Amplify
• Cloudflare

Handle content changes

Your app needs to be rebuilt when your content changes in Prismic.

Follow the instructions in our webhooks documentation for your hosting provider.

SEO

Prismic websites can be optimized for search engines using meta_title and meta_descriptions fields. These fields provide metadata and improve your website’s ranking.

Internationalization

Prismic supports websites with multiple languages.

Configure Slice Machine

Slice Machine can be configured in slicemachine.config.json. Add options to the adapter.options property.

{
  "repositoryName": "example-prismic-repo",
  "libraries": ["./src/slices"],
  "localSliceSimulatorURL": "http://localhost:5173/slice-simulator",
  "adapter": {
    "resolve": "@slicemachine/adapter-sveltekit",
    "options": {
      "typescript": true
    }
  }
}