Buy Me a Coffee at ko-fi.com
Silicon Jungle
Silicon Jungle

Offline First

Offline first helps you build collaborative software that works just as well offline as online.

Using CRDT's under the hood, we provide a scalable infrastructure that allows multiple people to be editing data concurrently with seamless merging when they come back online.

Supports JSON blobs and is suitable for all kinds of collaborative applications including Wiki's, blog's, code editor's, level editor's, etc.

How to get started?

We provide full support for React, with more support coming.

Cabinets client NPM

We also provide a core library which handles the merging and syncing of data.

Package set up

Once you've set up a React application, run the following command in the terminal:

yarn add @silicon-jungle/cabinets-client

Getting an API key

If you're interested in using Offline First, send me a message on Twitter.

_app.js

import { CabinetProvider, CabinetClient } from '@silicon-jungle/cabinets-client'

const client = new CabinetClient({
  uri: SOCKET_URL,
  accessToken: ACCESS_TOKEN,
})

const MyApp = ({ Component, pageProps }) => (
  <CabinetProvider client={client}>
    <Component {...pageProps} />
  </CabinetProvider>
)

index.js

import { useShelf } from '@silicon-jungle/cabinets-client'

const Page = ({ route }) => {
  const [value, setValue] = useShelf(CABINET_NAME, KEY)

  const handleClick = () => {
    setValue(new Date().toString())
  }

  return (
    <div>
      <p>{JSON.stringify(value)}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  )
}