Yjs Docs
  • Introduction
  • Yjs in the Wild
  • License ❤️
  • 🚲Getting Started
    • A Collaborative Editor
    • Awareness & Presence
    • Offline Support
    • Shared Types
  • 🔥Ecosystem
    • Editor Bindings
      • ProseMirror
      • TipTap
      • Monaco
      • Quill
      • CodeMirror
      • Remirror
      • Milkdown
      • Slate
    • Connection Provider
      • y-websocket
      • y-webrtc
      • y-webxdc
      • y-dat
      • y-sweet
      • Liveblocks
      • SuperViz
    • Database Provider
      • y-indexeddb
      • y-leveldb
      • y-redis
    • Other
      • y-protocols
    • Ports to other languages
  • 🔧API
    • Y.Doc
    • Shared Types
      • Y.Map
      • Y.Array
      • Y.Text
      • Y.XmlFragment
      • Y.XmlElement
      • Y.XmlText
    • Y.UndoManager
    • Y.Event
    • Delta Format
    • Document Updates
    • Y.RelativePosition
    • Awareness
    • Subdocuments
    • Internals
    • FAQ
  • 🧪Tutorials
    • Meshing Providers
    • Persisting the Document to a Central Database
    • Indefinite Scaling with y-redis
    • Lessons Learned
    • Custom Provider
  • 🌎External Resources
    • Talks, Podcasts, and Blogs
    • About CRDTs
    • CRDT Benchmarks
    • Yjs Discussion Board
    • Yjs Chat
    • Kevin's Blog
    • Awesome People ⭐
Powered by GitBook
On this page
  • Getting Started
  • API
  • Example

Was this helpful?

Edit on Git
  1. Ecosystem
  2. Database Provider

y-indexeddb

IndexedDB database provider for Yjs

PreviousDatabase ProviderNexty-leveldb

Last updated 3 years ago

Was this helpful?

Use the IndexedDB database provider to store your shared data persistently in the browser. The next time you join the session, your changes will be loaded from the local browser database.

  • Minimizes the amount of data exchanged between server and client

  • Makes offline editing possible

Getting Started

The following guide shows you some advanced features of the y-indexeddb database provider. There is a dedicated getting-started guide on creating offline-capable applications with Yjs.

import { IndexeddbPersistence } from 'y-indexeddb'

const provider = new IndexeddbPersistence(docName, ydoc)

provider.on('synced', () => {
  console.log('content from the database is loaded')
})
npm i --save y-indexeddb

API

provider = new IndexeddbPersistence(docName: string, ydoc: Y.Doc) **** Create a y-indexeddb persistence provider. Specify docName as a unique string that identifies this document. In most cases, you want to use the same identifier that is used as the room-name in the connection provider.

provider.on('synced', function(idbPersistence: IndexeddbPersistence)) **** The "synced" event is fired when the connection to the database has been established and all available content has been loaded. The event is also fired when no content is available yet.

provider.set(key: any, value: any): Promise<any> **** Set a custom property on the provider instance. You can use this to store relevant meta-information for the persisted document. However, the content will not be synced with other peers.

provider.get(key: any): Promise<any> **** Retrieve a stored value.

provider.del(key: any): Promise<undefined> **** Delete a stored value.

provider.destroy(): Promise **** Close the connection to the database and stop syncing the document. This method is automatically called when the Yjs document is destroyed (e.g. ydoc.destroy()).

provider.clearData(): Promise **** Destroy this database and remove the stored document and all related meta-information from the database.

Example

The following example persists document updates to the browsers' database without sharing it with anyone. The content will be persisted across sessions (you can reload the window).

🔥
Offline Support
GitHub - yjs/y-indexeddb: IndexedDB database adapter for YjsGitHub
Logo