--- title: "@prismicio/svelte - v3" tags: ["latest"] category: "api-references" audience: developers lastUpdated: "2026-10-15T22:41:51.000Z" --- # Overview `@prismicio/svelte` is the official Prismic package for creating [Svelte](https://svelte.dev/)-based websites. With this package, you can: * Display Prismic [images](https://prismic.io/docs/fields/image.md), [links](https://prismic.io/docs/fields/link.md), and [rich text](https://prismic.io/docs/fields/rich-text.md) using components. * Display [slice zones](https://prismic.io/docs/slices.md) with custom components. * Set up Prismic [previews](https://prismic.io/docs/previews.md) in [SvelteKit](https://svelte.dev/docs/kit/introduction) websites. This page documents all APIs provided by `@prismicio/svelte`. > See the [SvelteKit guide](https://prismic.io/docs/sveltekit.md) to learn how to build websites using this package. > **Important** > > We only guarantee support with SvelteKit websites. # Install `@prismicio/svelte` is installed when you [set up](https://prismic.io/docs/sveltekit.md#set-up-a-sveltekit-website) a SvelteKit project with the Prismic CLI. ```sh npx prismic init ``` It can also be manually installed in any Svelte project: ```sh npm install --save @prismicio/svelte @prismicio/client ``` [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) is a peer dependency and must be installed. # API All components can be imported as named imports. The following example imports [`PrismicImage`](#prismicimage): ```ts import { PrismicImage } from "@prismicio/svelte"; ``` ## `` Displays an optimized image from an [image field](https://prismic.io/docs/fields/image.md). ```svelte ``` > See examples and tips on the [image field](https://prismic.io/docs/fields/image.md#display-images) page. | Prop | Type | Description | Default | | ------------------------- | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | field | ImageField | An image field to display. | None | | imgixParams (optional) | object | An object of [imgix URL parameters](https://docs.imgix.com/apis/rendering). See an [example](https://prismic.io/docs/fields/image.md#transform-images-through-the-api). | None | | alt (optional) | "" | Declare an image as decorative. | None | | fallbackAlt (optional) | "" | Declare an image as decorative if the image field does not have alt text. | None | | widths (optional) | number\[] \| "thumbnails" \| "defaults" | Widths used to build a `srcset` value for the image field.- `"thumbnails"` uses the image field's thumbnails. - `"defaults"` uses `[640, 750, 828, 1080, 1200, 1920, 2048, 3840]`.Only one of `widths` or `pixelDensities` can be used. | `"defaults"` | | pixelDensities (optional) | number\[] \| "defaults" | Pixel densities used to build a `srcset` value for the image field.- `"defaults"` uses `[1, 2, 3]`.Only one of `widths` or `pixelDensities` can be used. | None | ## `` Displays a link from a [link field](https://prismic.io/docs/fields/link.md) or document. ```svelte ``` > See examples and tips on the [link field](https://prismic.io/docs/fields/link.md#display-links) page. | Prop | Type | Description | Default | | -------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | | field | LinkField | A link field to link. Only one of `field`, `document`, or `href` can be used. | None | | document | PrismicDocument | A Prismic document to link. Only one of `field`, `document`, or `href` can be used. | None | | href | string | A URL to link. Only one of `field`, `document`, or `href` can be used. | None | | rel (optional) | undefined \| string \| ((metadata) => string \| undefined) | A `rel` attribute. A function can be passed to determine the value based on the link. Use `undefined` to remove the `rel` attribute. | `"noreferrer"` if the link is external. | ## `` Displays plain text from a [rich text field](https://prismic.io/docs/fields/rich-text.md). ```svelte ``` | Prop | Type | Description | Default | | -------------------- | ------------- | ----------------------------------------- | ------- | | field | RichTextField | A rich text field to render. | None | | fallback (optional) | string | Rendered if the rich text field is empty. | None | | separator (optional) | string | Separator used between text blocks. | `" "` | ## `` Displays formatted text from a [rich text field](https://prismic.io/docs/fields/rich-text.md). ```svelte ``` > See examples and tips on the [rich text field](https://prismic.io/docs/fields/rich-text.md#display-rich-text) page. | Prop | Type | Description | Default | | --------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | | field | RichTextField | A rich text field to render. | None | | components (optional) | object | A map of rich text block types to Svelte components or shorthand objects with HTML attributes and an optional `as` property.The available heading types are `heading1` to `heading6`. The available block types are `paragraph`, `preformatted`, `list`, `oList`, `listItem`, `oListItem`, `image`, and `embed`. The available inline types are `strong`, `em`, `hyperlink`, `label`, and `span`. See an [example](https://prismic.io/docs/fields/rich-text.md#use-custom-ui-components). | Standard HTML elements (e.g. `heading1` becomes a `

