almostnojs

AlmostNo.js

AlmostNo.js is a lightweight, zero-dependency JavaScript framework featuring tagged template rendering, DOM morphing, custom elements, reactive state management, chainable DOM manipulation, event handling, animations, and HTTP requests.

Features

• Tagged Template Rendering – Lit-style html tagged templates with surgical DOM updates.
• DOM Morphing – Reconcile live DOM against new HTML without destroying state.
• Custom Elements – Reactive AnJSElement base class with batched updates and computed properties.
• Tiny & Fast – 5 KB core, 6 KB extended, 12 KB full (minified + gzipped). Zero dependencies.
• Chainable API – Familiar $().method() syntax for clean, readable code.
• DOM Manipulation – Select, traverse, and modify elements effortlessly.
• Events & Event Bus – Attach, delegate, trigger events; cross-component communication.
• Reactive State – Proxy-based state with onChange, onAny, patch, and DOM bindings.
• Components – SSR-compatible server/client components with auto-mounting.
• HTTP Requests – Fetch wrappers with timeout handling and abort controllers.
• Animations – Simple CSS-based transitions.
• Utilities – Debounce, throttle, type checks, JSON parsing, and more.

Examples

See AlmostNo.js Live Examples in action.

• Animations
• Attributes
• Components
• Core Features
• DOM Manipulation
• Elements
• Events
• Filtering & Traversal
• HTTP Requests
• State Management
• Utilities

Browser Support

AlmostNo.js targets ES2020 and works on all modern browsers (Chrome, Firefox, Edge, Safari, Opera).

Installation

NPM

npm install almostnojs

import $, { html, render, morph, AnJSElement, registerComponent } from 'almostnojs';

CDN

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/almostnojs@latest/dist/cdn/almostno.full.js"></script>

<!-- UNPKG -->
<script src="https://unpkg.com/almostnojs@latest/dist/cdn/almostno.full.js"></script>

Self-hosting

Download the latest release from dist/browser/ and include it directly:

<script src="./almostno.full.js"></script>

Choosing the Right Version

Three prebuilt bundles are available, plus NPM with tree-shaking.

Feature Comparison

Feature	Core	Extended	Full	NPM
DOM Manipulation	✅	✅	✅	✅
Events & Event Bus	✅	✅	✅	✅
Attributes	✅	✅	✅	✅
HTTP Requests	✅	✅	✅	✅
Animations	❌	✅	✅	✅
Filtering & Traversal	❌	✅	✅	✅
State Management	❌	❌	✅	✅
Components	❌	❌	✅	✅
Template Parts	❌	❌	❌	✅
DOM Morphing	❌	❌	❌	✅
Custom Elements	❌	❌	❌	✅

Bundle Sizes (minified + gzipped)

Version	Size	Path
Core	~5 KB	dist/browser/almostno.js
Extended	~6 KB	dist/browser/almostno.extended.js
Full	~12 KB	dist/browser/almostno.full.js

Quick Start

Template Parts (Tagged Templates)

Render reactive templates with surgical DOM updates — only changed values are patched.

import { html, render } from 'almostnojs';

const app = document.getElementById('app');

function view(name) {
    render(html`<h1>Hello, ${name}!</h1>`, app);
}

view('World');  // First render: creates DOM
view('AnJS');   // Update: patches only the text node

Attributes

render(html`<div class="card ${active ? 'active' : ''}">
    <button disabled=${!ready}>Submit</button>
</div>`, container);

Lists

const items = ['Apple', 'Banana', 'Cherry'];
render(html`<ul>${items.map(i => html`<li>${i}</li>`)}</ul>`, container);

Unsafe HTML

import { html, unsafeHTML, render } from 'almostnojs';

render(html`<div>${unsafeHTML('<em>trusted markup</em>')}</div>`, container);

DOM Morphing

Reconcile live DOM against new HTML without destroying state, focus, or event listeners.

import { morph } from 'almostnojs';

morph(document.getElementById('app'), '<div class="updated">New content</div>');

Custom Elements

Build reactive web components with AnJSElement.

