<h2>📖 Introduction</h2>
<a href="https://github.com/sera-js/sera" target="_blank" rel="noopener nofollow">GitHub Link</a>
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.
<blockquote>
⚡️ SeraJS focuses on minimalism and performance without sacrificing
developer experience.
</blockquote>
<hr>
<h2>⚙️ Core Concepts</h2>
<h3>🔄 Signal-Based Reactivity</h3>
SeraJS uses a signal-based reactive system, a modern approach to state
management that enables efficient updates:
<ul>
<li>
🧠 Signals 
Self-contained reactive values that notify subscribers when they change.
</li>
<li>
🌀 Effects 
Functions that automatically re-execute when their dependencies (signals) 
change.
</li>
<li>
🧭 Memo 
A memoization helper similar to React’s <code>useMemo</code>, used to cache the result 
of a computation based on reactive dependencies to avoid unnecessary
recalculations.
</li>
<li>
🔬 Fine-Grained Updates 
Only the specific DOM elements affected by state changes are updated, 
resulting in minimal re-rendering and high performance.
</li>
</ul>
<blockquote>
💡 SeraJS is designed to be intuitive, fast, and easy to integrate into any
project — making it a perfect choice for modern frontend development.
</blockquote>
<h2>Why SeraJS?</h2>
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.
<h2>🌱 Sera.js Basic Example</h2>
A minimal example showing a Hello World message using Sera.js.
<h3>📄 App.jsx</h3>
<pre><code class="language-jsx">import { h } from &quot;serajs&quot;;

export default function App() {
 return (
 &lt;h1&gt;Hello world&lt;/h1&gt;
 );
}
</code></pre>
<h2>No Build, No Dependencies</h2>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Sera js 😎&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script type=&quot;module&quot;&gt;
 import { h, setSignal, setEffect } from &quot;//unpkg.com/serajs&quot;;

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

 setEffect(() =&gt; {
 console.log(count());
 });

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

 const root = document.body;
 root.appendChild(Hello());
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

Improve by 1% every day! 🚀 Share development resources effortlessly—post, comment, and upvote to contribute and support fellow developers. 🙌 Reminder: Promotional content is not allowed. ⚠️

Dev Area 

SeraJS is a minimalistic, signal-based reactive JavaScript library for dynamic user interfaces, weighing just 1.25KB gzipped. It combines strengths from React, Solid, and Lit, focusing on performance and developer experience. Using signals, effects, and memos, SeraJS efficiently updates only the necessary DOM elements, offering high performance with a simple integration process.

A 1KB Frontend Library in Just 135 Lines

I love micro frameworks. They become important now that devs build more and more Web Components.
One of them is htm-ally, which is also a zero-build micro framework with DX similar to React and tagged templates like Lit. It uses Shadow DOM under the hood <a href="https://github.com/zheksoon/htm-ally" target="_blank" rel="noopener nofollow">https://github.com/zheksoon/htm-ally</a>
Sera seems to also have a similiar philosophy

I don’t think ReactJS developers will move from React anytime soon there needs to be a groundbreaking framework to do this

Hi,
I really like what you’re building, it’s super clean and smart. I’ve tried a few times to follow a similar approach with signals, and I ran into a couple of challenges:
<ul>
<li>Handling multiple children in the DOM was always tricky for me. I find solution pretty clever, but i think some memory leaks could happen when we start using conditional displaying, as no cleanup exists.</li>
<li>Simple signal systems tend to hit limits pretty fast without cleanup or context support, it gets hard to build real-world apps or libraries.</li>
</ul>
I feel like your library could be an awesome base for creating small, highly optimized libraries that plug into bigger apps
Also, it could be interesting to write a tiny JSX transformer that keeps reactivity:
<ul>
<li>Props could compile into getters,</li>
<li>Spread could use a proxy like SolidJS,</li>
<li>JSX expressions default to functions.</li>
</ul>
I think if you expanded your library just a little, making it a little heavier, adding the core ideas you need in a complete signal system, without losing the minimalistic spirit, it could be super practical for real-world projects.
Maybe even a plugin to bind your signals as React states could be cool? Like for fine-grained components (maps and such), using the @jsx pragma.
Great work, loved to read your code