DEV Community


Posted on • Updated on

Introducing YumJS

Alt Text


YumJS is a small reactive JavaScript library with JQuery like syntax that I have created for myself and released in the hope it will be useful to anyone who needs it.

[examples near bottom of post, gotta do the fluff first.]

Aside from having a familiar procedural syntax (and optional component syntax) it gives you the (optional) ability to make any element reactive and subscribable.

Why another JS library?

Why not?

No really, I started this project because:

  • I wanted it to be useful for others to learn from.
  • I wanted to see if it could be done.
  • I wanted it to be open source / open for iteration (if found to be useful).
  • I needed it for cutting down on repetitive tasks in my personal projects.

As mentioned above, Yum provides a familiar procedural and a component based syntax with low overhead and a slice of delicious reactivity when you need it.

Is this a substitute for React, Angular or Vue?

Probably not!

I make no claims about using YumJS in place of your favorite lib/framework (although maybe it could be).

However, If you are looking for something new and enjoy exploring what is possible with a library that provides a small code base maybe give YumJs a try.


  • Simple, easy to learn with familiar syntax.
  • Optional component (rendering) syntax with props and state.
  • A lightweight alternative to JQuery (not all JQuery functions implemented).
  • Tons of utility functions.
  • Ability to observe or subscribe to any element for complex reactivity.
  • Small, fast, lightweight and flexible.
  • Built in Drag and Drop/swipe.
  • Open source and extendable.
  • A build tool (node.js) for component based apps! Here and Here

Before I get into any examples let me point you to the docs and downloads...

Downloads and Docs

GitHub repo:

Feel free to download and try one of these minified versions:

Minified Download:

No Dragging Download:

Documentation - in progress:


Load in your web app like:
<script async src='' ></script>


Basic usage

You probably want to do stuff when the document is ready.


yum(document).ready( function(){

 // do your stuff here


Enter fullscreen mode Exit fullscreen mode

Querying the DOM and getting references to elements

// Assign a collection to variable for re-use, note the underscore.

const buttons = yum('.button')._; 

// Change the text of the entire collection.

yum(buttons).text('We are collected buttons.');

// The above prevents future DOM diving and re-use
// but same effect can be done with: 

yum('.buttons').text('We are collected buttons.');
Enter fullscreen mode Exit fullscreen mode

Make any element reactive

// get a reference to only the first h2 element

const h2 = yum('h2').first;
yum(h2).Reactor(); // set up the reactor

// a function for ReactTo

const runme = function(reactor){
console.log('H4 reacted ';

// Set All h4's to **react to**  h2 property 'a' with a subscriber name 'myName'

yum('h4').ReactTo(h2, 'myName', runme, 'a'); // "a" here can be any property you want

//later on H2.

h2.atom.a = "I am some data";

// After which all H4's will react and exec 'runme' 
// and change their text to "I am some data"
Enter fullscreen mode Exit fullscreen mode

Basic component syntax

const App = () => {

const html = `<h1>2</h1>`;

const h = yum(html).first;


yum(h).on('click', function() {  let num = yum(h).text(); num = Number(num) + 1 ; yum(h).text(num); console.log('num is '+num)} );

return h;

// Render the App to the body element (or wherever).
yum()._render(App, 'body', { pos: 'append' } );

Enter fullscreen mode Exit fullscreen mode

Components have built in Reactors. More about that here


Adding Event Listeners

// assumes runme function exists

yum('.button').addEvent('mousedown, touchstart', runme);

// on is an alias  for addEvent
// same as above but with on alias

yum('.button').on('mousedown, touchstart', runme);
Enter fullscreen mode Exit fullscreen mode

Creating custom events

// create a custom event and assign it to a variable

  const myEvt = yum()._createEvent('myEvt');

// Use addEvent to add a listener for the the custom event on .button class

yum('.button').addEvent( 'myEvt', function(e) { console.log('I am myEvt'), true });

// Finally trigger the event maybe on a timeout or whatever

setTimeout(t => {
}, 2000);
Enter fullscreen mode Exit fullscreen mode

More Usage Examples

There is a whole lot more stuff YumJS can do. See more examples at and the docs at

More to do

Trying to keep it short here so I didn't explain the component syntax in depth (have a look at the site or the code). Maybe I can cover it further in a future post.

The documentation still needs some work and while there are examples on the site, many more need to be created.

I'm sure there is plenty more to do but that is where you come in!

If you find YumJS interesting or useful let's make it better together. Again the GitHub repo is:

Let me know your thoughts...

*Thanks for taking the time to read! *

Top comments (4)

micahlt profile image
Micah Lindley

Nice! This looks like a much more Javascripty alternative to modern frameworks, and I admire your goals. Definitely will use it in the future!

bretgeek profile image

Hey thanks for taking the time to have a look. Let me know how it goes and if I can help out especially where some methods are not fully documented yet. BTW I like that word "Javascripty" :)

naijab profile image
Nattapon Pondongnok

Interesting! 🚀

bretgeek profile image