$$$$$$\ $$\ $$\
$$ __$$\ $$ | $$ |
$$ / \__| $$$$$$\ $$ | $$$$$$\ $$$$$$$\ $$$$$$\ $$\ $$$$$$$\
\$$$$$$\ $$ __$$\ $$ |$$ __$$\ $$ _____|\_$$ _| \__|$$ _____|
\____$$\ $$$$$$$$ |$$ |$$$$$$$$ |$$ / $$ | $$\ \$$$$$$\
$$\ $$ |$$ ____|$$ |$$ ____|$$ | $$ |$$\ $$ | \____$$\
\$$$$$$ |\$$$$$$$\ $$ |\$$$$$$$\ \$$$$$$$\ \$$$$ |$$\ $$ |$$$$$$$ |
\______/ \_______|\__| \_______| \_______| \____/ \__|$$ |\_______/
$$\ $$ |
\$$$$$$ |
\______/
Select.js is a lightweight toolkit for modern browser interfaces in
JavaScript. It started as a small DOM/SVG selection library (select/features/query.js)
and now also includes template-driven UI (select/ui), fine-grained reactive
state (select/state/cells.js), browser-backed state (select/state/browser.js), routing
(select/state/routing.js), icons (select/features/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. Focused domains are
also available through select/core, select/state, select/ui,
select/features, and select/utils.
While select/features/query.js is fast, the select/ui 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). Per-release performance relative to SolidJS and test
coverage are recorded with git-kv (make metrics-report). In that sense,
Select is designed to fill the niche for little tools that can be composed and
embedded.
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 Workflows: Generator-based task workflows with caching and event bindings ― 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 "@./features/query.js"
import cell from "@./state/cells.js"
import ui from "@./ui"
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@v1.0.2/src/js/select/"
}
}
</script>
<script type="module">
import $ from "@select/features/query.js"
import cell from "@select/state/cells.js"
import ui from "@select/ui"
</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/state/routing.js.icon(name, source?, options?),install(...),load(...): icon registry helpers fromselect/features/icons.js.len,type,remap: shared utility helpers fromselect/ui.clsx,shortword,sorted,unique: shared helpers fromselect/utilsandselect/utils/*.js.bind,drag,draggable,sort,popup,autoresize,Keyboard: interaction helpers fromselect/features/interaction/index.js.draggable(event, options?)uses[data-draggable]sources and[data-drop-target]targets, appending a clone by default;data-drop-acceptandaccept(...)control acceptance, whilepreview(...)anddrop(...)customize the two effect stages.sort(event, options?)provides sortable list slotting and moves the original item by default.popup(panel, trigger, options?)portals a panel, keeps it in the viewport, and supports underlay click and Escape to close.fastdom: batched DOM read/write helper.
docs/select.md:select.jscomplete reference (original README split).docs/ui.md:select/uiusage and API guide.docs/cells.md:select/state/cells.jsusage and API guide.docs/browser.md:select/state/browser.jsusage and API guide.docs/utils.md:select/utilsand the helper submodules usage and API guide.docs/icons.md:select/features/icons.jspinned SVG presets and optional extra packs.- 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 pinned per-icon SVG presets.examples/app-icons.html: curated, resilient icon catalog compared across every pinned preset (no Iconify download), deep-linkable via the URL hash.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(...).examples/feature-popup.html: portaled popups with viewport flip, underlay click, and Escape to close.
- 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.