Reactivity
Sigment uses fine-grained reactivity, meaning only the specific parts of the DOM that need to update will change. This avoids virtual DOM diffing and improves performance.
No JSX – Faster Build & Simpler Dev
Unlike frameworks like React or Solid, Sigment does not use JSX.
Instead, you write UI directly with functions like div() and span().
This has several key benefits:
- No compilation step – no Babel or JSX transforms required
- Faster development – code runs as-is without tooling overhead
- Maximum closeness to vanilla JavaScript – no custom syntax or transpilation, just native JS
You can use any standard code editor without special plugins. Code is readable, debuggable, and portable—just like writing plain DOM code, but reactive.
Creating Elements
Elements are created using tag functions like div(), button(), etc. These functions accept optional props and children:
div({ id: "myDiv" }, "Hello world")
// or without props
div("Hello world")Dynamic Custom Elements with addsigment
Sigment allows adding custom tag functions dynamically via addsigment. For example, to add a new tag function product(), call:
addsigment("product");
After calling this, you can create elements with product() just like built-in tags. Both with or without props:
product({ class: "item" }, "Product name")
// or
product("Product name")In TypeScript, you can declare the type for these custom tags globally:
declare global {
function product(props: Props<"div">, ...children: Child[]): HTMLElement;
function product(...children: Child[]): HTMLElement;
}
Note: Using addsigment is optional. Most common use cases work with built-in tag functions.