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:

1import { PGlite } from "@electric-sql/pglite";
2import { Repl } from "@electric-sql/pglite-repl";
3
4function MyComponent() {
5  const pg = new PGlite();
6
7  return <>
8    <Repl pg={pg} />
9  </>
10}

The props for the <Repl> component are described by this interface:

1// The theme to use, auto is auto switching based on the system
2type ReplTheme = "light" | "dark" | "auto";
3
4interface ReplProps {
5  pg: PGlite;  // PGlite db instance
6  border?: boolean;  // Outer border on the component, defaults to false
7  lightTheme?: Extension;
8  darkTheme?: Extension;
9  theme?: ReplTheme;  // Defaults to "auto"
10}

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.

1<script src="https://cdn.jsdelivr.net/npm/@electric-sql/pglite/dist-webcomponent/Repl.js" type="module"></script>
2
3<!-- Include the Repl web component in your page -->
4<pglite-repl id="repl"></pglite-repl>
5
6<script type="module">
7  import { PGlite } from "https://cdn.jsdelivr.net/npm/@electric-sql/pglite/dist/index.js";
8
9  // Create a PGlite instance
10  const pg = new PGlite();
11
12  // Retrieve the Repl element
13  const repl = document.getElementById('repl');
14
15  // REPL to your PGlite instance
16  repl.pg = pg;
17</script>

Development

Checkout this repo and from package dir:

1# Install deps
2pnpm install
3
4# Run dev server
5pnpm dev
6# then open a browser to the url shown
7
8# Build the lib
9pnpm build