Umbrella JS: a jQuery-shaped DOM library that got out of the way
:umbrella: Lightweight javascript library for DOM manipulation and events
At a glance
- What is it?
- Three kilobytes, zero dependencies, a jQuery-compatible surface for traversal, editing and events, and a 2.0 to 3.0 migration that deleted its own AJAX layer rather than keep it.
- Who is it for?
- Umbrella JS is a good answer to a narrow and increasingly common question: you have inherited a page full of jQuery-style calls and you want them smaller without rewriting them. It gets that right, and the migration guide plus `umbrella.d.ts` mean adopting it is closer to a find and replace than a project.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 70 days ago.
- What is it written in?
- Mainly JavaScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on October 11, 2026, and from our analysis. They are not legal advice.
Editorial analysis
The premise is you might not need jQuery at all
The README states the project's origin as a question rather than a manifesto: born from you might not need jQuery, then what do you need. The answer it commits to is a lightweight, modern, performant library for the three things pages actually needed from jQuery in practice, and it names them as a short list. DOM traversal for selector, filter, find and each. DOM editing for classes, attributes, html and before. Event handling.
That scope is the whole design. You can tell because the call surface stays jQuery-shaped: the README's examples use `u(...)` where jQuery uses `$`, and the same method names, so migrating is mostly a find and replace. The library even links a dedicated guide, `jquery.md`, for migrating from jQuery, plus `migrate-2-to-3.md` for the version jump.
Size is the metric the README leads with. It calls itself a 3kb library in the opening line, the badge row advertises a gzip size, and the package description repeats the claim. Version 3.0's release notes are explicit that removing the AJAX functions took it from 3.5kb to 2.5kb, roughly a 30% cut, and the author framed that as small enough to embed anywhere. Dependencies are zero, which the badge states and `package.json` confirms: the dev dependency list starts at Grunt and nothing appears in the runtime require graph.
The two examples that define the intended use
The README offers exactly two snippets, and they are worth reading as a design brief rather than a demo.
// Simple events like jQuery
u("button").on('click', e => {
alert("Hello world");
});Event binding is the first-class case, not an afterthought. The second example is more telling because it handles a form submission without any of the network layer the library used to have.
u('form.login').handle('submit', async e => {
const user = await fetch('/login', {
method: 'POST', body: new FormData(e.target)
}).then(res => res.json());
window.href = '/user/' + user.id;
});FormData, fetch and async await are all native, and `handle()` is the submit-specific helper. Note that this example still redirects with `window.href` rather than anything clever. The library is not trying to be an application framework; it is trying to be the layer that lets you stop shipping jQuery, and the example stops at exactly the point where you would reach for a router.
For a fuller picture of the API, `docs/` holds the documentation sources, `umbrella.d.ts` holds the TypeScript declarations, and `umbrella.js`, `umbrella.min.js` and `umbrella.esm.js` are the three builds that ship.
Five ways to install, one of them still on npm
The getting-started section is thorough in a way that small libraries often are not. There is a JSFiddle for trying it without installing, a jsDelivr script tag for a CDN, an npm install, module bundler support and a direct download.
<script src="https://cdn.jsdelivr.net/npm/umbrellajs"></script>npm install umbrellajsThe module story has three separate answers, which covers almost every bundler arrangement. With Webpack or Browserify, `u` is exposed as CommonJS exports. With an ES module, `u` and `ajax` are exposed as ES module exports from `umbrellajs/umbrella.esm.js`. And there is a plain script tag pointing at `umbrella.min.js` for the no-build case.
One loose end worth noticing: the 3.0 release removed `ajax()` and `.ajax()`, yet the module documentation still describes `u` and `ajax` as ES module exports. The tree also still lists `migrate-2-to-3.md` at the root, so the migration story is documented rather than hidden. `package.json` pins the current version at 3.3.3 and declares `main` as `umbrella.min.js`, with `types` pointing at `umbrella.d.ts`.
What version 3.0 deleted, and why that was the right call
The single release in the repository's history is 3.0.0, published 2018-08-19, named for the size. It removed `ajax()` on the argument that the DOM `fetch()` API is almost the same and better, that polyfill libraries already cover older browsers, and that the method is pointless as a result. It also removed the `.ajax()` helper, described in the notes as something the author had never used and as strongly tied to the former.
That is a maintainer's judgement call stated plainly, and it is the kind of thing that separates a real library from a compatibility shim. Carrying a network layer that wraps a worse version of `fetch()` would have cost about a kilobyte forever to serve a fraction of users. The cost of the decision is visible too: the migration guide exists, and `.serialize()` survives only because it is a useful form helper independent of the AJAX code, with the README noting that multiple option selection in a `<select>` does not work with `.serialize()` under IE10 and below.
The repository is not archived, has zero open issues and 2347 stars, and the last push was on 2026-08-02. That combination says a small, stable, low-churn project: the code you read is the code that runs.
The browser support story, with its known bugs listed
Rather than claiming universal support, the README has a section titled Support: IE11+, and it is unusually candid. The reasoning is that usage of IE10 and below is under 1% for each version, so supporting it is not Umbrella's mission, but the seconds gained from faster loading on mobile might exceed that share. Then the line that earns trust: you should probably test it.
From there it enumerates known, wontfix bugs, which is more useful than a compatibility matrix. Calling `.before()`, `.after()`, `.append()` or `.prepend()` on a `table`, `tbody`, `thead` or `tr` element raises an invalid target element error in older browsers, because `insertAdjacentHTML` is not supported there. The class methods `.addClass()`, `.removeClass()`, `.hasClass()` and `.toggleClass()` fail where `classList` is unavailable, and the fix offered is `polyfill.js`, which sits in the repository root and ships in the package `files` list. `.serialize()` and therefore `.ajax()` have the multi-select limitation described earlier.
Two structural notes. `polyfill.js` is not an optional extra: it is listed in `package.json` `files` alongside the builds, so it is part of what npm publishes. And `Contributing.md` plus `Gruntfile.js` show the test setup is Grunt based, with `docs/tests.html` wired in as the browser test page in the documentation menu.
Where it sits against the alternatives it lists
The README names its competitors rather than pretending they do not exist: jQuery, Zepto, Bliss, NodeList, and a general reference to micro frameworks at microjs.com. Reading that list against its own positioning is instructive. Zepto is the closest sibling, a minimal jQuery alternative from the same era, and Umbrella's pitch is the same one. Bliss is a similarly small jQuery-compatible option. NodeList is a newer DOM library with a different philosophy.
The case for Umbrella over any of them is narrow and concrete: a jQuery-shaped API, no dependencies, TypeScript declarations shipped in the package, and a documented migration path from jQuery. The case against is equally concrete: it has not changed much since 2018, its documentation lives in a `docs/` directory of its own site at umbrellajs.com rather than in the README, and the feature set stops where jQuery's stopped being interesting.
For most projects in 2026 the honest comparison is not Umbrella versus jQuery but Umbrella versus writing the four or five DOM calls you actually need. Where Umbrella wins is when the calls are already written in jQuery shape and inherited from somewhere else. That is a real scenario, it is the one this library was built for, and it is exactly as valuable as it sounds.
Editorial conclusion
Umbrella JS is a good answer to a narrow and increasingly common question: you have inherited a page full of jQuery-style calls and you want them smaller without rewriting them. It gets that right, and the migration guide plus `umbrella.d.ts` mean adopting it is closer to a find and replace than a project. What it is not is a general purpose framework, and the 3.0 release makes that explicit by removing `ajax()` and `.ajax()` outright rather than deprecating them, since `fetch()` already does the job better. The honest ceiling is the documented one: IE10 and older have known bugs in `.before()`, `.append()`, `.hasClass()` and `.serialize()`, and `polyfill.js` covers part of that gap. At version 3.3.3 with zero open issues and a last push on 2026-08-02, this is a maintained, small, opinionated library, not an abandoned experiment.
Frequently asked questions
Is Umbrella JS a drop-in replacement for jQuery?
For traversal, editing and events, largely yes. The API is deliberately jQuery-shaped with `u` in place of `$` and the same method names, and the repository ships a migrating from jQuery guide. It is not a full replacement: version 3.0 removed the AJAX layer, since `fetch()` does that job, so `.ajax()` and `serialize()` in AJAX contexts are gone.
How small is Umbrella JS and does it have dependencies?
The README advertises it as under 3kb and zero dependencies. The 3.0 release notes give the more precise figure, saying removing the AJAX functions took it from 3.5kb to 2.5kb, about a 30% reduction. `package.json` lists nothing in the runtime require graph; the only dependencies are Grunt and friends in devDependencies for the build and tests.
Does Umbrella JS work with ES modules and bundlers?
Yes, and the repository ships three builds for it: `umbrella.min.js` as the package main, `umbrella.esm.js` for ES module consumers, and a plain script tag path. With Webpack or Browserify, `u` is exposed as CommonJS exports, and with an ES module both `u` and `ajax` are described as ES module exports. TypeScript declarations are included via `umbrella.d.ts`.
What is broken about Umbrella JS on Internet Explorer?
The README targets IE11 and lists known, wontfix bugs below it. Calling `.before()`, `.after()`, `.append()` or `.prepend()` on `table`, `tbody`, `thead` or `tr` fails without `insertAdjacentHTML`, and the class methods `.addClass()`, `.removeClass()`, `.hasClass()` and `.toggleClass()` need `polyfill.js`. `.serialize()` also misbehaves with multiple `<select>` options under IE10.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/franciscop-umbrella)