Rendering slices in svelte/sapper

Does anyone has any experience in trying to render slices in svelte/sapper ?


I've just had a go (first time using Svelte actually) and it's not too hard.

Once you have your page data from Prismic (which you can use prismic-javascript for), run the slices through an {#each} block:

<!-- App.svelte -->

  import Prismic from 'prismic-javascript'
  import PrismicDOM from 'prismic-dom'

  async function getPage () {
    return await Prismic.api('')
      .then((api) => {
        return api.getByID('XqLu6REAACfAY6IC') // Put a real document ID here

{#await getPage()}

{:then prismic}
  {#each as slice}
    {#if slice.slice_type === 'text'}
      {@html PrismicDOM.RichText.asHtml(slice.primary.text)}

    {:else if slice.slice_type === 'image_link_grid'}
      {#each slice.items as image}
        <img src="{image.image.url}">

    <!-- Add more slice things here by checking the slice_type -->

<p>Error getting data</p>


Hi @marcellothearcane,

Thanks , this is very helpful , unfortunately as it stands it doesn't appear to be working in sapper, but possibly with some adjustments it will !

Best wishes,


Just tried using Sapper, and it renders:

<!-- /src/routes/[slug].svelte -->

<script context="module">
  import Prismic from 'prismic-javascript'
  import PrismicDOM from 'prismic-dom'

  export async function preload (page, session) {
    const { slug } = page.params

    const api = await Prismic.api('')
    const document = await api.getByUID('page', slug)
    return { document }

	export let document

  {#each as slice}
    {@html PrismicDOM.RichText.asHtml(slice.primary.title)}


I'm not sure I'm using it correctly, I haven't touched the server or anything. This is a proof of concept, and it seems to be okay.

This issue has been closed due to inactivity. Flag to reopen.

FYI, With SvelteKit in beta currently, we've published a tutorial on using Prismic with SvelteKit:

We don't have any documentation for implementing previews, yet, but that will be forthcoming.