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

Elements Feedback
1

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:
{
  "groups": [
    {
      "title": "Test Props",
      "properties": [
        { "title": "Texty", "id": "texty", "text": {} },
        { "title": "Numbery", "id": "numbery", "number": {} }
      ]
    }
  ]
}
  1. In the HTML template, add:
<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!

2

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
Screenshot 2025-09-03 at 9.30.56 pm3164×1894 319 KB

Here’s a link to the hooks.js documentation with a little more information.

Does that help?

3

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.

4

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

so in your template you would do this:

<div>Text: {{texty}}</div>
<div>Number: {{numbery}}</div>

Have you had a look at the Elements language docs? There’s more info and some examples in there, but do give us a shout if you get stuck :slight_smile:

5

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.

2 Likes