import { AnJSElement, html, registerComponent } from 'almostnojs';

class MyCounter extends AnJSElement {
    init() {
        this.state.count = 0;
    }

    render() {
        return html`
            <button @click=${() => this.state.count++}>
                Clicked ${this.state.count} times
            </button>`;
    }
}

registerComponent('my-counter', MyCounter);

<my-counter></my-counter>

Features: reactive state proxy, batched microtask updates, computed properties, observedAttributes reflection, init() / updated() / destroy() lifecycle hooks, auto-cleanup with this.own(), updateComplete promise, repeat() keyed lists.

Keyed Lists with repeat()

import { AnJSElement, html, repeat, registerComponent } from 'almostnojs';

class TodoList extends AnJSElement {
    init() {
        this.state.items = [
            { id: 1, text: 'Learn AnJS' },
            { id: 2, text: 'Build something' },
        ];
    }

    render() {
        return html`<ul>${repeat(
            this.state.items,
            item => item.id,
            item => html`<li>${item.text}</li>`
        )}</ul>`;
    }
}

registerComponent('todo-list', TodoList);

Auto-Cleanup

class LiveWidget extends AnJSElement {
    init() {
        // Automatically unsubscribed when element disconnects
        this.own($.listen('data:update', (data) => {
            this.state.value = data;
        }));
    }
    render() { return html`<span>${this.state.value}</span>`; }
}

Awaiting Updates

const el = document.querySelector('my-counter');
el.state.count = 42;
await el.updateComplete;
// DOM is now updated

DOM Manipulation

$('div').text('Hello, World!');
$('#box').css('color', 'red').class('highlight');

Events

$('#btn').on('click', () => alert('Clicked!'));
$.emit('app:ready', { ts: Date.now() });
$.listen('app:ready', data => console.log(data));

State Management

const state = $('#app').state({ count: 0 });
$('#increment').on('click', () => state.count++);
$('#display').bind(state);

<div id="app">
    <span id="display" data-bind="count"></span>
    <button id="increment">+1</button>
</div>

Components

$.component("Card",
    ({ state, props }) => `
        <div class="card">
            <h3>${props.title}</h3>
            <p>Likes: <span data-bind-this="likes"></span></p>
            <button data-action="like">Like</button>
        </div>`,
    () => $.state({ likes: 0, like() { this.likes++ } })
);

<Card title="Hello"></Card>

HTTP Requests

$.get('/api/data').then(console.log);
$.post('/api/submit', { name: 'Jane' });
$.get('/api/slow', { timeout: 3000 });

API Reference

Template Parts

Function	Description
html`...`	Tagged template literal — returns a TemplateResult
render(result, container)	Render a TemplateResult into a DOM element
clearTemplate(container)	Clear cached template data for a container
unsafeHTML(string)	Mark a string as trusted HTML (bypasses escaping)

DOM Morphing

Function	Description
morph(target, newHTML)	Reconcile live DOM to match new HTML string

Custom Elements

Export	Description
AnJSElement	Base class for reactive custom elements
registerComponent(name, cls)	Register a custom element (idempotent)
repeat(items, keyFn, templateFn)	Keyed list helper for efficient DOM reconciliation

AnJSElement Instance API

Member	Description
state	Reactive proxy — property writes trigger batched updates
computed(name, deps, fn)	Define a computed property
render()	Return html`...` or a string — called on every update
update()	Force a synchronous DOM update
own(disposerFn)	Register a cleanup function — called automatically on disconnect
updateComplete	Promise that resolves after the current render cycle
static updateStrategy	'microtask' (default) or 'raf' for frame-coalesced updates
init()	Lifecycle hook — called once after first render
updated()	Lifecycle hook — called after every render
destroy()	Lifecycle hook — called on disconnect before auto-cleanup

Core

• $(selector) – Select elements.
• $.extend(name, func, force) – Extend AlmostNo.js.

Iteration

• .each(fn) – Iterate over matched elements.
• .get(index) – Get an element by index.
• .clone(deep) – Clone an element.

DOM Manipulation

