DEV Community

Cover image for AarambhJS - from hello world to big apps - effortlessly
Prasoon Jadon
Prasoon Jadon

Posted on

AarambhJS - from hello world to big apps - effortlessly

#javascript #beginners #webdev #programming

Introducing AarambhJS — Exported as SnapUI: A Beginner-Friendly JavaScript UI Library

SnapUI Logo

Frontend development can be overwhelming when starting with modern JavaScript frameworks. To make it easier, I created AarambhJS, a lightweight UI library designed for beginners and quick app development.

To keep things simple in code, the library exports under the global name SnapUI — so when you include it, you interact with SnapUI in your JavaScript.

What Is AarambhJS / SnapUI?

  • AarambhJS is the npm and repo name, symbolizing a "beginning" in Sanskrit.
  • SnapUI is the runtime global export name for a crisp, memorable API.

Together, they represent a modern UI library that’s:

  • Lightweight with zero dependencies
  • Built on Virtual DOM rendering
  • Supports JSX-like syntax and components
  • Includes easy client-side routing
  • Ready to use via CDN or npm

Quick Start with SnapUI

Include AarambhJS via CDN and use it as SnapUI:

<script src="https://cdn.jsdelivr.net/gh/pjdeveloper896/AarambhJS/dist/Index.js"></script>
Enter fullscreen mode Exit fullscreen mode

Then in JavaScript:

const { createElement, render } = SnapUI;

const title = createElement('h1', null, 'Hello from SnapUI!');
document.body.appendChild(render(title));
Enter fullscreen mode Exit fullscreen mode

Even though the package is AarambhJS, the usage in code is through SnapUI, which is more intuitive and easy to remember.

Example: Interactive Component with SnapUI 

function ButtonComponent() {
  return createElement(
    'button',
    { onClick: () => alert('Clicked!') },
    'Click Me'
  );
}

document.getElementById('root').appendChild(render(ButtonComponent()));
Enter fullscreen mode Exit fullscreen mode

Client-Side Routing Made Simple 

const routes = {
  '/': () => createElement('div', null, 'Home Page'),
  '/about': () => createElement('div', null, 'About SnapUI'),
};

const router = createRouter(routes, 'root');
Enter fullscreen mode Exit fullscreen mode

Why This Naming?

Choosing AarambhJS as the package name honors the idea of beginnings and new starts, while SnapUI as the export name focuses on the quick and snappy user interface development experience.

Get Started Now

Final Words

I hope AarambhJS (SnapUI) helps beginners and pros alike build beautiful interfaces with minimal fuss. Feel free to try it out and share your projects!

Happy coding!
— pjdeveloper896

Top comments (4)

Collapse
 
dotallio profile image
Dotallio •

Love the split naming - honoring roots and making usage snappy is a clever touch. Really appreciate the zero dependencies, makes it way more approachable than most UI libraries I've tried. Any plans to support TypeScript out of the box?

Collapse
 
pjdeveloper896 profile image
Prasoon Jadon •

Hii Dotallio
Thanks for the appreciation. Making tech simpler is my aim because being a newbie I too struggled a lot and I am glad you liked my framework.
And thanks for your suggestion regarding Typescript, i will definitely work on it and update.

Collapse
 
nevodavid profile image
Nevo David •

pretty cool seeing someone focus on making things way simpler for newbies - you think the best tech stays simple or does it always get super messy as it grows?

Collapse
 
pjdeveloper896 profile image
Prasoon Jadon •

Hii Nevo
You are right as being a newbie myself, I can relate to every word of yours. Yes, tech should be simpler and understandable for every one and I will try my best to never make it messy but will incorporate unique feature in them.