DEV Community

Cover image for Bringing True SQLite to the Browser with OPFS πŸš€
wuchuheng
wuchuheng

Posted on

Bringing True SQLite to the Browser with OPFS πŸš€

Stop fighting with localStorage limits and complex IndexedDB wrappers. If you need a real relational database in your web app, it's time to use the actual SQLite engine.

The Problem

For years, we've emulated SQL on top of localStorage (5MB limit) or used IndexedDB (painful API). Modern web apps need more power.

The Solution: web-sqlite-js

web-sqlite-js is a lightweight wrapper around SQLite WASM and the Origin Private File System (OPFS). It gives you a persistent, high-performance database that lives right in the browser.

Key Features:

  • True SQLite: Full support for JOINs, Transactions, and Triggers.
  • Persistent: Data is saved to the browser's file system (OPFS).
  • Non-Blocking: Runs in a Web Worker to keep your UI at 60fps.
  • Type-Safe: First-class TypeScript support.

Quick Start:

npm install web-sqlite-js
Enter fullscreen mode Exit fullscreen mode
import openDB from "web-sqlite-js";

const db = await openDB("my-app.sqlite3");

// Standard SQL
await db.exec("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
await db.exec("INSERT INTO users (name) VALUES (?)", ["Alice"]);

// Complex Queries
const users = await db.query("SELECT * FROM users ORDER BY name ASC");

await db.close();
Enter fullscreen mode Exit fullscreen mode

Check it out on GitHub: https://github.com/wuchuheng/web-sqlite-js

javascript #typescript #webdev #sqlite

Top comments (0)