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.
npm install @electric-sql/pglite-replA REPL, or terminal, for use in the browser with PGlite, allowing you to have an interactive session with your WASM Postgres in the page.
- 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)
```
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.
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
`
Checkout this repo and from package dir:
`shInstall deps
pnpm install