PGlite REPL React Component

A REPL, or terminal, for use in the browser with PGlite, allowing you to have an interactive session with your WASM Postgres in the page.

Features:

- Available as both a React.js component and a Web Components
- CodeMirror for input editing
- Auto complete, including table and column names from the database
- Input history (up and down keys)
- \d PSQL commands (via psql-describe)

How to use with React

``
npm install @electric-sql/pglite-repl
`

then to include in a page:

`tsx
import { PGlite } from "@electric-sql/pglite";
import { Repl } from "@electric-sql/pglite-repl";

function MyComponent() {
const pg = new PGlite();

return <>


}
`

The props for the component are described by this interface:

`ts
// The theme to use, auto is auto switching based on the system
type ReplTheme = "light" | "dark" | "auto";

interface ReplProps {
pg: PGlite; // PGlite db instance
border?: boolean; // Outer border on the component, defaults to false
lightTheme?: Extension;
darkTheme?: Extension;
theme?: ReplTheme; // Defaults to "auto"
}
`

The lightTheme and darkTheme should be instances of a React CodeMirror theme.

How to use as a Web Component

Although the PGlite REPL is built with React, its also available as a web component for easy inclusion in any page or other framework.

`html






`

Development

Checkout this repo and from package dir:

`sh


Install deps

pnpm install

Run dev server

pnpm dev

then open a browser to the url shown

Build the lib

pnpm build
``