Registry / database / htmx-sqlite

htmx-sqlite

JSON →
library1.9.3jsnpmunverified

An htmx extension that enables SQLite database queries directly from HTML attributes using either HTTP remote databases or the Origin Private File System (OPFS) in the browser. Version 1.9.3 wraps the sqlite-wasm-http library to provide declarative CRUD operations via hx-get, hx-put, hx-post, hx-delete attributes, supporting bind parameters and streaming row-by-row responses. It emits custom htmx events for progress and completion. Currently experimental with limited real-world use; requires copying worker files and a .wasm binary to the server due to cross-domain Web Worker restrictions. Key differentiator: brings serverless SQLite to htmx without a backend, but is early-stage and may have caching issues with the default shared backend.

database
npm install htmx-sqlite
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · HTMX-SQLITE
H
htmx-sqlite
databasejavascriptv1.9.3
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

htmx extension
✓ Use via HTML attribute hx-ext="sqlite" after including script tags for sqlite-wasm-http-main.js and htmx-sqlite/sqlite.min.js.
✗ Trying to import/require from npm module (it's a browser bundle intended for script tags only).
No JavaScript import - it's an htmx extension loaded via <script> tags. The npm package is only for distribution; actual usage is via unpkg or local copies of dist files.
sqlite-wasm-http-main.js
✓ Copy dist/sqlite-wasm-http-main.js (and related workers) to your server, then include via <script src="...sqlite-wasm-http-main.js"></script>
✗ Serving from CDN without copying workers - workers won't work cross-origin.
Must copy all sqlite-wasm-http-*.js files and the .wasm file to your own domain. Workers are fetched relative to the page origin.
hx-db attribute
✓ <body hx-ext="sqlite" hx-db="http:/mydb.db"> or hx-db="opfs:mydb.db"
✗ Using hx-db without specifying scheme (http: or opfs:) or with incorrect path (http:mydb.db vs http:/mydb.db).
For HTTP backend, the path must include a leading slash. For OPFS backend, use 'opfs:' prefix.

Basic setup using HTTP remote SQLite database; requires hosting worker and WASM files on same origin.

<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>htmx-sqlite demo</title> <!-- Include htmx first --> <script src="https://unpkg.com/htmx.org@1.9.6"></script> <!-- Copy these files to your server; using CDN for demo but may not work --> <script src="https://unpkg.com/htmx-sqlite@1.9.3/dist/sqlite-wasm-http-main.js"></script> <script src="https://unpkg.com/htmx-sqlite@1.9.3/dist/sqlite.min.js"></script> </head> <body hx-ext="sqlite" hx-db="http:/mydb.db"> <h1>User List</h1> <div hx-trigger="load" hx-get="SELECT * FROM users"> Loading... </div> </body> </html> <!-- Note: Must have mydb.db accessible as HTTP resource; workers must be hosted same-origin -->
Debug
Known issues
breakingWorkers must be served from same origin - CDN links for worker files will fail due to cross-origin restrictions.
fix
Copy all dist/sqlite-wasm-http-*.js and dist/*.wasm files to your own server and point script src to local copies.
affects: >=0.0.0
gotchaDefault shared backend caches SQLite pages in memory; no documented invalidation mechanism.
fix
If changes from other sessions are not visible, force sync backend by using hx-db="http:/mydb.db?sync=true" (not officially documented, but recommended in README).
affects: >=0.0.0
deprecatedPackage is experimental and appears effectively abandoned (no updates since early 2023).
fix
Consider alternatives like using sql.js directly or a server-side solution for production.
affects: >=1.0.0
Errors
Common errors & fixes
Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'https://unpkg.com/htmx-sqlite@1.9.3/dist/sqlite-wasm-http-87.js' cannot be accessed from origin 'http://localhost:8080'.
Web Workers are subject to same-origin policy; CDN workers violate this.
fix
Download SQLite worker files and serve them from your own domain (same origin as the page).
Error: Unable to open database: hx-get="SELECT ..." returns empty or no response.
Database path not correct for HTTP backend; missing leading slash or incorrect scheme.
fix
Ensure hx-db attribute uses proper format: 'http:/path/to/db.db' (single slash after colon) or 'opfs:dbname'.
hx-trigger="load" does not fire the query.
The sqlite extension may not be active if hx-ext="sqlite" is missing or misspelled.
fix
Add hx-ext="sqlite" to the body or a parent element that contains the element with hx-get.
Upgrade
Version history
1.9.3latest on npm
Audit
Dependencies
htmx.orgrequiredThis is an htmx extension - requires htmx to be loaded first.
sqlite-wasm-httprequiredUnderlying library providing SQLite WASM over HTTP/OPFS - packaged within htmx-sqlite distribution.
Agent activity
6 hits · last 30 days
node
6
Resources
githubhttps://github.com/jyrimatti/htmx-sqlite ↗
packagehtmx-sqlite ↗
homepagehttps://github.com/jyrimatti/htmx-sqlite#readme ↗
htmx-sqlite — npm install htmx-sqlite · libregistry