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 Skypack:

<script type="module">
  import { signal } from 'https://cdn.skypack.dev/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());
</script>

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

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.