Read-only Props are read-only within a component, and only be set by the parent component. If the values change, the component re-renders with the new values. They are only supposed to be information being passed to the component, which means they can't be changed internally. For internal, mutable data, use State instead.

Props allow components to receive data. You can think of Props as being like "function parameters": They allow you to pass down "arguments" (attributes) to component which can then modify it's appearance, behavior, or content based on the values of these parameters.

Props are set by the parent component (or HTML page). For String values, use plain attributes (e.g. <x-Btn design="round">). For any non-String types, you can use data props set using a := directive syntax for (e.g. <x-Chart data:='[1, 2, 3]'>).


Props contributes it's received values to the renderObj. Examples:

  1. Prop set like: <x-Btn design="round"> will be accessible on the renderObj like, and in the Script or Template CParts like
  2. Prop set like: <x-Chart data:='["a", "b"]'> will be accessible on the renderObj like (with individual items accessed with code that ends with ".data[0]"), and in the Script or Template CParts like


Example #1: Defining Props

Props must always be defined first:

<Props thing1 thing2 ></Props> <Template> <p> <strong>{{ props.thing1 }}</strong>: <em>{{ props.thing2 }}</em> </p> </Template>

Example #2: Setting Props

Props are set using attributes:

<p>Example 1:</p> <x-SimplePropsComponent thing1="Foobar" thing2="Lorem Ipsum" ></x-SimplePropsComponent> <p>Example 2:</p> <x-SimplePropsComponent thing1="quux++" thing2="Dolor Sit Amet" ></x-SimplePropsComponent>

Example 1:

Example 2:

Example #3: Flash card with HTML props

Here we use "top", "content", and "info" as three props. Note how props.content uses |safe filter to allow HTML.

<Props top content info ></Props> <Template> {% if %} <h1>{{ }}</h1> {% endif %} {{ props.content|safe }} {% if %} <p> <strong>ANSWER:</strong><br /> {{ }} </p> {% else %} <label> ✨ REVEAL ANSWER ✨ <input [state.bind] name="show" type="checkbox"> </label> {% endif %} </Template> <State show:=false ></State> <Style> :host { display: block; height: 200px; } :host > * { box-shadow: 10px 10px 10px #00000033; background: salmon; padding: 5px; margin: 0; font-size: 0.9rem; border: 2px outset salmon; } :host p { background: white; } label { height: 50px; } input[name=show] { display: none; } </Style>