pglite
PGlite embeds PostgreSQL 17.4 in the browser and Node.js via WASM, under 3MB gzipped. Covers storage backends, queries, transactions, extensions (pgvector, pgtrgm, full-text search), live queries, React integration, multi-tab worker architecture, and Electric sync. Use when setting up PGlite, choosing storage backends, writing queries or transactions, configuring extensions, implementing live queries, integrating with React, managing multi-tab workers, or syncing with Electric.
- Installs
- 146
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oakoss/agent-skills --skill pglite- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads pglite automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
PGlite
Overview
PGlite is a lightweight WASM build of PostgreSQL 17.4 that runs directly in the browser, Node.js, and Bun with no external dependencies. It provides a full Postgres query engine with extensions, transactions, COPY support, and listen/notify in under 3MB gzipped.
When to use: Local-first apps needing a real SQL engine, browser-based analytics, offline-capable PWAs, embedded Postgres for testing, prototyping without a server.
When NOT to use: High-concurrency server workloads (use native Postgres), apps requiring full Postgres replication, Safari OPFS storage (not supported), write-heavy multi-tab scenarios without leader election.
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Create instance | PGlite.create(dataDir?, options?) | Awaits ready internally |
| In-memory DB | PGlite.create() | Default, ephemeral storage |
| IndexedDB storage | PGlite.create('idb://dbname') | Persists in browser |
| OPFS storage | PGlite.create('opfs-ahp://dbname') | Worker only, no Safari |
| Parameterized query | db.query<T>(sql, params) | Returns QueryResult<T> |
| Tagged template | db.sql\SELECT ...`` | Auto-parameterized |
| Multi-statement exec | db.exec(sqlString) | No params, returns void |
| Transaction | db.transaction(async (tx) => {}) | Full ACID, use tx.query |
| Load extension | extensions: { vector } in create | Loaded at construction |
| Live query | db.live.query(sql, params, cb) | Re-runs on data change |
| Incremental query | db.live.incrementalQuery(sql, params, key, cb) | Diffs large result sets |
| Live changes | db.live.changes(sql, params, key, cb) | Raw insert/update/delete ops |
| React hook | useLiveQuery(sql, params) | Returns { rows } reactively |
| Multi-tab worker | PGliteWorker + leader election | Single writer, multi reader |
| Electric sync | syncShapeToTable(db, shape, table) | One-way read-only sync |
| Dump data | db.dumpDataDir('gzip') | Returns File blob |
| Load data | PGlite.create({ loadDataDir: blob }) | Restore from dump |
| Listen/notify | db.listen(channel, cb) | Postgres LISTEN/NOTIFY |
| Relaxed durability | relaxedDurability: true | Better browser write perf |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Using new PGlite() without awaiting ready | Use PGlite.create() which awaits internally |
| Using OPFS in main thread | OPFS-AHP requires a Web Worker context |
| Using OPFS on Safari | Safari lacks required OPFS APIs; use idb:// |
| Querying outside transaction callback | Pass tx from transaction callback, use tx.query() |
| Forgetting extension in create options | Extensions must be declared at PGlite.create({ extensions }) |
| Multiple tabs writing without leader election | Use PGliteWorker with leader election for multi-tab |
| Expecting Electric sync to be bidirectional | Electric sync is read-only, one-way from server |
Using live.query() for large datasets | Use live.incrementalQuery() for large result sets |
Not providing key to incremental query | Incremental and changes queries require a unique key column |
| Importing extensions without bundler support | Extensions are WASM; ensure bundler handles .wasm assets |
Delegation
If the
electricsqlskill is available, delegate Electric sync patterns, Shape configuration, and real-time replication to it. Otherwise, recommend:pnpm dlx skills add oakoss/agent-skills -s electricsql -a claude-code -yIf the
drizzle-ormskill is available, delegate Drizzle + PGlite driver setup and schema management to it. Otherwise, recommend:pnpm dlx skills add oakoss/agent-skills -s drizzle-orm -a claude-code -yIf the
local-firstskill is available, delegate local-first architecture decisions and sync engine selection to it. Otherwise, recommend:pnpm dlx skills add oakoss/agent-skills -s local-first -a claude-code -y
References
- Installation, storage backends, and configuration
- Queries, transactions, COPY, listen/notify, and data import/export
- Extensions: pgvector, pg_trgm, pgcrypto, full-text search, and more
- Live queries: reactive, incremental, and change-tracking
- React integration: providers, hooks, and typed patterns
- Multi-tab worker architecture and leader election
- Electric sync: shapes, transactional sync, and persistence
FAQ
What does the pglite skill do?
PGlite embeds PostgreSQL 17.4 in the browser and Node.js via WASM, under 3MB gzipped. Covers storage backends, queries, transactions, extensions (pgvector, pgtrgm, full-text search), live queries, React integration, multi-tab worker architecture, and Electric sync. Use when setting up PGlite, choosing storage backends, writing queries or transactions, configuring extensions, implementing live queries, integrating with React, managing multi-tab workers, or syncing with Electric.
How do I install pglite?
Run npx skills add https://github.com/oakoss/agent-skills --skill pglite in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/pglite/ (personal) or .claude/skills/pglite/ (project).
Which AI agents can use pglite?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is pglite safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains pglite?
It is published by oakoss in oakoss/agent-skills. It has 146 recorded installs.
More from oakoss/agent-skills
ui-ux-polish
oakoss/agent-skills
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
playwright
oakoss/agent-skills
Playwright browser automation API, web scraping, and tooling. Covers locator strategies, assertions, API testing, stealth mode, anti-bot bypass, authenticated sessions, screenshots/PDFs, Docker deployment, configuration, debugging, and MCP integration with AI agents. Prevents documented errors including CI timeout hangs, extension testing failures, and navigation issues. Use when automating browsers, scraping protected sites, bypassing bot detection, generating screenshots/PDFs, configuring Playwright Test, troubleshooting Playwright errors, or learning Playwright API patterns. For E2E test architecture, Page Object Models, CI sharding strategies, or test organization patterns, use the e2e-testing skill instead.
coolify
oakoss/agent-skills
Coolify self-hosted PaaS for deploying applications, databases, and services via REST API and Git integration. Covers API authentication, deployment triggers, build packs (Nixpacks, Dockerfile, Compose), CI/CD with GitHub Actions webhooks, environment management, and Traefik proxy configuration. Use when deploying apps to Coolify, triggering deployments via API, configuring build packs, setting up GitHub Actions CI/CD pipelines, managing environment variables, or troubleshooting deployment failures.
application-security
oakoss/agent-skills
Application security covering threat modeling (STRIDE), OWASP Top 10 (2025), OWASP API Security Top 10 (2023), secure coding review, authentication/authorization patterns, input validation, encryption, security headers, supply chain security, compliance (GDPR/HIPAA/SOC2/PCI-DSS), and security monitoring. Use when reviewing code for vulnerabilities, implementing auth patterns, securing APIs, configuring security headers, hardening supply chain, preventing injection attacks, or preparing for compliance audits.
find-skills
oakoss/agent-skills
Discovers and installs agent skills from the open ecosystem. Enriches search results with descriptions fetched from skills.sh. Use when a user asks "how do I do X", "find a skill for X", "is there a skill that can...", or wants to extend agent capabilities. Use for skill discovery, skill search, skill install, finding tools.
drizzle-orm
oakoss/agent-skills
Drizzle ORM for type-safe SQL with PostgreSQL, MySQL, and SQLite. Use when defining schemas, writing queries, managing relations, running migrations, or using drizzle-kit. Use for drizzle, orm, schema, query, migration, pgTable, relations, drizzle-kit, drizzle-zod.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.