Docs/Quickstart

Quickstart

Get up and running with ZerithDB in less than 2 minutes. Choose your preferred framework below to see the boilerplate code required to initialize your local-first database.

Install the SDK

npm install zerithdb-sdk zerithdb-react

1. Wrap your app with the Provider

Initialize the CRDT engine and WebRTC pool at the root of your application.

example.tsx

import { ZerithProvider } from 'zerithdb-react';

export default function App({ children }) {
  return (
    <ZerithProvider config={{ appId: 'my-app', sync: true }}>
      {children}
    </ZerithProvider>
  );
}

2. Read and Write Data

Use our custom hooks to interact with local-first collections. Data instantly syncs across peers.

example.tsx

import { useQuery } from 'zerithdb-react';

function TodoList() {
  // Subscribes to IndexedDB & WebRTC changes automatically
  const { data: todos, insert } = useQuery('todos');

  return (
    <div>
      {todos.map(todo => <p key={todo.id}>{todo.text}</p>)}
      <button onClick={() => insert({ text: 'New Todo' })}>
        Add Todo
      </button>
    </div>
  );
}

You're ready to build!

You've successfully set up the foundation for a zero-backend application. Explore the advanced topics to unlock the full power of ZerithDB.

Interactive Playground

Test offline/online sync locally