No JSX

Why No JSX?

Sigment embraces the power of plain JavaScript and provides tag functions to build your UI. This means:

Creating Elements

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.

Nested Elements

You can nest elements like you would in JSX:

div(
  h2("Product List"),
  ul(
    li("Item 1"),
    li("Item 2")
  )
)

Conditional Rendering

Conditional logic is just JavaScript — no special syntax:

const isLoggedIn = true;
div(
  isLoggedIn ? span("Welcome back!") : span("Please log in")
)

Looping

Render lists using map and spread syntax:

const items = ["One", "Two", "Three"];
ul(
  ...items.map(text => li(text))
)