Skip to main content

Elements

This expression is used to describe an element in the application's render tree. The syntax is very similar to React JSX.

Most views will return an element to be rendered.

Definition​

Element primitives can be constructed outside of views though they will not be connected to render tree until they are used within a rendered view. If an element has no children then it can be written as self-closing.

knot
const url = "https://example.com/image.png";
const element = <img src=url></img>;
const selfClosing = <img src=url />;
knot
const url = "https://example.com/image.png";
const element = <img src=url></img>;
const selfClosing = <img src=url />;

Adding Parentheses​

Most property expressions do not require explicitly adding parentheses, but for complex expressions it can help to better indicate the end of an expression.

knot
const stringAttr = <input value="foo bar" />;
const booleanAttr = <input disabled=true />;
const numericAttr = <input tabindex=(123 + 456 + 789) />;
knot
const stringAttr = <input value="foo bar" />;
const booleanAttr = <input disabled=true />;
const numericAttr = <input tabindex=(123 + 456 + 789) />;

Attribute Punning​

You can easily provide the attributes of an element from a variable with a matching name in the same scope.

knot
const name = "foo";
const counter = 10;
const element = <Widget name counter />;
knot
const name = "foo";
const counter = 10;
const element = <Widget name counter />;
caution

Note that this means unlike JSX an attribute without a value does not have a value of true.

knot
const element = <input disabled=true />;
knot
const element = <input disabled=true />;

Inline Expressions​

Expressions can be added inline by wrapping it in braces ({ }) to provide the inner content of an element.

knot
func hello -> "Hello, world!";
const inline = <h1>{hello()}</h1>;
knot
func hello -> "Hello, world!";
const inline = <h1>{hello()}</h1>;

Text Content​

Simple textual content can be written inline to provide the inner content of an element.

knot
const inline = <h1>Hello, world!</h1>;
knot
const inline = <h1>Hello, world!</h1>;

Nested Elements​

Compose together elements in a way familiar to anyone who has used JSX, XML or HTML.

knot
const nested =
  <section>
    <h1>Welcome</h1>
    <main>👋</main>
  </section>;
knot
const nested =
  <section>
    <h1>Welcome</h1>
    <main>👋</main>
  </section>;

Mixed Content​

Elements can also contain mixed content of all the types listed above.

knot
const mixed =
  <div>
    Welcome!
    {123}
    <main>🗑</main>
  </div>;
knot
const mixed =
  <div>
    Welcome!
    {123}
    <main>🗑</main>
  </div>;