Basic Syntax

Elements

Elements are basically functions stacked on top of each other in an array separated by commas that each return a jsUI Element instance.

Components are considered elements that include their own CSS, such as Spinner(), or are simply a proxy to return elements, such as If and Repeat.

view([
    Element(),
    Component(),
    // …
]);

Styling

To apply styles to an element, simply add the corresponding method using dot notation.

Element()
    .propertyMethod()

Nested elements

Most elements accept an array of elements as their first or second argument which means that that element can nest elements inside itself.

Div([
    Paragraph("Text")
])

Resulting HTML:

<div>
    <p>Text</p>
</div>

Non-nested elements

This may change in the future, but some elements only accept text arguments, like Text(), Hyperlink(), Button(), etc. accept the most used attribute(s) as their arguments for convenient shorthands.

Example

The Hyperlink() element accepts optional text and URL arguments. While these can also be set using it's url() and text() methods, you can simply set these common arguments, so that there's generally no need to chain methods.

Hyperlink("Link Text", "https://example.com")