# Adding a bespoke raw template

**URL:** https://meta.discourse.org/t/adding-a-bespoke-raw-template/177993
**Category:** Development
**Created:** [February 1, 2021, 5:40pm UTC](https://meta.discourse.org/t/adding-a-bespoke-raw-template/177993 "2021-02-01T17:40:32Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 1, 2021, 5:40pm UTC](https://meta.discourse.org/t/adding-a-bespoke-raw-template/177993/1 "2021-02-01T17:40:32Z")

</div>

Hey, I’m trying to add my own Raw template … not simply override an existing one.

Reason: trying to get rid of those nasty ember tags you get when using nested components.

… initially I assumed it would be as easy as just adding one to the `templates` or `templates/list` directory, so I went ahead and did that, only for it to silently fail (to find my template).

Perhaps I can confirm this is not supported?

Then I found this:

[https://github.com/discourse/discourse/commit/612284cef31cb9f068e0d36d01306d355a065ced](https://github.com/discourse/discourse/commit/612284cef31cb9f068e0d36d01306d355a065ced)

and this:

> <https://github.com/discourse/discourse/blob/83347ac218f708e172944f087c4781acad41efaf/app/assets/javascripts/discourse/tests/acceptance/raw-plugin-outlet-test.js>

So I tried this:

```plaintext
import { addRawTemplate } from "discourse-common/lib/raw-templates";
import { compile } from "handlebars";

<---some init stuff -->

addRawTemplate('search-result-entry', compile(`<span class='result-lala'>hello</span>`));

```

Only to get this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/7/e784a84806b623f1618e9aab7e9e1bba7b7738c5.png)

`TypeError: Handlebars.compile is undefined`

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/e/3e153cd47b694fb8d183e8b333e06163439f1a1d.png)

Thanks!

Apologies if I’m doing anything wrong here …

(this is going to be super useful btw, so thank you for implementing it!)

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [February 1, 2021, 6:25pm UTC](https://meta.discourse.org/t/adding-a-bespoke-raw-template/177993/2 "2021-02-01T18:25:33Z")

</div>

You should be able to add a raw template straight to the templates folder. We did so in `discourse-docs`. They now use the `.hbr` file extension, so maybe that’s where things tripped up.

> **[discourse-docs/assets/javascripts/discourse/templates at main ·...](https://github.com/discourse/discourse-docs/tree/main/assets/javascripts/discourse/templates)**
>
> main/assets/javascripts/discourse/templates

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [February 1, 2021, 6:36pm UTC](https://meta.discourse.org/t/adding-a-bespoke-raw-template/177993/3 "2021-02-01T18:36:51Z")

</div>

> [@merefield](#):
>
> Reason: trying to get rid of those nasty ember tags you get when using nested components.

You mean the wrapper `<div>` which is added to ember components by default? You can disable that by setting `tagName` to an empty string:

> <https://github.com/discourse/discourse/blob/11c812f042534ed1e23775850f99fd7aba854228/app/assets/javascripts/admin/addon/components/admin-editable-field.js#L2-L3>

Working with ember components is way easier than raw templates, so I’d definitely recommend sticking to ember if you can.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 1, 2021, 8:19pm UTC](https://meta.discourse.org/t/adding-a-bespoke-raw-template/177993/4 "2021-02-01T20:19:45Z")

</div>

Gah, I had my hbr templates in `templates/components`! (which is obviously wrong when you write that down)

Thanks for that example Justin! Fixed it by moving that out to templates folder, doh!

Working now!

@david ah very useful tip, thank you! I’ll leverage that too! That will allow me to retain actions, perfect.

Seems I’d vastly over complicated it, cheers!
