# Rendering slices in svelte/sapper

**URL:** <https://community.prismic.io/t/rendering-slices-in-svelte-sapper/2250>\
**Category:** Developing with Prismic\
**Tags:** svelte\
**Created:** [October 12, 2020, 10:11am UTC](https://community.prismic.io/t/rendering-slices-in-svelte-sapper/2250 "2020-10-12T10:11:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![paul](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/paul/32/478_2.png) [@paul](https://community.prismic.io/u/paul)\
**Post date:** [October 12, 2020, 10:11am UTC](https://community.prismic.io/t/rendering-slices-in-svelte-sapper/2250/1 "2020-10-12T10:11:52Z")

</div>

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

Paul

---

<div class="post-metadata">

**Author:** ![marcellothearcane](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marcellothearcane/32/224_2.png) [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)\
**Post date:** [October 13, 2020, 7:27am UTC](https://community.prismic.io/t/rendering-slices-in-svelte-sapper/2250/2 "2020-10-13T07:27:18Z")

</div>

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:

```auto
<!-- App.svelte -->

<script>
  import Prismic from 'prismic-javascript'
  import PrismicDOM from 'prismic-dom'

  async function getPage () {
    return await Prismic.api('https://your-repository.cdn.prismic.io/api/v2')
      .then((api) => {
        return api.getByID('XqLu6REAACfAY6IC') // Put a real document ID here
      })
  }
</script>

{#await getPage()}
<p>Loading...</p>

{:then prismic}
  {#each prismic.data.body 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}">
      {/each}

    <!-- Add more slice things here by checking the slice_type -->
    {/if}
  {/each}

{:catch}
<p>Error getting data</p>

{/await}

```

---

<div class="post-metadata">

**Author:** ![paul](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/paul/32/478_2.png) [@paul](https://community.prismic.io/u/paul)\
**Post date:** [October 20, 2020, 7:48am UTC](https://community.prismic.io/t/rendering-slices-in-svelte-sapper/2250/3 "2020-10-20T07:48:29Z")

</div>

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,

Paul

---

<div class="post-metadata">

**Author:** ![marcellothearcane](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marcellothearcane/32/224_2.png) [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)\
**Post date:** [October 20, 2020, 10:27am UTC](https://community.prismic.io/t/rendering-slices-in-svelte-sapper/2250/4 "2020-10-20T10:27:48Z")

</div>

Just tried using Sapper, and it renders:

```auto
<!-- /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
    console.log(slug)

    const api = await Prismic.api('https://your-repo.cdn.prismic.io/api/v2')
    const document = await api.getByUID('page', slug)
    return { document }
  }
</script>

<script>
	export let document
</script>

<div>
  {#each document.data.body as slice}
    {@html PrismicDOM.RichText.asHtml(slice.primary.title)}
  {/each}
</div>

```

![image](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/6/6adce3a2db8f94e0da6a0dc8773f5b68f1cc5576.png)

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.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [November 18, 2020, 10:39am UTC](https://community.prismic.io/t/rendering-slices-in-svelte-sapper/2250/5 "2020-11-18T10:39:43Z")

</div>

This issue has been closed due to inactivity. [Flag to reopen](https://community.prismic.io/t/re-open-a-thread/2175).

---

<div class="post-metadata">

**Author:** ![Fares](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [March 26, 2021, 3:07pm UTC](https://community.prismic.io/t/rendering-slices-in-svelte-sapper/2250/6 "2021-03-26T15:07:45Z")

</div>

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

[https://prismic.io/blog/svelte-sveltekit-tutorial](https://prismic.io/blog/svelte-sveltekit-tutorial)

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

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 4:25pm UTC](https://community.prismic.io/t/rendering-slices-in-svelte-sapper/2250/7 "2021-12-09T16:25:04Z")

</div>