• .content(value, html) – Get/set text or HTML content.
• .text(value) – Get/set text content.
• .html(value) – Get/set HTML content.
• .css(prop, value) – Get/set CSS styles.
• .class(name, add) – Add, remove, or toggle classes.
• .display(show) – Show or hide elements.
• .hide() / .show() – Convenience hide/show.
• .remove() – Remove elements from the DOM.
• .empty() – Remove all child elements.
• .insert(content, position) – Insert elements at a position.
• .append(content) / .prepend(content) – Insert content at start/end.
• .before(content) / .after(content) – Insert adjacent content.
• .prop(name, value) – Get/set DOM properties.
• .val(value) – Get/set form element values.
• .focus() / .blur() – Focus and blur.

Attributes

• .id(value) – Get/set the id attribute.
• .attr(name, value) – Get/set attributes.
• .removeAttr(name) – Remove an attribute.
• .serialize() – Serialize a form.

Events

• .on(event, selector?, handler) – Attach event listeners (optional delegation).
• .off(event, selector?, handler) – Remove event listeners.
• .delegate(event, selector, handler) – Delegated event listener.
• .undelegate(event, selector, handler) – Remove delegated listener.
• .trigger(event) – Dispatch an event.

Event Bus

• $.emit(event, data) – Emit a global event.
• $.listen(event, handler) – Listen for a global event.
• $.forget(event, handler) – Remove a global event listener.

Traversal

• .next() / .prev() – Adjacent siblings.
• .parent() – Parent element.
• .children() – Direct children.
• .siblings() – All siblings.
• .closest(selector) – Closest matching ancestor.

Filtering

• .filter(callbackOrSelector) – Filter elements.
• .find(selector) – Find descendants.
• .first() / .last() – First or last element.
• .even() / .odd() – Even or odd indexed elements.
• .has(className) – Check for a class.

Animations

• .animate(styles, duration, easing) – Animate CSS properties.
• .fade(opacity, duration) – Fade to a specific opacity.
• .fadeIn(duration) / .fadeOut(duration) – Fade in/out.

State Management

• .state(initialState) – Create a reactive state proxy.
• .bind(state, context) – Bind state to DOM via data-bind.
• .unbind(state) – Remove bindings.
• $.global(name, initial) – Create or retrieve global state.
• $.hasGlobal(name) – Check if a global state exists.
• $.clearGlobal(name) – Remove a global state.

HTTP Requests

• $.get(url, options) – GET request.
• $.post(url, data, options) – POST request.
• $.put(url, data, options) – PUT request.
• $.delete(url, options) – DELETE request.
• $.patch(url, data, options) – PATCH request.
• $.head(url, options) – HEAD request.
• $.options(url, options) – OPTIONS request.
• $.abortController() – Create an AbortController.

Utilities

• $.json(string) – Safe JSON parse (returns null on failure).
• $.trim(string) – Trim whitespace.
• $.range(x, min, max) – Check if a number is within range.
• $.isFunction(v) / $.isObject(v) / $.isString(v) / $.isNumber(v) – Type checks.
• $.contains(parent, child) – Check DOM containment.
• $.debounce(fn, delay) – Debounced function.
• $.throttle(fn, limit) – Throttled function.
• $.element(tag, attrs, children) – Create an element.

Event Aliases

• .click(cb) / .change(cb) / .submit(cb) / .keydown(cb) / .keyup(cb) / .mouseover(cb) / .mouseout(cb) – Event shortcuts.

Why AlmostNo.js?

• Modern & Minimal – No legacy baggage. ES2020 modules with tree-shaking.
• Tagged Templates – Lit-inspired rendering without a build step.
• DOM Morphing – Efficient reconciliation without virtual DOM overhead.
• Custom Elements – First-class web component support.
• Reactive State – Proxy-based reactivity with automatic DOM updates.
• Easy to Learn – Familiar jQuery-style API with modern capabilities.
• Fast & Lightweight – 5–12 KB gzipped depending on bundle.
• Extensible – Add custom methods, components, and global state.

License

This project is licensed under the MIT License — see the LICENSE file for details.