$$$$$$\ $$\ $$\
$$ __$$\ $$ | $$ |
$$ / \__| $$$$$$\ $$ | $$$$$$\ $$$$$$$\ $$$$$$\ $$\ $$$$$$$\
\$$$$$$\ $$ __$$\ $$ |$$ __$$\ $$ _____|\_$$ _| \__|$$ _____|
\____$$\ $$$$$$$$ |$$ |$$$$$$$$ |$$ / $$ | $$\ \$$$$$$\
$$\ $$ |$$ ____|$$ |$$ ____|$$ | $$ |$$\ $$ | \____$$\
\$$$$$$ |\$$$$$$$\ $$ |\$$$$$$$\ \$$$$$$$\ \$$$$ |$$\ $$ |$$$$$$$ |
\______/ \_______|\__| \_______| \_______| \____/ \__|$$ |\_______/
$$\ $$ |
\$$$$$$ |
\______/
Select.js is a lightweight toolkit for modern browser interfaces in
JavaScript. It started as faster alternative to the venerable jQuery,
with support for DOM/SVG manipulation (select/query.js), and then expanded
with a UI template library (select/ui.js) and supporting fine-grained reactive
state primitives (select/cells.js).
While select/query.js is fast, the select/ui.js library is not the fastest, but
it is fast enough and lightweight enough to be used in a wide range of
contexts, in particular when writing plugins or small UIs that need to be
embedded into others.
In that sense, Select is designed to fill the niche for little tools that can be composed and embedded. If you want to do a larger scale application, have a look at ui.js which offers high-performance and advanced features for complete web applications.
You can learn more about each component:
- Select.js: jQuery-like library ― manual
- Select UI: UI component library ― manual & reference
- Select Cells: Reactive state library ― manual & reference
- Select Utils/Interaction/Routing: Agnostic utility, interaction, and routing helpers ― manual & reference
<!DOCTYPE html>
<html><body>
<div id="app"></div>
<script type="importmap">
{
"imports": {
"@./": "./src/js/select/"
}
}
</script>
<script type="module">
import $ from "@./query.js"
import cell from "@./cells.js"
import ui from "@./ui.js"
const Counter = ui(`
<div>
<button on:click="dec">-</button>
<span out="count">0</span>
<button on:click="inc">+</button>
</div>
`).does({
count: (self, { count }) => count.value,
dec: (self, { count }) => count.set(count.value - 1),
inc: (self, { count }) => count.set(count.value + 1),
})
Counter.new().set({ count: cell(0) }).mount("#app")
$("#app").addClass("ready")
</script>
</body></html><script type="importmap">
{
"imports": {
"@select/": "https://cdn.jsdelivr.net/gh/sebastien/select.js@v0.7.1/src/js/select/"
}
}
</script>
<script type="module">
import $ from "@select/query.js"
import cell from "@select/cells.js"
import ui from "@select/ui.js"
</script>select(selector, scope?)($,S): DOM/SVG selection and manipulation API.cell(value?): mutable reactive cell.derived(template, processor?, initial?): derived reactive value.ui(selection, scope?): template component factory.webcomponent(name, componentFactory, initial?, options?): native custom element registration from Select UI or pure render functions.Dynamic(type, props?): dynamic component resolution by name/function.lazy(loader, placeholder?): lazy component loader.len,type,remap: shared utility helpers fromselect/ui.js.clsx,shortword,sorted,unique: shared helpers fromselect/utils.js.bind,drag,autoresize,Keyboard: interaction helpers fromselect/interaction.js.
docs/select.md:select.jscomplete reference (original README split).docs/ui.md:select/ui.jsusage and API guide.docs/cells.md:select/cells.jsusage and API guide.docs/utils.md:select/utils.js,select/interaction.js, andselect/routing.jsusage and API guide.docs/icons.md:select/icons.jsCDN icon loading and catalog usage.
examples/feature-webcomponent.html: custom elements withwebcomponent(...)for both Select UI templates and pure render functions.examples/feature-icons.html: icon usage with default CDN collections and local JSON catalog.
- DOM + SVG support: one selection API across HTML and SVG nodes.
- Fine-grained reactivity: explicit
cell/derivedprimitives. - Template-driven UI: declarative slot attributes with direct DOM updates.
- No build step required: works in modern browsers with native ESM.
- Small and fast: designed with explicit loops and low-overhead primitives.