Get started now

You can start by adopting Electric incrementally, one data fetch at a time.
Using our HTTP API, client libraries and framework hooks.

import { useShape } from '@electric-sql/react'

const Component = () => {
  const { data } = useShape({
    url: `${BASE_URL}/v1/shape`,
    params: {
      table: `items`
    }
  })

  return (
    <pre>{ JSON.stringify(data) }<pre>
  )
}

Quickstart

API docs

Demos

And you can level-up all the way to syncing into a local embedded PGlite database. With built-in persistence and live reactivity.

import { PGlite } from '@electric-sql/pglite'
import { live } from '@electric-sql/pglite/live'
import { electricSync } from '@electric-sql/pglite-sync'
import { useLiveQuery } from '@electric-sql/pglite-react'

// Create a persistent local PGlite database
const pg = await PGlite.create({
  dataDir: `idb://my-database`,
  extensions: {
    electric: electricSync(),
    live,
  },
})

// Setup the local database schema
await pg.exec(`
  CREATE TABLE IF NOT EXISTS items (
    id SERIAL PRIMARY KEY,
  );
`)

// Establish a persistent shape subscription
await pg.electric.syncShapeToTable({
  shape: { url: `${BASE_URL}/v1/shape` },
  table: `items`,
  primaryKey: [`id`],
})

// Bind data to your components using live queries
// against the local embedded database
const Component = () => {
  const items = useLiveQuery(`SELECT * FROM items;`)

  return <pre>{JSON.stringify(items)}</pre>
}

Learn more

Star on GitHub