Posted onJan 21, 2023 • Originally published atnivethan.dev

Using SQLite in the Browser

Easy peasy instructions to get sqlite working in the browser and not

First step download the following 3 files, the wasm binary and the wrappers:

wget https://nivethan.dev/js/sqlite/sql-httpvfs.jswget https://nivethan.dev/js/sqlite/sql-wasm.wasmwget https://nivethan.dev/js/sqlite/worker.js

If you feel uncomfortable downloading random binaries from random people, then you can use the instructions below to build it yourself. The building is relatively straightforward and doesn’t take long.

https://nivethan.dev/devlog/building-sql.js-httpvfs-for-the-browser.html

Now that we have the library, we can then include the sql-httpvfs.js as a module and use it with our sqlite database.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>title</title>  </head>  <body>    <script type="module">      import { load } from "/js/sqlite/sql-httpvfs.js";      const worker = await load("/db/example.sqlite3");      const result = await worker.db.query(`select * from mytable`);      console.log(result);    </script>  </body></html>