Sigment — Docs

1. Introduction

Sigment is a minimal reactive framework for building fast, modern UIs — no virtual DOM, no JSX, no transpilation. Write plain JavaScript with simple tag functions and reactive signals.

2. Getting Started

Installation

Install Sigment in your project with npm or yarn:

npm install sigment
# or
yarn add sigment

Basic Usage

Import the functions you need in your JavaScript/TypeScript files:

import { signal } from 'sigment';

function Counter() {
  const [count, setCount] = signal(0);

  return div({ id: 'counter' },
    button({ onClick: () => setCount(count() + 1) }, 'Increment'),
    p(() => `Count is: ${count()}`)
  );
}

document.body.appendChild(Counter());

Quick Browser Testing (Optional)

If you want to try Sigment in the browser without a build step, use a CDN that serves npm packages as ES modules, for example jsdelivr:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Sigment Counter</title>
</head>
<body>

<script type="module">
  import { createSignal } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";

  function Counter() {
    const [count, setCount] = createSignal(0);

    return div(
      h1("Sigment Reactive Framework"),
      button(
        { onClick: () => setCount(count() + 1) },
        "Increment"
      ),
      p(() => `Count is: ${count()}`)
    );
  }

  document.body.appendChild(Counter());
</script>

</body>
</html>

If you want to try Sigment NG a variant of Sigment — **no global helpers**, all HTML elements are imported explicitly. Ideal for developers who want a clean, modular setup without polluting the global scope.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Sigment Counter</title>
</head>
<body>

<script type="module">
  import { createSignal , div, button , h1 , p } from "https://cdn.jsdelivr.net/gh/sigmentjs/[email protected]/dist/index.js";

  function Counter() {
    const [count, setCount] = createSignal(0);

    return div(
      h1("Sigment Reactive Framework"),
      button(
        { onClick: () => setCount(count() + 1) },
        "Increment"
      ),
      p(() => `Count is: ${count()}`)
    );
  }

  document.body.appendChild(Counter());
</script>

</body>
</html>

3. Reactivity Basics

signal(initialValue) creates reactive state — returns [getter, setter].
Access state via the getter count(); update with the setter setCount(newValue).
Pass reactive getters as children or attributes to automatically update the DOM when state changes.

4. Creating Elements

Use tag functions matching HTML tags, e.g., div(), button().
Props include event handlers (onClick), attributes, styles, etc.
Children can be strings, nodes, or reactive functions returning content.

5. Building Components

function App() {
  return div({ className: 'app' },
    Counter()
  );
}

document.body.appendChild(App());

6. Why No JSX?

Sigment works without JSX or build steps — no need for Babel or TypeScript configuration.
DOM is built directly with simple JavaScript functions — easier to debug and understand.
Lightweight and fast without virtual DOM overhead.

7. Examples

const [count, setCount] = signal(0);

const counter = div({ id: 'counter' },
  button({ onClick: () => setCount(count() + 1) }, 'Increment'),
  p(() => `Count is: ${count()}`)
);

document.body.appendChild(counter);

8. API Summary

Function	Description
`signal(v)`	Create reactive state — returns [getter, setter]
`div(props, ...children)`	Create a <div> element with props and children
`button(props, ...children)`	Create a <button> element
other tag functions	For all common HTML tags

9. FAQ

Q: Can I use JSX?
A: Sigment does not require JSX; build UI with plain JS functions.

Q: Does Sigment have a virtual DOM?
A: No, it updates the real DOM directly for better performance.

Q: Do I need a build step?
A: No build step or transpilation is needed.