---
title: "@prismicio/svelte v0"
category: "api-references"
audience: developers
lastUpdated: "2025-11-06T01:07:50.000Z"
---

# Overview

`@prismicio/svelte` is the official Prismic package for creating web apps with Prismic and [Svelte](https://svelte.dev/).

To learn to develop with Prismic and Svelte, see our [user-friendly Svelte guide](https://prismic.io/docs/sveltekit.md).

# Dependencies and requirements

This package can only be used in a Svelte project.

# Installation

Install this package in your Svelte project:

```bash
npm install --save-dev @prismicio/svelte
```

# Example

Here is an example in a Svelte project. The `App.svelte` file will import the `SliceZone` and use it to render slices as Svelte components.

```svelte filename=src/App.svelte
<script>
  import * as prismic from "@prismicio/client";
  import { SliceZone } from "@prismicio/svelte";

  // Import Slices components and map them to API IDs
  import ExampleSlice from "./slices/ExampleSlice.svelte";

  const components = {
    example_slice_a: ExampleSlice,
  };

  // Query a document from Prismic
  const client = prismic.createClient("example-prismic-repo");
  const promise = client.getFirst();
</script>

{#await promise}
  <p>Loading Slices</p>
{:then document}
  <SliceZone slices={document.data.body} {components} />
{:catch error}
  <pre>{JSON.stringify(error.message, null, 2)}</pre>
{/await}
```

Each slice component receives a `slice` object as a prop.

```svelte filename=src/slices/ExampleSlice.svelte
<script>
  export let slice;
</script>

<h1>{slice.primary.example_key_text_in_slice}</h1>
```

# Usage

`@prismicio/svelte` exports the following components to render content from the Prismic API.

## `<SliceZone>`

```svelte
<script>
  import { SliceZone } from "@prismicio/svelte";
  import { ExampleSliceA, ExampleSliceB } from "$lib/slices";

  export let data;
</script>

<SliceZone
  slices={data.document.data.body}
  components={{
    example_slice_a: ExampleSliceA,
    example_slice_b: ExampleSliceB,
  }}
  context={{ foo: "bar" }}
/>
```

The `SliceZone` is a Svelte component that renders an array of Prismic slices with corresponding slice components.

The `SliceZone` accepts five props:

<Table>
  <tbody>
    <tr>
      <TableCell>`slices` array</TableCell> <TableCell>An array of slices from the Prismic API.</TableCell>
    </tr>

    <tr>
      <TableCell>`components` object</TableCell>

      <TableCell>
        An object mapping Svelte slice components to API IDs.
      </TableCell>
    </tr>

    <tr>
      <TableCell>`context` object</TableCell> <TableCell>Arbitrary data to pass to slice components.</TableCell>
    </tr>

    <tr>
      <TableCell>`defaultComponent` object</TableCell>

      <TableCell>
        The component that the `SliceZone` will render when a component cannot be found for a slice. Receives the `slice` object and the `dev` property as props. A built-in default component will be rendered if none is provided. The built-in component will render nothing if `dev` is `false`.
      </TableCell>
    </tr>

    <tr>
      <TableCell>`dev` boolean</TableCell>

      <TableCell>
        Should specify whether the application is in development (`true`) or production (`false`).
      </TableCell>
    </tr>
  </tbody>
</Table>

## `<PrismicLink>`

```svelte
<script>
  import { PrismicLink } from "@prismicio/svelte";

  export let data;
</script>

<!-- With default text property -->
<PrismicLink field={document.data.example_link} />;

<!-- Overriding with custom children -->
<PrismicLink field={document.data.example_link}>Example Link</PrismicLink>
```

`PrismicLink` is a Svelte component that renders a link field, content relationship field, or document from the Prismic API as an `a` element. `PrismicLink` accepts [all standard `a` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) and [SvelteKit link options](https://kit.svelte.dev/docs/link-options) as props. It also accepts the following Prismic-specific props:

<Table>
  <tbody>
    <tr>
      <TableCell>`field` object (required)</TableCell>

      <TableCell>
        A link field, content relationship field, or document from the Prismic API.
      </TableCell>
    </tr>

    <tr>
      <TableCell>`linkResolver` function</TableCell>

      <TableCell>
        A function that accepts a document object and returns a URL path, which will be used to resolve the URL for internal links. This option is unnecessary if your client is configured with a Route Resolver. [More info](https://prismic.io/docs/route-resolver.md).
      </TableCell>
    </tr>

    <tr>
      <TableCell>`target` string</TableCell>

      <TableCell>
        An HTML target attribute. If left `undefined`, links that are set to open in a new window will have a `target="_blank"` attribute applied.
      </TableCell>
    </tr>

    <tr>
      <TableCell>`rel` string</TableCell>

      <TableCell>
        An HTML rel attribute. If undefined and target is `"_blank"`, a value of `"noopener noreferrer"` will be applied.
      </TableCell>
    </tr>
  </tbody>
</Table>

## `<PrismicRichText>`

```svelte
<script>
  import { PrismicRichText } from "@prismicio/svelte";
  import Title from "../components/Title.svelte";

  export let data;

  const components = {
    h1: Title,
  };
</script>

<PrismicRichText field={data.document.data.example_rich_text} {components} />
```

`PrismicRichText` is a Svelte component that renders a title or rich text field from the Prismic API. `PrismicRichText` accepts the following props:

<Table>
  <tbody>
    <tr>
      <TableCell>`field` object (required)</TableCell> <TableCell>A rich text or title field from the Prismic API.</TableCell>
    </tr>

    <tr>
      <TableCell>`components` object</TableCell>

      <TableCell>
        An object to render elements with Svelte components. The key for each property should be a rich text element type (e.g. `paragraph`, `heading1`), and the value should be a Svelte component. The component will receive the element's `type`, `node`, `text`, and `key` (if provided) as props, and the content as a slot. For more information, see the [Rich Text article](https://prismic.io/docs/rich-text#rich-text-serializer).
      </TableCell>
    </tr>
  </tbody>
</Table>

## `<PrismicText>`

```svelte
<script>
  import { PrismicText } from "@prismicio/svelte";

  export let data;
</script>

<PrismicText field={data.document.data.example_rich_text} />
```

`PrismicText` is a Svelte component that renders a title or rich text field from the Prismic API as plain text. `PrismicText` accepts the following props:

<Table>
  <tbody>
    <tr>
      <TableCell>`field` object (required)</TableCell> <TableCell>A rich text or title field from the Prismic API.</TableCell>
    </tr>

    <tr>
      <TableCell>`separator` string</TableCell>

      <TableCell>
        An optional separator used to split blocks. Defaults to `\n`.
      </TableCell>
    </tr>
  </tbody>
</Table>

## `<PrismicImage>`

```svelte
<script>
  import { PrismicImage } from "@prismicio/svelte";

  export let data;
</script>

<PrismicImage field={data.document.data.example_image} />
```

`PrismicImage` is a Svelte component that renders an image field from the Prismic API as an optimized image with alt text and an automatically-generated `srcset` attribute.

<Table>
  <tbody>
    <tr>
      <TableCell>
        `field` object (required)
      </TableCell>

      <TableCell>
        An image field from the Prismic API.
      </TableCell>
    </tr>

    <tr>
      <TableCell>
        `imgixParams` object
      </TableCell>

      <TableCell>
        An object of Imgix URL API parameters to transform the image, e.g. `{ sat: -100 }` for grayscale. See [imgix's Image URL API Reference](https://docs.imgix.com/apis/rendering) for a full list of the available parameters.
      </TableCell>
    </tr>

    <tr>
      <TableCell>
        `widths` array | string
      </TableCell>

      <TableCell>
        Widths to be used for the `srcset` attribute, e.g. `[400, 800, 1600]`. Defaults to `[640, 750, 828, 1080, 1200, 1920, 2048, 3840]`.
      </TableCell>
    </tr>

    <tr>
      <TableCell>
        `pixelDensities` array | string
      </TableCell>

      <TableCell>
        Pixel densities to be used for the srcset attribute, e.g. `[2, 4]`. The default values are: `[1, 2, 3]` and can be applied by passing `"defaults"`.
      </TableCell>
    </tr>

    <tr>
      <TableCell>
        `alt` string
      </TableCell>

      <TableCell>
        An empty string to [declare an image as decorative](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images) (such as a patterned background). Any other value is invalid.
      </TableCell>
    </tr>

    <tr>
      <TableCell>
        `fallbackAlt` string
      </TableCell>

      <TableCell>
        An empty string to [declare an image as decorative](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images) (such as a patterned background) only if no alt text has been defined in Prismic. Any other value is invalid.
      </TableCell>
    </tr>
  </tbody>
</Table>

## `<PrismicEmbed>`

```svelte
<script>
  import { PrismicEmbed } from "@prismicio/svelte";

  export let data;
</script>

<PrismicEmbed field={data.document.data.example_embed} />
```

`PrismicEmbed` is a Svelte component that renders an embed field from the Prismic API as an `iframe` element. `PrismicEmbed` accepts one prop:

<Table>
  <tbody>
    <tr>
      <TableCell>`field` object (required)</TableCell> <TableCell>An embed field from the Prismic API.</TableCell>
    </tr>
  </tbody>
</Table>

## `<PrismicTable>`

Displays a formatted table from a [table field](https://prismic.io/docs/fields/table.md).

```svelte
<script>
  import { PrismicTable } from "@prismicio/svelte";
  import CustomTable from "../components/CustomTitle.svelte";

  export let data;

  const components = {
    table: CustomTable,
  };
</script>

<PrismicTable field={data.document.data.my_table_field} {components} />
```

`PrismicTable` is a Svelte component that renders a table field from the Prismic API. `PrismicTable` accepts the following props:

<Table>
  <tbody>
    <tr>
      <TableCell>`field` object (required)</TableCell> <TableCell>A table field from the Prismic API.</TableCell>
    </tr>

    <tr>
      <TableCell>`fallback` object</TableCell>

      <TableCell>
        A Svelte component rendered if the table field is empty.
      </TableCell>
    </tr>

    <tr>
      <TableCell>`components` object</TableCell>

      <TableCell>
        An object to render elements with Svelte components. The key for each property should be a table element type or a rich text block type, and the value should be a Svelte component. The available table element types are `table`, `thead`, `tbody`, `tr`, `th`, and `td`. The available rich text block types are `paragraph`, `em`, `strong`, and `hyperlink`.
      </TableCell>
    </tr>
  </tbody>
</Table>