██FR█████ █INTELL███████████

Aarambh.js v1.5.0 Released — The Lightweight UI Engine Gets Stronger


This content originally appeared on DEV Community and was authored by Prasoon

🚀 Aarambh.js v1.5.0 Released — The Lightweight UI Engine Gets Stronger

A fast, JSX-style virtual DOM framework now updated with lifecycle hooks, better routing, and Spider.css 2.2.0 utility styling. Loved by developers and available on npm.

logo

🌟 What’s New in Aarambh.js v1.5.0

  • ✅ Virtual DOM engine with JSX-style createElement
  • ✅ Lifecycle hooks: onMount, onUnmount, ref
  • ✅ Built-in SPA router with dynamic routes and params
  • ✅ Works with and without JSX
  • ✅ Now bundled with Spider.css v2.2.0 utility classes (library version only)

⚡ create-aarambh-app v1.6.0 — Instant Setup with Vite

The official CLI create-aarambh-app has been upgraded:

  • Uses Vite for blazing fast development
  • Pre-configured with Aarambh.js v1.5.0
  • Includes Spider.css v2.2.0 for clean UI without extra setup
  • No external configuration required to get started

To start building:

npx create-aarambh-app myapp
cd myapp
npm install
npm start

🕸️ Spider.css 2.2.0 – Utility-First Styling, No Bloat

The included CSS library is based on the Spider.css 2.0.0 toolkit — but stripped down into a pure utility-first version for faster loading and simpler usage.

Features:

  • Responsive grid (12 columns)
  • Flexbox and spacing utilities
  • Prebuilt button, card, and navbar styles
  • Mobile-first utility classes
  • No JavaScript required

Only the library version of Spider.css is used — focused, fast, and production-ready.

🔁 Component Example

Aarambh components are pure functions that return a tree of virtual elements.

function Counter() {
  let count = 0;
  let ref;

  return createElement("div", {},
    createElement("h2", {}, "Counter"),
    createElement("p", { ref: el => ref = el }, "Count: 0"),
    createElement("button", {
      className: "btn",
      onClick: () => {
        count++;
        ref.textContent = "Count: " + count;
      }
    }, "Increment")
  );
}

Supports ref and onClick out of the box — just like modern UI libraries.

📊 Used and Trusted

  • Published on npm
  • Adopted by many developers
  • CLI create-aarambh-app has seen real adoption
  • Praised for being beginner-friendly and framework-like without the weight of modern UI libraries

🛣 Upcoming Features

Feature Status
useState / signals 🔧 In Dev
CLI component generator 🛠️ Planned
Transitions/animations ✅ Beta
Spider.css Themes CLI 🔜 July
Live Docs + Playground 🧪 Testing

👨‍💻 Created by: Prasoon Jadon

Developer of Spider.css, Aarambh.js, and other open-source tools. Focused on making fast, minimal, and expressive tools for the web.

✅ Ready to Build?

Start with:

npx create-aarambh-app

A complete setup — from logic to UI — with no heavy dependencies. Just clarity, control, and performance.

Aarambh means “beginning” — and that’s what this ecosystem is.

A simple beginning. A powerful future. Built by devs, for devs.


This content originally appeared on DEV Community and was authored by Prasoon