`). | ## `` Displays a table from a [table field](https://prismic.io/docs/fields/table.md). ```svelte ``` > See examples and tips on the [table field](https://prismic.io/docs/fields/table.md#display-tables) page. | Prop | Type | Description | Default | | --------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | | field | TableField | A table field to render. | None | | components (optional) | object | A map of table elements and rich text block types to Svelte components or shorthand objects with HTML attributes.The available table elements are `table`, `thead`, `tbody`, `tr`, `th`, and `td`. The available rich text block types are `paragraph`, `em`, `strong`, and `hyperlink`. See an [example](https://prismic.io/docs/fields/table.md#use-custom-ui-components). | Standard HTML elements (e.g. `table` becomes a ``). | | fallback (optional) | Component | Rendered if the table field is empty. | None | ## `` Displays embedded content from an [embed field](https://prismic.io/docs/fields/embed.md). ```svelte ``` > See examples and tips on the [embed field](https://prismic.io/docs/fields/embed.md#display-embed-fields) page. | Prop | Type | Description | Default | | ----- | ---------- | ------------------------- | ------- | | field | EmbedField | An embed field to render. | None | ## `` Renders [slices](https://prismic.io/docs/slices.md) from a slice zone. ```svelte ``` > See examples and tips on the [slices](https://prismic.io/docs/slices.md#display-slices) page. | Prop | Type | Description | Default | | --------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------ | ------- | | slices | SliceZone | A slice zone to render. | None | | components | Record\> (see definition below) | A map of slice types to Svelte components. | None | | defaultComponent (optional) | Component | Rendered if a slice does not have a component mapping. | None | | context (optional) | any | Arbitrary data made available to all slice components. | None | **SliceComponentProps definition:** | Property | Type | Description | Default | | -------- | -------- | -------------------------------------------------- | ------- | | slice | Slice | The slice object being displayed. | None | | slices | Slice\[] | All slices in the slice zone. | None | | index | number | The index of the slice in the slice zone. | None | | context | unknown | The data passed to ``'s `context` prop. | None | ## `` Adds support for [live slice previews](https://prismic.io/docs/sveltekit.md#live-previews-in-the-page-builder) in the Page Builder. ```svelte {#snippet children({ slices })} {/snippet} ``` > See the [SvelteKit guide](https://prismic.io/docs/sveltekit.md#live-previews-in-the-page-builder) to learn how to set up live previews. | Prop | Type | Description | Default | | --------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ----------- | | children | Snippet\<\[\{ slices: Slice\[] }]> | The content to render inside the simulator, typically a `` component. | None | | zIndex (optional) | number | The z-index value of the simulator so that it's displayed above layout elements. | `100` | | background (optional) | string | The background color of the simulator to match your website's design. | `"#ffffff"` | | class (optional) | ClassValue | CSS classes for the simulator's root element. Accepts any [Svelte class value](https://svelte.dev/docs/svelte/class). | None | # SvelteKit API `@prismicio/svelte` provides components and functions for [SvelteKit](https://svelte.dev/docs/kit/introduction). All SvelteKit components and functions can be imported as named imports from `@prismicio/svelte/kit`. The following example imports [`PrismicPreview`](#prismicpreview): ```ts import { PrismicPreview } from "@prismicio/svelte/kit"; ``` ## `` Adds support for [content previews](https://prismic.io/docs/previews.md) by including the Prismic toolbar and event listeners. Webpages are automatically refreshed when a new content draft is saved. ```svelte ``` > See the [SvelteKit guide](https://prismic.io/docs/sveltekit.md#preview-draft-content) to learn where to use this component. | Prop | Type | Description | Default | | -------------------------- | ------ | ---------------------------------------------------------------------------------- | ----------- | | repositoryName | string | The Prismic repository name. | None | | routePrefix (optional) | string | The route parameter prefixed during preview sessions. | `"preview"` | | routePrefixName (optional) | string | The name of the preview-specific route parameter prefixed during preview sessions. | `"preview"` | ## `enableAutoPreviews()` Configures a Prismic client to automatically fetch draft content during a preview session. ```ts enableAutoPreviews({ client, cookies }); ``` > Projects [set up](https://prismic.io/docs/sveltekit.md#set-up-a-sveltekit-website) with `npx prismic > init` use this function in the generated `prismicio.ts`. | Parameter | Type | Description | Default | | --------- | ------- | ---------------------------------------------------------------------------------------------------------- | ------- | | client | Client | A Prismic client. | None | | cookies | Cookies | The `cookies` object provided to a route's `load()` function. This parameter is required to load previews. | None | ## `redirectToPreviewURL()` Redirects a content writer to a previewed document's URL. This function should only be called in a `+server` file. ```ts redirectToPreviewURL({ client, request, cookies }); ``` > Projects [set up](https://prismic.io/docs/sveltekit.md#set-up-a-sveltekit-website) with `npx prismic > init` use this function in the generated `/api/preview` API Route. | Parameter | Type | Description | Default | | ---------------------- | ------- | -------------------------------------------------------------------------------------------- | ----------- | | client | Client | A Prismic client. | None | | request | Request | The `request` object from a [`+server.ts`](https://svelte.dev/docs/kit/routing#server) file. | None | | cookies | Cookies | The `cookies` object from a [`+server.ts`](https://svelte.dev/docs/kit/routing#server) file. | None | | defaultURL (optional) | string | The default redirect URL if a URL cannot be determined for the previewed document. | `/` | | routePrefix (optional) | string | The route parameter prefixed during preview sessions. | `"preview"` | # Upgrade from v2 Follow these steps to upgrade an existing project to `@prismicio/svelte` v3. 1. **Upgrade to SvelteKit 3** `@prismicio/svelte` v3 requires SvelteKit 3. Follow the official [SvelteKit 3 migration guide](https://svelte.dev/docs/kit/migrating-to-sveltekit-3). 2. **Install `@prismicio/svelte` v3** ```sh npm install @prismicio/svelte@^3 ``` 3. **Use a snippet in ``** Replace `let:slices` with a `children` snippet. {/* prettier-ignore */} ```svelte filename=src/routes/slice-simulator/+page.svelte {#snippet children({ slices })} {/snippet} ``` 4. **Replace `SvelteRichTextSerializer` with `RichTextComponents`** > **Important** > > This step is only necessary when using the `SvelteRichTextSerializer` TypeScript type. The deprecated `SvelteRichTextSerializer` type is removed. Use `RichTextComponents` instead. ```ts import type { SvelteRichTextSerializer, // [!code --] RichTextComponents, // [!code ++] } from "@prismicio/svelte"; ```