View Source Tamnoon HEEx

Tamnoon HEEx is an extension of HEEx (HTML + Elixir), which makes it easy to add real-time functionality.

Reading Variables

When we want to read a variable from the state in our app (in this example we will display the user's name), we can simply include it as @variable in a component as such:

<p hidden=@hidep> can you see me? </p>
<p hidden=@not-hidep> can you see me? </p>
<p>@name</p>
<p>@raw-name</p>

  • The first <p> will be hidden if we have a method that returns %{hidep: true} to the client. Note: We don't need to have a variable named 'hidep' in our state for that work, however most often you will want to.

  • The second <p> will be hidden if a method returns %{hidep: false} to the client. (Meaning it will invert the value)

  • The third <p> will have its text updated every time the name variable changes.

  • The last <p> will have its inner HTML updated every time name changes. This is a way to dynamically switch between components.

Updating Variables (Events)

Now let's update our variables. Consider the following:

<button onclick=@log>push me!</button>
<input onchange=@update-name />

  • As seen previously, the button will trigger the log method when pressed.

  • The input will trigger the update method for the key name.

These are events. By default, events send the server an object with fields for the method, the outer HTML of the element, the value of it, and if a - is used then also a key. (There is additional syntax for using pub, we will go over it in the PubSub guide)

Example

Let's continue our chat room. Inside "app.html.heex" add the following:

<p>Name: <span>@name</span> </p>
<input oninput=@update-name />

Restart the server, reload the page, and you should now see the name change as you type!