Home | Hello world | Component | Pursx 1 | Events 1 | Effects | Pursx 2 | Events 2 | Portals | SSR |

A Simple Component

Slightly more bells and whistles

Let's look at an example with several different DOM tags.

And here's what it produces:

Creating an element

To create an element, like for example a span element, the pattern goes like this:

mySpanWithAttrs = D.span attrs children
mySpanWithNoAttrs = D.span_ children
myDivWithNoChildren = D.div attrs blank

attrs contains attributes of type Event (Attribute element), where element is the current element you're assigning attributes to. You never have to specify this type: it is inferred automatically by the attribute creation operator, aka :=. If you use an attribute that's unsupported by an element, the compiler will complain.

For now, children is an array of children, not unlike Halogen or React sans JSX. We'll see some other types of children later in this guide.


Attributes like an element's style or id are specified as the first argument to an element. Attributes are just Event-s, so you can pure them to make them happen now, combine two event streams with alt to compose events, etc.

As an example, we made the input a range slider using pure (Xtype := "range"). Unlike Halogen, there are no checks to make sure you give a valid string. So if you want your range slider to have the value of true, you can. One day, I may build some validators, but passing strings works decently well here.

Next steps

In this section, we built a simple component. In the next section, we'll recreate the exact same element using a different input syntax called Pursx.