Back to Electric

PGlite

website/products/pglite.md

latest2.9 KB
Original Source
<script setup> import BlogPostsByTag from '../src/components/BlogPostsByTag.vue' import GitHubButton from '../src/components/GitHubButton.vue' </script>

PGlite <Badge type="warning" text="beta" />

Embeddable Postgres <span class="no-wrap">with reactivity and sync</span>. For a full database inside <span class="no-wrap">your client or runtime</span>.

<div class="actions cta-actions page-footer-actions left"> <div class="action"> <VPButton href="https://pglite.dev" target="_blank" text="PGlite.dev ↗" theme="pglite" /> </div> <div class="action"> <GitHubButton repo="electric-sql/pglite" /> </div> </div>

Lightweight WASM Postgres

PGlite is a lightweight WASM Postgres build, packaged into a TypeScript library for the browser, Node.js, Bun and Deno. PGlite allows you to run Postgres in JavaScript, with no need to install any other dependencies. It is under 3MB gzipped.

ts
import { PGlite } from '@electric-sql/pglite'

const db = new PGlite()
await db.query("select 'Hello world' as message;")
// -> { rows: [ { message: "Hello world" } ] }

Unlike previous "Postgres in the browser" projects, PGlite does not use a Linux virtual machine - it is simply Postgres in WASM, compiled directly in single-user mode.

It can be used as an ephemeral in-memory database, or with persistence either to the filesystem (Node/Bun) or indexedDB (in the browser). It's:

Syncing into PGlite

You can use Postgres Sync to sync between a cloud Postgres and an embedded PGlite instance. For example, to sync an items Shape into an items table:

<<< @/src/partials/sync-into-pglite.tsx

<BlogPostsByTag tag="pglite" :limit="4" />

More information

See the PGlite website at pglite.dev for comprehensive Docs, a list of Examples and a live in-browser REPL.

The source code is on GitHub at electric-sql/pglite.

<div class="actions cta-actions page-footer-actions left"> <div class="action"> <VPButton href="https://pglite.dev" target="_blank" text="PGlite.dev ↗" theme="pglite" /> </div> <div class="action"> <GitHubButton repo="electric-sql/pglite" /> </div> </div>