# How do I get a custom block that uses blocks to preview in the Panel?

**URL:** <https://forum.getkirby.com/t/how-do-i-get-a-custom-block-that-uses-blocks-to-preview-in-the-panel/30398>\
**Category:** Questions\
**Tags:** v4\
**Created:** [January 3, 2024, 7:45pm UTC](https://forum.getkirby.com/t/how-do-i-get-a-custom-block-that-uses-blocks-to-preview-in-the-panel/30398 "2024-01-03T19:45:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![whitmoa](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/whitmoa/32/16395_2.png) [@whitmoa](https://forum.getkirby.com/u/whitmoa)\
**Post date:** [January 3, 2024, 7:45pm UTC](https://forum.getkirby.com/t/how-do-i-get-a-custom-block-that-uses-blocks-to-preview-in-the-panel/30398/1 "2024-01-03T19:45:48Z")

</div>

I’ve created a custom block (via a plugin). The custom block uses other blocks for its content. It works perfectly in that I can add content to the block that then renders in the front-end.

The challenge I’m having is getting the content to preview in the Panel as intended, rather than displaying the raw content. I’ve looked through the Docs and the Forum but I can’t seem to find anything that explains what I need to add to my plugin’s index.js file.

The index.js file currently looks like this…

```auto
panel.plugin("brandsistency/feature-block", {
  blocks: {
    feature: `
      <div @click="open">
        {{ content.text }}
      </div>
    `
  }
});

```

But the Panel preview looks like this…

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/7/7670910d9fa7ce8dde22b8d15679371c401ea101.png)

Can anyone let me know what, if any, changes I can make to the index.js file to ‘correct’ the Panel preview? Thanks.

---

<div class="post-metadata">

**Author:** ![ahmetbora](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/ahmetbora/32/11671_2.png) [@ahmetbora](https://forum.getkirby.com/u/ahmetbora)\
**Post date:** [January 3, 2024, 7:55pm UTC](https://forum.getkirby.com/t/how-do-i-get-a-custom-block-that-uses-blocks-to-preview-in-the-panel/30398/2 "2024-01-03T19:55:20Z")

</div>

I think you missed `template` prop.

```js
panel.plugin("brandsistency/feature-block", {
  blocks: {
    feature: {
      template: `
        <div @click="open">
          {{ content.text }}
        </div>
      `
    }
  }
});

```

---

<div class="post-metadata">

**Author:** ![whitmoa](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/whitmoa/32/16395_2.png) [@whitmoa](https://forum.getkirby.com/u/whitmoa)\
**Post date:** [January 3, 2024, 8:07pm UTC](https://forum.getkirby.com/t/how-do-i-get-a-custom-block-that-uses-blocks-to-preview-in-the-panel/30398/3 "2024-01-03T20:07:08Z")

</div>

Thanks, Ahmet, but it hasn’t solved the problem. I’ve added the template prop but the preview is still the raw content.

I’m wondering if there is something I need to add to `{{ content.text }}`. Some sort of equivalent to the `->toBlocks()` method used in snippets and templates.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 3, 2024, 8:17pm UTC](https://forum.getkirby.com/t/how-do-i-get-a-custom-block-that-uses-blocks-to-preview-in-the-panel/30398/4 "2024-01-03T20:17:38Z")

</div>

You need a custom API endpoint that returns the parsed content

---

<div class="post-metadata">

**Author:** ![whitmoa](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/whitmoa/32/16395_2.png) [@whitmoa](https://forum.getkirby.com/u/whitmoa)\
**Post date:** [January 3, 2024, 8:27pm UTC](https://forum.getkirby.com/t/how-do-i-get-a-custom-block-that-uses-blocks-to-preview-in-the-panel/30398/5 "2024-01-03T20:27:31Z")

</div>

Thanks, Sonja. That’s a bit beyond my skills, so I think I’ll have to revert to fields for input rather than blocks.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 3, 2024, 9:25pm UTC](https://forum.getkirby.com/t/how-do-i-get-a-custom-block-that-uses-blocks-to-preview-in-the-panel/30398/6 "2024-01-03T21:25:54Z")

</div>

It’s not that complex, you can find examples of using API endpoints here:

- [More block examples | Kirby CMS](https://getkirby.com/docs/guide/page-builder/block-examples#card-type-block__preview)
- [Custom block type from scratch | Kirby CMS](https://getkirby.com/docs/guide/page-builder/custom-block-type#refining__side-quest-getting-the-mime-type-through-the-api)