DEV Community

Nivethan
Nivethan

Posted on • Originally published at nivethan.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.js
wget https://nivethan.dev/js/sqlite/sql-wasm.wasm
wget https://nivethan.dev/js/sqlite/worker.js
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)