The jQuery for the Modern Web Platform.
Slim · Modular · Reactive · Secure · Zero-build
A TypeScript-first library that combines jQuery's beloved DOM workflow with modern features like signals, Web Components, motion utilities, and SPA routing — without a mandatory build step.
| Repository | Description | Links |
|---|---|---|
| bQuery | Core library — DOM manipulation, reactivity, components, motion, routing, and more | Docs · npm |
| ui | UI component showcase built with bQuery | Live Demo |
- 🌳 Tree-shakeable — import only what you need
- 🔷 TypeScript-first — full types and strong IDE support
- 📦 Modular — core stays small, extras are opt-in
- 🔒 Security-focused — DOM writes are sanitized by default; Trusted Types supported
- ⚡ Zero-build — works straight from a CDN with ES Modules
@bquery/bquery
├── core/ ~11.3 KB ─ Selectors, DOM manipulation, events, utilities
├── reactive/ ~0.3 KB ─ Signals, computed, effects
├── component/ ~1.9 KB ─ Lightweight Web Components with props
├── motion/ ~4.0 KB ─ View transitions, FLIP, springs, timelines
├── security/ ─ Sanitizer, CSP, Trusted Types
├── platform/ ─ Storage, cache, notifications
├── router/ ~2.2 KB ─ SPA routing, navigation guards
├── store/ ─ State management, persistence
└── view/ ─ Declarative DOM bindings (bq-text, bq-for, bq-if…)
npm install @bquery/bquery<script type="module">
import { $, signal } from 'https://unpkg.com/@bquery/bquery@1/dist/full.es.mjs';
const count = signal(0);
$('#counter').text(`Count: ${count.value}`);
</script>import { $, $$ } from '@bquery/bquery/core';
// jQuery-style selectors & chaining
$('#box')
.addClass('active')
.css({ opacity: '0.8' })
.attr('data-state', 'ready');
// Event delegation for dynamic content
$('#list').delegate('click', '.item', (event, target) => {
console.log('Clicked:', target.textContent);
});import { signal, computed, effect } from '@bquery/bquery/reactive';
const count = signal(0);
const doubled = computed(() => count.value * 2);
effect(() => console.log(`Count: ${count.value}, Doubled: ${doubled.value}`));
count.value++; // → "Count: 1, Doubled: 2"import { component } from '@bquery/bquery/component';
component('user-card', {
props: {
username: { type: String, required: true },
},
render({ username }) {
return `<div class="card"><h2>${username}</h2></div>`;
},
});<p bq-text="count"></p>
<button bq-on:click="increment">+1</button>
<ul>
<li bq-for="item in items" bq-text="item"></li>
</ul>
<input bq-model="count" type="number" />
<div bq-if="count > 5">Count is high!</div>import { mount } from '@bquery/bquery/view';
import { signal } from '@bquery/bquery/reactive';
const count = signal(0);
const items = signal(['Apple', 'Banana', 'Cherry']);
mount('#app', {
count,
items,
increment: () => count.value++,
});| Browser | Version | Support |
|---|---|---|
| Chrome | 90+ | ✅ Full |
| Firefox | 90+ | ✅ Full |
| Safari | 15+ | ✅ Full |
| Edge | 90+ | ✅ Full |
We welcome contributions! Check out the individual repos for guidelines:
All projects in this organization are licensed under the MIT License.