# Custom Component Props Not Exposed to Template (\`$props\` Always Empty) — Elements v1.2.2

**URL:** <https://forums.realmacsoftware.com/t/custom-component-props-not-exposed-to-template-props-always-empty-elements-v1-2-2/50773>\
**Category:** Elements\
**Created:** [September 3, 2025, 8:18pm UTC](https://forums.realmacsoftware.com/t/custom-component-props-not-exposed-to-template-props-always-empty-elements-v1-2-2/50773 "2025-09-03T20:18:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![thisisrock](https://avatars.discourse-cdn.com/v4/letter/t/82dd89/32.png) [@thisisrock](https://forums.realmacsoftware.com/u/thisisrock)\
**Post date:** [September 3, 2025, 8:18pm UTC](https://forums.realmacsoftware.com/t/custom-component-props-not-exposed-to-template-props-always-empty-elements-v1-2-2/50773/1 "2025-09-03T20:18:21Z")

</div>

Dear Elements-team,

I believe I’ve discovered a fundamental issue with Custom Components in RapidWeaver Elements (v1.2.2), and after lots of testing and elimination, I’m pretty sure this isn’t user error!

**Summary:**  
No matter what properties I add to my custom component (text, number, toggle, resource), _none_ are available via `$props` in the HTML template. Not even a simple text property shows up, and even `<pre x-text="JSON.stringify($props, null, 2)"></pre>`shows absolutely nothing. This makes building dynamic custom components impossible.

**Steps to Reproduce:**

1. Create a new project and add a Custom Component.
2. Use this `properties.json`:

```auto
{
  "groups": [
    {
      "title": "Test Props",
      "properties": [
        { "title": "Texty", "id": "texty", "text": {} },
        { "title": "Numbery", "id": "numbery", "number": {} }
      ]
    }
  ]
}

```

1. In the HTML template, add:

```auto
<div x-data>
  <div>Text: <span x-text="$props.texty"></span></div>
  <div>Number: <span x-text="$props.numbery"></span></div>
  <pre x-text="JSON.stringify($props, null, 2)"></pre>
</div>

```

1. Fill in the Inspector fields and go to Preview. Nothing is rendered (values don’t show, JSON is empty).

**I also tested with images (“resource”), arrays, and Boolean toggles (which don’t appear at all in the inspector). No data shows up in the template for any property type.**

**What I Expected:**  
That `$props` would contain (at minimum) the values from the Inspector for text, number, toggle, and resource fields—just like in almost all custom component/documentation examples.

**What Happens:**  
`$props` is empty. Can’t render anything based on component properties. Only static HTML works.

* * *

**Am I missing a trick, or is `$props` just not wired up in custom components currently? Maybe it is even the wrong parameter name?  
If this is a known issue, is there any ETA or workaround?  
If not—please consider this a high-priority bug report! This makes most interactive custom components impossible.**

Thanks for your help,  
Hans

Tagging @dan, @tpbradley for dev wisdom!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 3, 2025, 8:49pm UTC](https://forums.realmacsoftware.com/t/custom-component-props-not-exposed-to-template-props-always-empty-elements-v1-2-2/50773/2 "2025-09-03T20:49:13Z")

</div>

Hey there, thanks for the detailed post. I’m hoping I can solve this for you very quickly…

I hope I’m not stating the obvious, but you need to define the props in the `hooks.js` file. Here’s a screenshot of a custom component showing the hooks file (see screenshot):

 ![Screenshot 2025-09-03 at 9.30.56 pm](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/7/4749ed328f91da42a42251054f987b5cc4ecd419.jpeg)

Here’s a [link to the hooks.js documentation](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js) with a little more information.

Does that help?

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 3, 2025, 10:58pm UTC](https://forums.realmacsoftware.com/t/custom-component-props-not-exposed-to-template-props-always-empty-elements-v1-2-2/50773/3 "2025-09-03T22:58:51Z")

</div>

It is worth noting that not all properties from the properties file need to be processed through hooks.js; any properties that create Tailwind classes, such as a color, can be applied directly in the HTML.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 4, 2025, 6:56am UTC](https://forums.realmacsoftware.com/t/custom-component-props-not-exposed-to-template-props-always-empty-elements-v1-2-2/50773/4 "2025-09-04T06:56:51Z")

</div>

> [@thisisrock](#):
>
> 1. In the HTML template, add:
> 
> ```auto
> <div x-data>
> <div>Text: <span x-text="$props.texty"></span></div>
> <div>Number: <span x-text="$props.numbery"></span></div>
> <pre x-text="JSON.stringify($props, null, 2)"></pre>
> </div>
> 
> ```

You don’t access the control properties via `$props.propName` - you need to use `{{propName}}` instead.

so in your template you would do this:

```php-template
<div>Text: {{texty}}</div>
<div>Number: {{numbery}}</div>

```

Have you had a look at the [Elements language docs](https://docs.realmacsoftware.com/elements-docs/elements-language/component/language)? There’s more info and some examples in there, but do give us a shout if you get stuck 🙂

---

<div class="post-metadata">

**Author:** ![thisisrock](https://avatars.discourse-cdn.com/v4/letter/t/82dd89/32.png) [@thisisrock](https://forums.realmacsoftware.com/u/thisisrock)\
**Post date:** [September 4, 2025, 9:16am UTC](https://forums.realmacsoftware.com/t/custom-component-props-not-exposed-to-template-props-always-empty-elements-v1-2-2/50773/5 "2025-09-04T09:16:11Z")

</div>

> [@ben](#):
>
> You don’t access the control properties via `$props.propName` - you need to use `{{propName}}` instead.

Thank you all… the {{propName}} hint helped me further.  
For simple components (e.g. text, number) this is the magic andit is not even necessary to have a hooks.js.  
However I will have to take a dive into the suggested Elements Manual sections.