# Slice Simulator Error

**URL:** <https://community.prismic.io/t/slice-simulator-error/13844>\
**Category:** Developing with Prismic\
**Tags:** nextjs, javascript, slice-machine\
**Created:** [August 9, 2023, 12:43pm UTC](https://community.prismic.io/t/slice-simulator-error/13844 "2023-08-09T12:43:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![digitaldantecrypto](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/digitaldantecrypto/32/6177_2.png) [@digitaldantecrypto](https://community.prismic.io/u/digitaldantecrypto)\
**Post date:** [August 9, 2023, 12:43pm UTC](https://community.prismic.io/t/slice-simulator-error/13844/1 "2023-08-09T12:43:55Z")

</div>

Hello Everyone, I am trying to develop a website following this tutorial : [https://www.youtube.com/watch?v=QeD31HHsREg&t=761s](https://www.youtube.com/watch?v=QeD31HHsREg&t=761s)

And when I want to see the simulator of my slices I get nothing but a text saying : "Placeholder component for hero\_slice (variation: default) Slices"  
And the content I created, pushed and edited on prismic don't show up on localhost. (same text)

The code I have in my slices is for e.g in "HeroSlice"

```auto
const HeroSlice = ({ slice }) => {
  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      Placeholder component for hero_slice (variation: {slice.variation}) Slices
    </section>
  );
};

export default HeroSlice;

```

and in my index.jsx in my /pages/ folder is :

```auto
import { SliceZone } from '@prismicio/react'
import { createClient } from '../prismicio'
import { components } from '../slices'
 
const Page = ({ page, navigation, settings }) => {
  return <SliceZone slices={page.data.slices} components={components} />
}
 
export default Page
 
export async function getStaticProps({ previewData }) {
  const client = createClient({ previewData })
  const page = await client.getSingle('homepage')
  return {
    props: {
      page
    }
  }
}

```

I don't know what step I've missed

 ![72461750fb5c31c75a8ad72908f01721](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/0/0370cb3e2f83ce1224a919f6b22bbc0f4e198207.png)

---

<div class="post-metadata">

**Author:** ![digitaldantecrypto](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/digitaldantecrypto/32/6177_2.png) [@digitaldantecrypto](https://community.prismic.io/u/digitaldantecrypto)\
**Post date:** [August 13, 2023, 10:46am UTC](https://community.prismic.io/t/slice-simulator-error/13844/3 "2023-08-13T10:46:50Z")

</div>

Update if someone cares.

It seems that I didn't fully understood the extend of the utilization of slice-machine and I thought it would create the richtext by itself on the slices/slicename/index.js BUT I have to this myself.