📖 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.
⚙️ 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> 
Top comments (0)