Imbue logo

Version 1.0.12

Download & CDN


NPM: npm i @ghosts/imbue-js

Imbue is loaded on this page, feel free to explore the methods in the developer console.


Imbue was designed to replace some of the core features of jQuery, and provide a limited set of useful shortcuts and extensions on top of the standard NodeList, HTMLElement, HTMLDocument, and Array prototypes.

Some useful notes about Imbue:

The main focus of Imbue is to augment standard JavaScript to make it easier to use in regards to DOM manipulation, and provide added functions as shorthands for standard calls. One easy example that illustrates this is the call for document.whenReady(), similar to $( document ).ready(). If you mainly use jQuery for selectors, setting styles, and some helper functions, Imbue can replace it with a much smaller footprint and faster runtimes. An added benefit is that Imbue is closer to native JavaScript than jQuery, meaning less to learn. For instance, document.getElement() in Imbue is very similar to document.getElementById() in native JavaScript. All Imbue functions are added to element objects, original JavaScript methods are preserved for the DOM and can be used interchangeably and alongside the added Imbue methods.

NOTE: this is a work in progress at the moment, contibutions appreciated!

Methods & Properties


document.getElement("p") // returns first p elements

document.getElements("p") // returns all p elements

document.getElement("p", context) // optionally provide context (default is document)

document.whenReady(function() { // code here }); // ran when document is ready

document.whenReady(() => { // code here });


Using "element" as example (usually something retrieved from an above "get" function)

element.whenVisible(() => alert("Now Visible!")) // Provided callback runs once each time the element is visible.

element.whenHidden(() => alert("Now Hidden!"))// Provided callback runs once each time the element is hidden.

element.onHover(() => alert("Being Hovered!")) // Provided callback runs once each time the element is visible.

element.onClick(() => alert("Just Clicked!")) // Provided callback runs once each time the element is visible.

element.onEvent("eventName", () => alert("Event happened!")) // Generic for any event needed


element.setClassList("this will be the class list")


element.hasClass("nightMode") // returns true or false


element.setStyles({"background-color" : "red"})

element.removeStyles(["background-color", "color"])


element.getWidth() // Retruns computed width of element

element.getParent() // same as parentNode

element.getSiblings() // retrieve array of sibling nodes

element.getChildren() // same as childNodes

element.getSelectedNode() // retrieves first selected checkbox/selected element

element.getSelectedNodes() // retrieves all selected checkbox/selected elements

element.getData("id") // gives value of data-id attribute

element.removeData("id") // removes data-id attribute

element.setData("id", 5) // sets data-id=5

element.hideElement() // hide element

element.showElement() // show element


Better documentation on this coming soon. For the most part, NodeList calls are the same as HTMLElement but with a plural form.


AJAX({ type: "", url: "/", success: function() {}, error: function() {}, contentType: "", dataType: "", data: data });// contentType, dataType, and type will all default to GET & JSON