@prismicio/svelte - v2
Overview
@prismicio/svelte is the official Prismic package for creating Svelte-based websites.
With this package, you can:
Display slice zones with custom components.
This page documents all APIs provided by @prismicio/svelte.
Install
@prismicio/svelte is installed when bootstrapping a SvelteKit project with @slicemachine/init.
npx @slicemachine/init@latestIt can also be manually installed in any Svelte project:
npm install --save @prismicio/svelte @prismicio/client@prismicio/client is a peer dependency and must be installed.
API
All components can be imported as named imports.
The following example imports PrismicImage:
import { PrismicImage } from "@prismicio/svelte";<PrismicImage>
Displays an optimized image from an image field.
<PrismicImage field={slice.primary.image} />fieldImageFieldalt""fallbackAlt""Declare an image as decorative if the image field does not have alt text.
widthsnumber[] | "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"
pixelDensitiesnumber[] | "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.
<PrismicLink>
Displays a link from a link field or document.
<PrismicLink field={slice.primary.link} />fieldLinkFieldA link field to link. Only one of field, document, or href can be
used.
documentPrismicDocumentA Prismic document to link. Only one of field, document, or href can
be used.
hrefstringA URL to link. Only one of field, document, or href can be used.
relundefined | string | ((metadata) => string | undefined)A ref 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.
<PrismicText>
Displays plain text from a rich text field.
<PrismicText field={slice.primary.text} />fieldRichTextFieldA rich text field to render.
fallbackstringRendered if the rich text field is empty.
separatorstringSeparator used between text blocks.
" "
<PrismicRichText>
Displays formatted text from a rich text field.
<PrismicRichText field={slice.primary.text} />fieldRichTextFieldA rich text field to render.
componentsobjectA map of rich text block types to Svelte components. See an example.
Standard HTML elements (e.g. heading1 becomes a <h1>).
<PrismicTable>
Displays a table from a table field.
<PrismicTable field={slice.primary.table} />fieldTableFieldA table field to render.
componentsobjectA map of table elements and rich text block types to Svelte components. 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.
Standard HTML elements (e.g. table becomes a <table>).
fallbackComponentRendered if the table field is empty.
<PrismicEmbed>
Displays embedded content from an embed field.
<PrismicEmbed field={slice.primary.embed} />fieldEmbedFieldAn embed field to render.
<SliceZone>
Renders slices from a slice zone.
<SliceZone slices={page.data.slices} {components} />slicesSliceZonecomponentsRecord<string, Component<SliceComponentProps>>A map of slice types to Svelte components.
sliceSliceThe slice object being displayed.
slicesSlice[]All slices in the slice zone.
indexnumberThe index of the slice in the slice zone.
contextunknownThe data passed to <SliceZone>’s context prop.
defaultComponentComponentRendered if a slice does not have a component mapping.
contextanyArbitrary data made available to all slice components.
SvelteKit API
@prismicio/svelte provides components and functions for SvelteKit.
All SvelteKit components and functions can be imported as named imports from @prismicio/svelte/kit.
The following example imports PrismicPreview:
import { PrismicPreview } from "@prismicio/svelte/kit";<PrismicPreview>
Adds support for content previews by including the Prismic toolbar and event listeners. Webpages are automatically refreshed when a new content draft is saved.
<PrismicPreview repositoryName="example-prismic-repo" />repositoryNamestringroutePrefixstringThe route parameter prefixed during preview sessions.
"preview"
routePrefixNamestringThe 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.
enableAutoPreviews({ client, cookies });clientClientcookiesCookiesThe cookies object provided to a route’s load() function. This
parameter is required to load previews.
redirectToPreviewURL()
Redirects a content writer to a previewed document’s URL. This function should only be called in a +server file.
redirectToPreviewURL({ client, request, cookies });clientClientdefaultURLstringThe default redirect URL if a URL cannot be determined for the previewed document.
/routePrefixstringThe route parameter prefixed during preview sessions..
"preview"Upgrade from v1
Follow these steps to upgrade an existing project to @prismicio/svelte v2.
Upgrade to Svelte 5
@prismicio/sveltev2 requires Svelte 5. If you are using Svelte 4 or earlier, follow the official Svelte 5 migration guide.Install
@prismicio/sveltev2npm install @prismicio/svelte@^2Replace
SvelteRichTextSerializerwithRichTextComponentsThe
SvelteRichTextSerializerTypeScript type is deprecated to phase out the “serializer” term.The type has been renamed to
RichTextComponents.import type { SvelteRichTextSerializer, RichTextComponents, } from "@prismicio/svelte"; const serializer: SvelteRichTextSerializer = const serializer: RichTextComponents = { paragraph: Paragraph };