---
title: "Use SvelteKit with Prismic"
description: "Learn how to build websites with SvelteKit and Prismic."
category: "frameworks"
audience: developers
lastUpdated: "2026-02-13T08:29:16.000Z"
---

# Overview

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

* Model content with [slices](https://prismic.io/docs/slices.md) and [page types](https://prismic.io/docs/content-modeling.md#page-types) using [Slice Machine](https://prismic.io/docs/slice-machine.md).
* Fetch and display content using [SDKs](https://prismic.io/docs/apis.md) with generated [TypeScript](https://www.typescriptlang.org/) types.
* Preview draft content with [live previews](https://prismic.io/docs/previews.md#live-previews) and [full-website previews](https://prismic.io/docs/previews.md#full-website-previews).

Here's what a Prismic page looks like in SvelteKit:

```svelte filename=src/routes/[[preview=preview]]/[uid]/+page.svelte
<script lang="ts">
  import { SliceZone } from "@prismicio/svelte";
  import { components } from "$lib/slices";
  import type { PageProps } from "./$types";

  // Page data is loaded in +page.server.ts
  const { data }: PageProps = $props();
</script>

<!-- Display the page's slices -->
<SliceZone slices={data.page.data.slices} {components} />
```

SvelteKit websites use [@prismicio/client](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) and [@prismicio/svelte](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md).

# Set up a SvelteKit website

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

1. **Create a Prismic repository**

   From the [Prismic dashboard](https://prismic.io/dashboard), create a Prismic repository. Select **SvelteKit**.

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

   If you prefer starting with a template, select **Minimal starter** or **Full website demo** instead.

2. **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 installs Prismic's packages and configures your project with a [Prismic client](#fetch-content), [content previews](#live-previews-in-the-page-builder), and [prerendering](#preview-draft-content).

3. **Set up content previews**

   Content writers can preview content on your website before publishing.

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

   [See the preview setup instructions](#live-previews-in-the-page-builder)

4. **Start building with Prismic**

   Your SvelteKit website is now ready for Prismic. Next, learn how to [create pages](#create-pages) and [slices](#create-slices).

> **Important**
>
> <CalloutHeading>Help us improve the setup process</CalloutHeading>
>
> Tell us what worked and where setup slowed you down — and earn $50.
>
> <TrackCTA type="primary" position="activation-recruitment" asChild>
>   <CalloutButton color="purple" startIcon={<MessageSquareTextIcon />} href="https://docs.google.com/forms/d/e/1FAIpQLSfblSNBRfXB4Tb5QwFPJ4tp_GZseZ9aBDuzk07YuzisVhOF3A/viewform">
>     Share your experience
>   </CalloutButton>
> </TrackCTA>

# Create pages

Website pages are managed in Prismic using [page types](https://prismic.io/docs/content-modeling.md#page-types). Page types are created in [Slice Machine](https://prismic.io/docs/slice-machine.md).

[Learn how to create page types](https://prismic.io/docs/content-modeling.md#how-to-create-a-page-type)

## Write page components

Each page type needs a SvelteKit page component. With SvelteKit's file-system based routing, you create a [page file](https://svelte.dev/docs/kit/routing#page) at each page's path.

The example below shows a page component for a **Page** page type.

> The `[[preview=preview]]` directory supports [content previews](#preview-draft-content).

```ts filename=src/routes/[[preview=preview]]/[uid]/+page.server.ts
import type { PageServerLoad, EntryGenerator } from "./$types";
import { createClient } from "$lib/prismicio";

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

  return { page };
};

export const entries: EntryGenerator = async () => {
  const client = createClient();
  const pages = await client.getAllByType("page");

  return pages.map((page) => ({ uid: page.uid }));
};
```

```svelte filename=src/routes/[[preview=preview]]/[uid]/+page.svelte
<script lang="ts">
  import { isFilled, asImageSrc } from "@prismicio/client";
  import { SliceZone } from "@prismicio/svelte";
  import { components } from "$lib/slices";
  import type { PageProps } from "./$types";

  const { data }: PageProps = $props();
</script>

<svelte:head>
  <title>{data.page.data.meta_title}</title>
  {#if isFilled.keyText(data.page.data.meta_description)}
    <meta name="description" content={data.page.data.meta_description} />
  {/if}
  {#if isFilled.image(data.page.data.meta_image)}
    <meta property="og:image" content={asImageSrc(data.page.data.meta_image)} />
  {/if}
</svelte:head>

<SliceZone slices={data.page.data.slices} {components} />
```

> You can also find this code snippet customized for your page type in Slice Machine. Learn more in the [Content Modeling](https://prismic.io/docs/content-modeling.md#create-a-page-file) page.

## 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](https://prismic.io/docs/route-resolver.md).

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

```ts filename=src/lib/prismicio.ts
// `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:

| Route resolver path          | SvelteKit file-system route                              |
| ---------------------------- | -------------------------------------------------------- |
| `/`                          | `src/routes/[[preview=preview]]/+page.svelte`            |
| `/:uid`                      | `src/routes/[[preview=preview]]/[uid]/+page.svelte`      |
| `/blog/:uid`                 | `src/routes/[[preview=preview]]/blog/[uid]/+page.svelte` |
| `/:grandparent/:parent/:uid` | `src/routes/[[preview=preview]]/[...path]/+page.svelte`  |

[Learn more about route resolvers](https://prismic.io/docs/route-resolver.md)

# Create slices

Page content is written using reusable page sections called [slices](https://prismic.io/docs/slices.md). Slices are created in [Slice Machine](https://prismic.io/docs/slice-machine.md).

[Learn how to create slices](https://prismic.io/docs/slices.md#how-to-create-a-slice)

## 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](https://prismic.io/docs/slices.md#slice-libraries) was selected.

Once your slice is [configured with fields](https://prismic.io/docs/slices.md#model-your-content), 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 a rich text field and a link field.

```svelte filename=src/lib/slices/CallToAction/index.svelte
<script lang="ts">
  import type { Content } from "@prismicio/client";
  import {
    PrismicRichText,
    PrismicLink,
    type SliceComponentProps,
  } from "@prismicio/svelte";

  type Props = SliceComponentProps<Content.TextSlice>;

  let { slice }: Props = $props();
</script>

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

[Learn how to display content](#display-content)

# Fetch content

Use [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) 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](https://prismic.io/docs/route-resolver.md) and default Prismic client settings.

```ts filename=src/lib/prismicio.ts
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.

```ts filename=src/routes/[[preview=preview]]/[uid]/+page.server.ts {1-2,4-6}
import type { PageServerLoad } from "./$types";
import { createClient } from "$lib/prismicio";

export const load: PageServerLoad = async ({ 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](https://prismic.io/docs/fields/content-relationship.md) field to fetch linked content. You can also use [`<SliceZone>`](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#slicezone)'s `context` prop to pass arbitary data from a page to a slice.

[Learn more about fetching content](https://prismic.io/docs/fetch-content.md)

## Secure with an access token

Published content is public by default. You can require a private **access token** to secure the API.

[Learn more about content visibility](https://prismic.io/docs/fetch-content.md#content-visibility)

1. **Open your API & Security settings**

   Navigate to your Prismic repository and go to **Settings** > **API & Security**.

2. **Change the API access**

   Under the **Repository security** section, change the **API access** dropdown to "Private API."

   Click **Change the API visibility**.

3. **Generate an access token**

   Under the **Generate an Access Token** section, fill out the form.

   | Field            | Value                            |
   | ---------------- | -------------------------------- |
   | **Name**         | A name to identify your website. |
   | **Callback URL** | Leave blank.                     |

   Click **Add this application**.

4. **Pass the access token to your client**

   How you pass the access token to your client depends on your website's framework.

   Save the access token as an environment variable in a [`.env`](https://svelte.dev/docs/kit/$env-static-private) file.

   ```sh filename=.env
   PRISMIC_ACCESS_TOKEN=my-access-token
   ```

   Then, pass the access token to the client in `prismicio.ts`.

   ```ts filename=prismicio.ts
   import { PRISMIC_ACCESS_TOKEN } from "$env/static/private"; // [!code ++]

   export function createClient({ cookies, ...config }: CreateClientConfig = {}) {
     const client = prismic.createClient(repositoryName, {
       accessToken: PRISMIC_ACCESS_TOKEN, // [!code ++]
       routes,
       ...config,
     });

     enableAutoPreviews({ client, cookies });

     return client;
   }
   ```

   The Client ID and Secret values on the API & Security page can be ignored.

> **Important**
>
> The access token is a secret. Do not use it in client-side requests to prevent exposing the token.

# Display content

Prismic content can be displayed using [`@prismicio/svelte`](https://prismic.io/docs/technical-reference/prismicio-svelte.md).

Here are the most commonly used components in SvelteKit websites:

* [`<PrismicLink>`](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#prismiclink) - Display links.
* [`<PrismicImage>`](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#prismicimage) - Display images.
* [`<PrismicRichText>`](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#prismicrichtext) - Display rich text.
* [`<PrismicText>`](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#prismictext) - Display plain text.
* [`<SliceZone>`](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#slicezone) - Display slices.

[Learn how to display content from a field](https://prismic.io/docs/fields.md)

# Live previews in the Page Builder

Content writers can preview content live while editing in the [Page Builder](https://prismic.io/docs/previews.md#live-previews). Each [slice](https://prismic.io/docs/slices.md) 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.

1. **Create a page at `/slice-simulator`**

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

   ```svelte filename=src/routes/slice-simulator/+page.svelte
   <script>
     import { SliceSimulator, SliceZone } from "@prismicio/svelte";
     import { components } from "$lib/slices";
   </script>

   <!-- Slot syntax is used for backward compatibility with Svelte <=4. -->
   <SliceSimulator let:slices>
     <SliceZone {slices} {components} />
   </SliceSimulator>
   ```

2. **Set the simulator URL in the Page Builder**

   Navigate to your Prismic repository and open a page.

   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**.

   > Once your website is deployed, change the live preview URL to your production domain.

# 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](#set-up-a-sveltekit-project). However, there are a few steps to complete manually.

## Set up previews in SvelteKit

[`@prismicio/svelte`](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md) provides helpers and a component to support [content previews](https://prismic.io/docs/previews.md#full-website-previews).

1. **Add `<PrismicPreview>` to `src/routes/+layout.svelte`**

   [`<PrismicPreview>`](https://prismic.io/docs/technical-reference/prismicio-next/v2.md#prismicpreview) adds the Prismic toolbar and event listeners. The website automatically refreshes when a content draft is saved.

   ```svelte filename=src/routes/+layout.svelte {3,4,14}
   <script lang="ts">
     import type { Snippet } from "svelte";
     import { PrismicPreview } from "@prismicio/svelte/kit";
     import { repositoryName } from "$lib/prismicio";

     type Props = {
       children: Snippet;
     };

     let { children }: Props = $props();
   </script>

   <main>{@render children()}</main>
   <PrismicPreview {repositoryName} />
   ```

2. **Call `enableAutoPreviews()` with your Prismic client**

   [`enableAutoPreviews()`](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#enableautopreviews) configures a Prismic client to automatically fetch draft content during a preview. Include it in your [`$lib/prismicio.ts`](#set-up-a-prismic-client) file.

   ```ts filename=src/lib/prismicio.ts {4,13}
   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;
   }
   ```

3. **Create an `/api/preview` endpoint**

   This endpoint enables content previews and redirects a content writer to the previewed page. It uses [`redirectToPreviewURL()`](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#redirecttopreviewurl).

   ```ts filename=src/routes/api/preview/+server.ts {1,7}
   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 });
   }
   ```

4. **Create a `preview` route matcher**

   This [route matcher](https://svelte.dev/docs/kit/advanced-routing#Matching) 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.

   ```ts filename=src/params/preview.ts
   export function match(param) {
     return param === "preview";
   }
   ```

5. **Create a `[[preview=preview]]` route parameter**

   This route parameter optionally prefixes routes with `/preview`. It uses the [`preview` route matcher](#create-a-preview-route-matcher) created in the previous step.

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

   > **Important**
   >
   > Nesting all page routes within `[[preview=preview]]` is important for supporting content previews.

6. **Configure `prerender` to `auto`**

   Setting the [`prerender`](https://svelte.dev/docs/kit/page-options#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.

   ```ts filename=src/routes/+layout.server.ts
   export const prerender = "auto";
   ```

## Set up previews in Prismic

After setting up [previews in your SvelteKit project](#set-up-previews-in-sveltekit), set up previews in Prismic.

1. **Open your preview settings**

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

2. **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**.

   > Once your website is deployed, add another preview with your production domain.

# Deploy

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

* [Vercel](https://svelte.dev/docs/kit/adapter-vercel)
* [Netlify](https://svelte.dev/docs/kit/adapter-netlify)
* [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/get-started-sveltekit.html)
* [Cloudflare](https://svelte.dev/docs/kit/adapter-cloudflare)

## Handle content changes

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

Follow the instructions in our [webhooks documentation](https://prismic.io/docs/webhooks.md#add-a-webhook-to-your-hosting-provider) 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.

1. **Add SEO fields to your page types**

   SEO fields are added to page types by default in an **SEO** tab.

   If your page type does not have this tab, create a tab named **SEO** and add the following fields:

   | Label            | API ID             | Type      | Description                              |
   | ---------------- | ------------------ | --------- | ---------------------------------------- |
   | Meta Title       | `meta_title`       | Rich Text | The title shown in search results.       |
   | Meta Description | `meta_description` | Text      | The description shown in search results. |
   | Meta Image       | `meta_image`       | Image     | The image shown in link previews.        |

   > When using the `meta_title` and `meta_description` field API IDs, the [Page Builder](https://prismic.io/docs/guides/page-builder.md) shows a preview of your page in search results.

   The `meta_image` field is not typically used by search engines, but it can be used as a preview when linking to your website on some platforms.

2. **Add metadata to pages**

   Use the metadata fields in a `+page.svelte`'s [`<svelte:head>`](https://svelte.dev/docs/svelte/svelte-head).

   ```svelte filename=src/routes/[[preview=preview]]/[uid]/+page.svelte {17-21}
   <svelte:head>
     <title>{page.data.meta_title}</title>
     {#if isFilled.keyText(page.data.meta_description)}
       <meta name="description" content={page.data.meta_description} />
     {/if}
     {#if isFilled.image(page.data.meta_image)}
       <meta property="og:image" content={asImageSrc(page.data.meta_image)} />
     {/if}
   </svelte:head>
   ```

# Internationalization

Prismic supports websites with multiple languages.

To learn more about Prismic's locale management, see [Locales](https://prismic.io/docs/languages-locales.md).

1. **Install the necessary packages**

   The `negotiator` and `@formatjs/intl-localematcher` packages are needed to support internationalization.

   ```sh
   npm install negotiator @formatjs/intl-localematcher
   ```

2. **Create a `$lib/i18n.ts` file**

   The `$lib/i18n.ts` file provides a set of internationalization helpers. The helpers will be used in your website's [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) hook.

   Create a `$lib/i18n.ts` file with the following contents.

   ```ts filename=src/lib/i18n.ts
   import { redirect, type RequestEvent } from "@sveltejs/kit";
   import { match } from "@formatjs/intl-localematcher";
   import Negotiator from "negotiator";

   /**
    * A record of locales mapped to a version displayed in URLs. The first entry is
    * used as the default locale.
    */
   // TODO: Update this object with your website's supported locales. Keys
   // should be the locale IDs registered in your Prismic repository, and values
   // should be the string that appears in the URL.
   const LOCALES: Record<string, string> = {
     "en-us": "en-us",
     "fr-fr": "fr-fr",
   };

   /** Redirects with an auto-detected locale prepended to the URL. */
   export function redirectToLocale(event: RequestEvent) {
     const headers = {
       "accept-language":
         event.request.headers.get("accept-language") ?? undefined,
     };
     const languages = new Negotiator({ headers }).languages();
     const locales = Object.keys(LOCALES);
     const locale = match(languages, locales, locales[0]);

     const destination = new URL(event.url);
     destination.pathname = `/${LOCALES[locale]}${event.url.pathname}`;

     redirect(302, destination);
   }

   /** Determines if a pathname has a locale as its first segment. */
   export function pathnameHasLocale(event: RequestEvent): boolean {
     const regexp = new RegExp(`^/(${Object.values(LOCALES).join("|")})(/|$)`);

     return regexp.test(event.url.pathname);
   }

   /**
    * Returns the full locale of a given locale. It returns `undefined` if the
    * locale is not in the master list.
    */
   export function reverseLocaleLookup(locale: string): string | undefined {
     for (const key in LOCALES) {
       if (LOCALES[key] === locale) {
         return key;
       }
     }
   }
   ```

3. **Define locales in `$lib/i18n.ts`**

   `$lib/i18n.ts` contains a list of locales supported by your website.

   Update the `LOCALES` constant to match your Prismic repository's locales. The first locale is used when a visitor's locale is not supported.

   ```ts filename=src/lib/i18n.ts
   const LOCALES = {
     "en-us": "en-us",
     "fr-fr": "fr-fr",
   };
   ```

   You can define how the locale appears in the URL by changing the object's values. In the following example, the `en-us` locale will appear as `en` in the URL (e.g. `/en/about`).

   ```ts filename=src/lib/i18n.ts {2-3}
   const LOCALES = {
     "en-us": "en",
     "fr-fr": "fr",
   };
   ```

   > Statically defining your locales avoids a Prismic API call, optimizing your website's performance.

4. **Create or modify `hooks.server.ts`**

   Website visitors will be directed to the correct locale using [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) in `src/hooks.server.ts`.

   Create a `src/hooks.server.ts` file with the following contents, or modify your existing `src/hooks.server.ts` to include the highlighted lines.

   ```ts filename=src/hooks.server.ts
   import { type Handle } from "@sveltejs/kit";
   import { pathnameHasLocale, redirectToLocale } from "$lib/i18n"; // [!code ++]

   // prettier-ignore
   export const handle: Handle = async ({ event, resolve }) => {
     if (!pathnameHasLocale(event)) { // [!code ++]
       redirectToLocale(event); // [!code ++]
     } // [!code ++]

     return resolve(event);
   };
   ```

   [Learn about SvelteKit hooks](https://svelte.dev/docs/kit/hooks)

5. **Nest routes under a `[lang]` dynamic route segment**

   Create a directory at `src/routes/[[preview=preview]]/[lang]` and nest all other routes under this directory.

   The `lang` route parameter will contain the visitor's locale. For example, `/en-us/about` sets `lang` to `"en-us"`.

   [Learn about SvelteKit routing](https://svelte.dev/docs/kit/routing)

6. **Fetch content from the visitor's locale**

   In your `+page.server.ts` files, forward the `lang` parameter to your Prismic query.

   ```ts filename=src/routes/[[preview=preview]]/[lang]/[uid]/+page.server.ts {1,6-8}
   import type { PageServerLoad } from "./$types";
   import { createClient } from "$lib/prismicio";
   import { reverseLocaleLookup } from "$lib/i18n";

   export const load: PageServerLoad = async ({ params, fetch, cookies }) => {
     const client = createClient({ fetch, cookies });
     const page = await client.getByUID("page", params.uid, {
       lang: reverseLocaleLookup(params.lang),
     });

     return { page };
   };
   ```

   The `reverseLocaleLookup` helper from `$lib/i18n.ts` converts a shortened locale (e.g. `en`) to its full version (e.g. `en-us`).

7. **Fetch all locales in `entries`**

   > This step is needed if you statically build pages using [`entries`](https://svelte.dev/docs/kit/page-options#entries), which we recommend.

   Fetch pages from all locales using the Prismic client's `lang: "*"` option. Include the `lang` route parameter.

   ```ts filename=src/routes/[[preview=preview]]/[lang]/[uid]/+page.server.ts {1-2,5,10}
   import type { EntryGenerator } from "./$types";
   import { createClient } from "$lib/prismicio";

   export const entries: EntryGenerator = async () => {
     const client = createClient();
     const pages = await client.getAllByType("page", {
       lang: "*",
     });

     return pages.map((page) => ({ lang: page.lang, uid: page.uid }));
   };
   ```

# Configure Slice Machine

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

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

| Property                               | Type    | Description                                                                                                                           | Default                                                            |
| -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| format (optional)                      | boolean | Determines if generated files are formatted using [Prettier](https://prettier.io/).                                                   | `true`                                                             |
| typescript (optional)                  | boolean | Determines if generated files are written in TypeScript or JavaScript.                                                                | `true` if a project has a `tsconfig.json` file, `false` otherwise. |
| generatedTypesFilePath (optional)      | string  | The filepath at which generated TypeScript types will be saved.                                                                       | `src/prismicio-types.d.ts`                                         |
| environmentVariableFilePath (optional) | string  | The filepath at which the active Prismic [environment](https://prismic.io/docs/environments.md) is stored as an environment variable. | `.env.local`                                                       |