How I Accidentally Came Up With a Reactive JS UI Library

Okay okay — I get it. Please don’t roll your eyes 🙏
Yes, I built yet another JavaScript UI library. I know it seems like every day there’s a new one popping up — Svelte, Solid, Alpine, HTMX… and now, VaneJS.

But hear me out — this wasn’t the plan.

…


This content originally appeared on DEV Community and was authored by abtahi-tajwar

Okay okay — I get it. Please don’t roll your eyes 🙏

Yes, I built yet another JavaScript UI library. I know it seems like every day there’s a new one popping up — Svelte, Solid, Alpine, HTMX… and now, VaneJS.

But hear me out — this wasn’t the plan.

🚧 The Accidental Start

It all began with a basic personal project. I was building my portfolio site using a raw HTML/CSS template. My goal was simple: load content from a JSON file dynamically — no fuss.

Naturally, I thought of using Svelte. It has that clean, HTML-like syntax and is pretty powerful. But it didn’t feel worth the migration headache just for a small site. So I fell back to vanilla JS.

Now here’s the problem: I kept spamming document.querySelector, innerHTML, and manual state updates just to reflect data. Tedious. So I thought:

"Why not just write a simple templating engine?"

I just wanted to dump data into the HTML cleanly. But... it spiraled. 😅

Before I knew it, I had:

  • Reactive state management
  • Loops and conditional rendering
  • Store syncing between pages
  • Event bindings with inline params
  • And yes, even an API call example

Then I thought: "Okay, this is officially something."

I picked a name — VaneJS — in like 10 seconds.

👉 Check the documentation

✨ Very Basic Usage

Here’s the hello world of VaneJS. No CLI, no build step, no npm — just plug and play.

<!-- index.html -->
<script type="module" src="vanjejs.module.js"></script>

<h1 data-vn-bind="user.name">Hello</h1>

<script type="module">
  import { $setState } from './vanjejs.module.js';

  $setState("user", { name: "Abtahi" });
</script>

Want to add loops?

<ul data-vn-repeat="user.skills as skill">
  <li data-vn-ritem="{skill}.label"></li>
</ul>

Update with:

$setState("user", {
  name: "Abtahi",
  skills: [{ label: "JS" }, { label: "C++" }]
});

And conditionally render blocks:

<div data-vn-if="{theme} === 'dark'">Dark Mode</div>
<div data-vn-else>Light Mode</div>

🧠 What Makes VaneJS Different?

  • ✅ Zero Build Step: Just add a single static .js file to your project. No bundlers, no compilers.
  • ✅ Backend Friendly: Works out-of-the-box with PHP, Laravel, Django, Express, ASP.NET — whatever you want.
  • ✅ No Paradigm Shift: Feels like HTML, behaves like a reactive system.
  • ✅ Minimal Mental Overhead: You don’t need to “learn a framework.” If you know HTML and JS, you’re good.
  • ✅ Reactive Stores Between Pages: Yes, you can store values and retrieve them across HTML pages. 
<!-- about.html -->
<p data-vn-bind="mystore.name"></p>

// main.js
$setStore("mystore", { name: "SharedValue" });
  • ✅ Smart Inline Events: Attach multiple events inline: 
<button data-vn-on="click:myFunc({user.name}); mouseover:logHover()">Click me</button>

$event("myFunc", ({ params }) => console.log(params[0]));
$event("logHover", () => console.log("hovered!"));

🚀 What’s Next

I’m actively building more around the zero-config, zero-setup philosophy:

  • 🔨 Templating System: You’ll be able to define reusable templates without any build tools. Like: 
export default () => \`
  <h1>Hello</h1>
  <p data-vn-bind="user.bio"></p>
\`

  • 🧠 Language Server (LSP): I’m planning to write an LSP for VaneJS so your editor can offer intellisense, diagnostics, and autocompletion just like in React or Svelte.

  • 🌱 Plugin System (planned): Think mini-addons for things like forms, routers, or animation — optional and simple.

👋 Final Thoughts

I didn’t set out to build a JavaScript UI library. I was just trying to get my site done faster. But sometimes, the shortcuts become the road.

If you’re a fullstack dev, or even a backend-first developer who hates writing repetitive DOM updates — try VaneJS. It might just save you a few headaches.

🔗 Docs: vanejs.netlify.app

📦 Demo / GitHub: https://github.com/abtahi-tajwar/vanejs


This content originally appeared on DEV Community and was authored by abtahi-tajwar


Print Share Comment Cite Upload Translate Updates
APA

abtahi-tajwar | Sciencx (2025-06-15T01:03:34+00:00) How I Accidentally Came Up With a Reactive JS UI Library. Retrieved from https://www.scien.cx/2025/06/15/how-i-accidentally-came-up-with-a-reactive-js-ui-library/

MLA
" » How I Accidentally Came Up With a Reactive JS UI Library." abtahi-tajwar | Sciencx - Sunday June 15, 2025, https://www.scien.cx/2025/06/15/how-i-accidentally-came-up-with-a-reactive-js-ui-library/
HARVARD
abtahi-tajwar | Sciencx Sunday June 15, 2025 » How I Accidentally Came Up With a Reactive JS UI Library., viewed ,<https://www.scien.cx/2025/06/15/how-i-accidentally-came-up-with-a-reactive-js-ui-library/>
VANCOUVER
abtahi-tajwar | Sciencx - » How I Accidentally Came Up With a Reactive JS UI Library. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/06/15/how-i-accidentally-came-up-with-a-reactive-js-ui-library/
CHICAGO
" » How I Accidentally Came Up With a Reactive JS UI Library." abtahi-tajwar | Sciencx - Accessed . https://www.scien.cx/2025/06/15/how-i-accidentally-came-up-with-a-reactive-js-ui-library/
IEEE
" » How I Accidentally Came Up With a Reactive JS UI Library." abtahi-tajwar | Sciencx [Online]. Available: https://www.scien.cx/2025/06/15/how-i-accidentally-came-up-with-a-reactive-js-ui-library/. [Accessed: ]
rf:citation
» How I Accidentally Came Up With a Reactive JS UI Library | abtahi-tajwar | Sciencx | https://www.scien.cx/2025/06/15/how-i-accidentally-came-up-with-a-reactive-js-ui-library/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts