Skip to main content

Getting Started

Install#

npm install replicache replicache-react

Serve Wasm Module#

Replicache uses Wasm internally. Most bundlers don't deal with this well yet, so it's easiest to just serve it as a static asset.

Copy the Replicache Wasm module to your static assets directory:

cp node_modules/replicache/out/*.wasm public/
note

You should add a postinstall script to do this in your app, so that it will stay up to date when you update Replicache.

Client Setup#

import {Replicache} from 'replicache';import {useSubscribe} from 'replicache';import {nanoid} from 'nanoid';
const rep = new Replicache({  // Put the correct path to replicache.wasm.br on your server here.  wasmModule: '/replicache.wasm',
  mutators: {    createTodo: (tx, args) => {      tx.put(`/todo/${args.id}`, args);    },  },});
function MyComponent() {  const todos = useSubscribe(    rep,    tx => tx.scan({prefix: '/todo/'}).toArray(),    [],  );
  const handleClick = () => {    rep.mutate.createTodo({      id: nanoid(),      order: todos.length,      text: 'new todo!',    });  };
  // ...}

Server Setup#

In order to sync, you will need to implement push an pull endpoints on your server.

For detailed information, see the integration guide, or the push/pull reference docs.