YFS

Synchronize text files between the browser and the file system using the File System Access API and Yjs.

Blog post explaining the underlying concepts: Syncing text files between browser and disk using Yjs and the File System Access API.

Installation

To get started, install the @yfs/react package via npm or yarn:

# npm
npm install @yfs/react

# Yarn
yarn add @yfs/react

Usage

Example:

import React, { useState } from 'react'
import * as Y from 'yjs'
import useYFS from '@yfs/react'

function Editor () {
  const { setRootDirectory, directoryName, syncDoc } = useYFS()
  const [doc] = useState<Y.Doc>(new Y.Doc())

  return (
    <div>
      <button
        onClick={() => {
          if (!directoryName) {
            setRootDirectory(true)
          } else {
            syncDoc('my-file.md', doc)
          }
        }}
      >
        Sync
      </button>
      {/* Editor code... */}
    </div>
  )
}

Authors

This library is created by the team behind Motif (@motifland).

• Michael Fester (@michaelfester)

It is based on the great work by Kevin Jahns on Yjs.

License

MIT