📖 Introduction
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.
Bundle Size Comparison (Minified + Gzipped)
| Library | Size (gzipped) | Build Step Required | Main Purpose | Key Features |
|---|---|---|---|---|
| SeraJS | 1.25kb | Optional 😎 | Reactive UI | 135 lines of code, extremely lightweight |
| React | ~40kb | Yes | UI components | Virtual DOM, component-based architecture, JSX |
| Vue | ~33kb | Optional | Progressive framework | Reactive data binding, component system, single-file components |
| Solid.js | ~7kb | Yes | Reactive UI | No virtual DOM, compiled templates, fine-grained reactivity |
| Alpine.js | ~7.1kb | No | Lightweight framework | Minimal DOM manipulation, declarative syntax, works with existing HTML |
| Preact | ~4kb | Yes | React alternative | API compatible with React, smaller size, faster performance |
| htmx | ~14kb | No | AJAX enhancements | HTML attributes for AJAX, minimal JavaScript, server-side rendering friendly |
⚙️ 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'suseMemo, 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 world</h1>
);
}
No Build, No Dependencies
<!DOCTYPE html>
<html>
<head>
<title>Sera js 😎</title>
</head>
<body>
<script 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());
</script>
</body>
</html>
SOCIAL SHARE CARD GENERATOR