DEV Community

Cover image for A 1KB Frontend Library in Just 135 Lines
Nazmul Hossain
Nazmul Hossain

Posted on

A 1KB Frontend Library in Just 135 Lines

#webdev #javascript #react #vue

serajs (2)

📖 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.

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'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 world</h1> ); }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
gauravchandra profile image
Gaurav Chandra •

Why can't html be used instead of jsx? Why another react inspired library?