📖 Introduction

GitHub Link

SeraJS is a lightweight, signal-based reactive JavaScript library for
building dynamic user interfaces.

At just 1.25KB gzipped and only 135 lines of code, it's a remarkably lightweight reactive UI library — offering powerful reactivity with minimal overhead.

⚡️ SeraJS focuses on minimalism and performance without sacrificing
developer experience.

⚙️ Core Concepts

🔄 Signal-Based Reactivity

SeraJS uses a signal-based reactive system, a modern approach to state
management that enables efficient updates:

  • 🧠 Signals

    Self-contained reactive values that notify subscribers when they change.

  • 🌀 Effects

    Functions that automatically re-execute when their dependencies (signals)

    change.

  • 🧭 Memo

    A memoization helper similar to React's useMemo, used to cache the result

    of a computation based on reactive dependencies to avoid unnecessary
    recalculations.

  • 🔬 Fine-Grained Updates

    Only the specific DOM elements affected by state changes are updated,

    resulting in minimal re-rendering and high performance.

💡 SeraJS is designed to be intuitive, fast, and easy to integrate into any
project — making it a perfect choice for modern frontend development.

Why SeraJS?

SeraJS brings together the best parts of libraries like React, Solid, and Lit — blending familiar patterns with a fresh, minimal approach.

At just 1.25KB gzipped and only 135 lines of code, this reactive UI library stays ultra-light while still delivering powerful reactivity.

Whether you want a build system or prefer a no-build workflow, SeraJS has you covered. It’s flexible enough to fit your dev style — use it how you want.

🌱 Sera.js Basic Example

A minimal example showing a Hello World message using Sera.js.

📄 App.jsx 

import { h } from "serajs";

export default function App() {
  return (
    <h1>Hello worldh1>
  );
}

No Build, No Dependencies 

</span>

  
    Sera js 😎
  
  
    <span class="na">type="module">
      import { h, setSignal, setEffect } from "//unpkg.com/serajs";

      function Hello() {
        const [count, setCount] = setSignal(0);

        setEffect(() => {
          console.log(count());
        });

        return h(
          "div",
          null,
          h("h1", null, "Hello World!"),
          h("p", { style: { color: "red" } }, "Do you Like Serajs?"),
          h("h1", null, () => `Count: ${count()}`),
          h(
            "button",
            { onclick: () => setCount(count() + 1) },
            "Increase Count"
          )
        );
      }

      const root = document.body;
      root.appendChild(Hello());
    
  




    Enter fullscreen mode
    


    Exit fullscreen mode