Realtime multi-user

As well as being instantly reactive, local-first also naturally supports multi-user collaboration. You write data locally and it syncs in the background between users and devices.

note

Remember, source code for the widgets in this introduction is in the examples/introduction folder of the main electric‑sql/electric repo.

Multi-user

Below, we've again embedded two demo apps. This time, they're both the same local-first app, being used by a different user.

Live Editor

const newItem = (demo) => { return { id: genUUID(), inserted_at: `${Date.now()}`, demo_id: demo.id, demo_name: demo.name, electric_user_id: demo.electric_user_id, } } const Realtime = ({ itemColor, slider, userId }) => { const { db } = useElectric() const { demo } = useDemoContext() const [sliderValue, setSliderValue] = useState(slider.value) const { results: liveItems } = useLiveQuery( db.items.liveMany({ where: { demo_name: demo.name, electric_user_id: demo.electric_user_id, }, orderBy: { inserted_at: 'asc', }, take: 24, }), ) const { results: liveSlider } = useLiveQuery( db.sliders.liveFirst({ where: { demo_name: demo.name, electric_user_id: demo.electric_user_id, }, select: { id: true, value: true, }, orderBy: { id: 'asc', }, }), ) useEffect(() => { if (liveSlider === undefined) { return } setSliderValue(liveSlider.value) }, [liveSlider]) const add = async () => { await db.items.create({ data: newItem(demo), }) } const clear = async () => { await db.items.deleteMany({ where: { demo_name: demo.name, electric_user_id: demo.electric_user_id, }, }) } const syncSlider = async (value) => { await db.sliders.updateMany({ where: { demo_name: demo.name, electric_user_id: demo.electric_user_id, }, data: { value: value, }, }) } if (liveItems === undefined) { return null } return ( <div className="mb-4"> <div> <label className={clsx('section-label text-small', itemColor)}> User: {userId} </label> <div className={clsx('my-8', itemColor)}> <SliderInput min={0} max={100} step={1} value={sliderValue} onChange={setSliderValue} onChangeComplete={syncSlider} /> </div> </div> <ItemsWidget add={add} clear={clear} items={liveItems} itemColor={itemColor} disableWhenInProgress={false} /> </div> ) } // Setup the slider in a Wrapper rather than directly // in the Demo below so we can use the db and // demoContext setup by the App component. const Wrapper = ({ itemColor, userId }) => { const { db } = useElectric() const { demo } = useDemoContext() const [slider, setSlider] = useState() useEffect(() => { let isMounted = true const ensureSlider = async () => { const slider = await bootstrapSlider(db, demo) if (!isMounted) { return } setSlider(slider) } ensureSlider() return () => { isMounted = false } }, []) if (slider === undefined) { return null } return <Realtime slider={slider} userId={userId} itemColor={itemColor} /> } const Demo = () => ( <div className="grid grid-cols-1 sm:grid-cols-2 gap-6" data-testid="multiuser-realtime-demo"> <div className="px-3 md:px-4" data-testid="user1"> <App dbName="user1" demoName="multi-user" bootstrapItems={2}> <Wrapper userId={1} itemColor="electric-green" /> </App> </div> <div className="px-3 md:px-4" data-testid="user2"> <App dbName="user2" demoName="multi-user" bootstrapItems={2}> <Wrapper userId={2} itemColor="script-purple" /> </App> </div> </div> ) render(<Demo />)

const newItem = (demo) => {
  return {
    id: genUUID(),
    inserted_at: `${Date.now()}`,
    demo_id: demo.id,
    demo_name: demo.name,
    electric_user_id: demo.electric_user_id,
  }
}

const Realtime = ({ itemColor, slider, userId }) => {
  const { db } = useElectric()
  const { demo } = useDemoContext()
  const [sliderValue, setSliderValue] = useState(slider.value)

  const { results: liveItems } = useLiveQuery(
    db.items.liveMany({
      where: {
        demo_name: demo.name,
        electric_user_id: demo.electric_user_id,
      },
      orderBy: {
        inserted_at: 'asc',
      },
      take: 24,
    }),
  )

  const { results: liveSlider } = useLiveQuery(
    db.sliders.liveFirst({
      where: {
        demo_name: demo.name,
        electric_user_id: demo.electric_user_id,
      },
      select: {
        id: true,
        value: true,
      },
      orderBy: {
        id: 'asc',
      },
    }),
  )

  useEffect(() => {
    if (liveSlider === undefined) {
      return
    }

    setSliderValue(liveSlider.value)
  }, [liveSlider])

  const add = async () => {
    await db.items.create({
      data: newItem(demo),
    })
  }

  const clear = async () => {
    await db.items.deleteMany({
      where: {
        demo_name: demo.name,
        electric_user_id: demo.electric_user_id,
      },
    })
  }

  const syncSlider = async (value) => {
    await db.sliders.updateMany({
      where: {
        demo_name: demo.name,
        electric_user_id: demo.electric_user_id,
      },
      data: {
        value: value,
      },
    })
  }

  if (liveItems === undefined) {
    return null
  }

  return (
    <div className="mb-4">
      <div>
        <label className={clsx('section-label text-small', itemColor)}>
          User: {userId}
        </label>
        <div className={clsx('my-8', itemColor)}>
          <SliderInput
            min={0}
            max={100}
            step={1}
            value={sliderValue}
            onChange={setSliderValue}
            onChangeComplete={syncSlider}
          />
        </div>
      </div>
      <ItemsWidget
        add={add}
        clear={clear}
        items={liveItems}
        itemColor={itemColor}
        disableWhenInProgress={false}
      />
    </div>
  )
}

// Setup the slider in a Wrapper rather than directly
// in the Demo below so we can use the db and
// demoContext setup by the App component.
const Wrapper = ({ itemColor, userId }) => {
  const { db } = useElectric()
  const { demo } = useDemoContext()
  const [slider, setSlider] = useState()

  useEffect(() => {
    let isMounted = true

    const ensureSlider = async () => {
      const slider = await bootstrapSlider(db, demo)

      if (!isMounted) {
        return
      }

      setSlider(slider)
    }

    ensureSlider()

    return () => {
      isMounted = false
    }
  }, [])

  if (slider === undefined) {
    return null
  }

  return <Realtime slider={slider} userId={userId} itemColor={itemColor} />
}

const Demo = () => (
  <div className="grid grid-cols-1 sm:grid-cols-2 gap-6" data-testid="multiuser-realtime-demo">
    <div className="px-3 md:px-4" data-testid="user1">
      <App dbName="user1" demoName="multi-user" bootstrapItems={2}>
        <Wrapper userId={1} itemColor="electric-green" />
      </App>
    </div>
    <div className="px-3 md:px-4" data-testid="user2">
      <App dbName="user2" demoName="multi-user" bootstrapItems={2}>
        <Wrapper userId={2} itemColor="script-purple" />
      </App>
    </div>
  </div>
)

render(<Demo />)

As you can see, if one user interacts with the interface, the changes naturally sync to the other user. If you expand the live editor, you'll see there's no special code involved in making the app multi-user. You just read and write data to the local database and support for realtime collaboration is naturally built in.

Multi-platform

Sync also works across multiple devices and across web and mobile. For example, you can open the same demo app in your mobile browser:

Mobile web

Scan to open the demo app above in your mobile phone's web browser.

Scan the QR code and scroll down a touch to see the same multi-user demo app. Also make sure you have the demo in view in this browser. Then have a play with both :) You'll see changes sync in realtime across your devices.

---

As we'll see in active-active replication, sync isn't limited to web and mobile. Before we dive into that, let's first see how realtime sync and conflict-free offline play together »