$$$$$$\ $$\ $$\
$$ __$$\ $$ | $$ |
$$ / \__| $$$$$$\ $$ | $$$$$$\ $$$$$$$\ $$$$$$\ $$\ $$$$$$$\
\$$$$$$\ $$ __$$\ $$ |$$ __$$\ $$ _____|\_$$ _| \__|$$ _____|
\____$$\ $$$$$$$$ |$$ |$$$$$$$$ |$$ / $$ | $$\ \$$$$$$\
$$\ $$ |$$ ____|$$ |$$ ____|$$ | $$ |$$\ $$ | \____$$\
\$$$$$$ |\$$$$$$$\ $$ |\$$$$$$$\ \$$$$$$$\ \$$$$ |$$\ $$ |$$$$$$$ |
\______/ \_______|\__| \_______| \_______| \____/ \__|$$ |\_______/
$$\ $$ |
\$$$$$$ |
\______/
Select.js is a lightweight toolkit for modern browser interfaces in
JavaScript. It started as a small DOM/SVG selection library (select/query.js)
and now also includes template-driven UI (select/ui.js), fine-grained reactive
state (select/cells.js), browser-backed state (select/browser.js), routing
(select/routing.js), icons (select/icons.js), interaction helpers, and a
general utility bundle.
The aggregate entry point is select/index.js, which re-exports the companion
modules for projects that prefer a single import surface. The focused modules
remain available for direct imports.
While select/query.js is fast, the select/ui.js library is not the fastest,
but it is light enough for embedded UIs, plugins, and small tools. In the JSON
inspector benchmark, it is competitive with SolidJS (npm run bench:inspector).
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 Browser: Browser-backed reactive state for URL and storage ― manual & reference
- Select Utils: Utility helpers and compatibility barrel ― manual & reference
- Select Icons: SVG icon registry and loader utilities ― manual
- Select Routing: Route parsing and dispatch helpers ― documented in Select Utils
<!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.9.0/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.browser(options?): browser-backed state for URL, storage, and fetch helpers.cell(value?): mutable reactive cell.derived(template, processor?, initial?): derived reactive value.ui(selection, scope?): template component factory.ui.load(url, scope?): preload and cache external template fragments.ui.component(name): logic-only component definition to bind later with.using(...).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.router(),routed(),route(pattern),RoutePattern: routing helpers fromselect/routing.js.icon(name, options?),install(...),load(...): icon registry helpers fromselect/icons.js.len,type,remap: shared utility helpers fromselect/ui.js.clsx,shortword,sorted,unique: shared helpers fromselect/utils.jsandselect/utils/*.js.bind,drag,autoresize,Keyboard: interaction helpers fromselect/interaction.js.fastdom: batched DOM read/write helper.
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/browser.md:select/browser.jsusage and API guide.docs/utils.md:select/utils.jsand the helper submodules usage and API guide.docs/icons.md:select/icons.jsCDN icon loading and catalog usage.- Routing helpers are covered by
docs/utils.mdandexamples/feature-routing.html.
examples/feature-webcomponent.html: custom elements withwebcomponent(...), including parent event rebinding through implicit or explicitui-parent.examples/feature-icons.html: icon usage with default CDN collections and local JSON catalog.examples/feature-routing.html: browser-backed route state and route dispatch.examples/feature-template-load.html: preload external templates withui.load(...)and bind one behavior to multiple presentations with.using(...).
- 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.