Sigment embraces the power of plain JavaScript and provides tag functions to build your UI. This means:
You write UI like this:
const title = h1("Welcome to Sigment");
const content = div({ class: "box" }, "Hello world!");
document.getElementById("root").append(title, content);
This works the same way JSX would — but without a virtual DOM or transpiler.
You can nest elements like you would in JSX:
div(
h2("Product List"),
ul(
li("Item 1"),
li("Item 2")
)
)
Conditional logic is just JavaScript — no special syntax:
const isLoggedIn = true;
div(
isLoggedIn ? span("Welcome back!") : span("Please log in")
)
Render lists using map
and spread syntax:
const items = ["One", "Two", "Three"];
ul(
...items.map(text => li(text))
)