SyncedStore CRDT

https://github.com/yousefed/syncedstore
Admin
SyncedStore is an easy-to-use library for building fast, collaborative, and offline-first...
Tokens:9,673
Snippets:54
Trust Score:9.3
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install and Run Svelte Todo MVC Example

Source: https://github.com/yousefed/syncedstore/blob/main/examples/todo-svelte/README.md

These commands are used to install project dependencies and start the development server for the Svelte Todo MVC example. Ensure you have Node.js and npm installed.

```bash
npm install
npm run dev
```

--------------------------------

### Install Project Dependencies (Yarn)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/README.md

Installs the necessary project dependencies using Yarn. This is typically the first step before running any other commands.

```console
yarn install
```

--------------------------------

### Install Optional Dependencies

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/basics/installation.md

Installs optional helper libraries for SyncedStore, including `y-webrtc` for WebRTC synchronization and `@syncedstore/react` for React integration.

```bash
# For syncing over webrtc:
npm install --save y-webrtc

# If you use React, install the helper library:
npm install --save @syncedstore/react
```

--------------------------------

### Start Local Development Server (Yarn)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/README.md

Starts a local development server for live previewing changes. The server automatically refreshes the browser when modifications are detected.

```console
yarn start
```

--------------------------------

### Install SyncedStore and Yjs

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/basics/installation.md

Installs the core SyncedStore library and Yjs, a necessary dependency for data synchronization, using npm.

```bash
npm install --save @syncedstore/core

# SyncedStore builds on top of yjs, install that too:
npm install --save yjs
```

--------------------------------

### SyncedStore Method with Shape Definition

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/basics/installation.md

Illustrates the usage of the `syncedStore` method by defining a 'shape' object that specifies the structure and types of data to be stored and synchronized. It shows examples for arrays, objects, XML, and text data types.

```javascript
const shape = {
  exampleArrayData: [],
  exampleObjectData: {},
  exampleXMLData: "xml",
  exampleTextData: "text",
};
const store = syncedStore(shape);
```

--------------------------------

### Create SyncedStore with WebrtcProvider

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/basics/installation.md

Demonstrates how to create a SyncedStore instance with a defined data shape and integrate it with `WebrtcProvider` for real-time synchronization across a network using a document ID.

```typescript
import { syncedStore, getYjsDoc } from "@syncedstore/core";
import { WebrtcProvider } from "y-webrtc";

// (optional, define types for TypeScript)
type Vehicle = { color: string; brand: string };

// Create your SyncedStore store
export const store = syncedStore({ vehicles: [] as Vehicle[] });

// Get the Yjs document and sync automatically using y-webrtc
const doc = getYjsDoc(store);
const webrtcProvider = new WebrtcProvider("my-document-id", doc);
```

--------------------------------

### Interact with SyncedStore using Plain Javascript

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/basics/example.md

This snippet shows how to initialize a SyncedStore, add elements to an array, and modify object properties in plain Javascript. It includes UI elements for user interaction and uses `observeDeep` to update the display when the store changes.

```javascript
import { observeDeep } from "@syncedstore/core";
import { store } from "./store";

const root = document.getElementById("app");

// Display the contents of the store
const jsonView = document.createElement("pre");
jsonView.innerText = JSON.stringify(store, undefined, 2);
root.appendChild(jsonView);

// Add a button to add some values to store.myArray
const addElementBtn = document.createElement("button");
addElementBtn.innerText = "Add values to array";
addElementBtn.onclick = () => {
  // Add an object to the array
  store.myArray.push({ property: "value" });

  // Add a random number between 0 and 100 to the array
  store.myArray.push(Math.floor(Math.random() * 100));
};
root.appendChild(addElementBtn);

// Add a button to set a property on store.myObject

// Which property to change?
const inputPropertyName = document.createElement("input");
inputPropertyName.value = "myProp";
root.appendChild(inputPropertyName);

// What value to set to the property?
const inputPropertyValue = document.createElement("input");
inputPropertyValue.value = "myValue";
root.appendChild(inputPropertyValue);

// Add the actual button to change a property
const setPropertBtn = document.createElement("button");
setPropertBtn.innerText = "Change a property on the object";
setPropertBtn.onclick = () => {
  // Change a property on myObject
  store.myObject[inputPropertyName.value] = inputPropertyValue.value;
};
root.appendChild(setPropertBtn);

// Automatically update jsonView when the store changes
//
// (note that in most applications, you won't use observeDeep
// but rely on SyncedStore's reactive updating mechanism instead)
observeDeep(store, () => {
  jsonView.innerText = JSON.stringify(store, undefined, 2);
});

// Set the store on the window object
// If you like, you can now play around with the store
// and change values using the Browser inspector
window.store = store;
```

--------------------------------

### Example SyncedStore Shape Definition (TypeScript)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Illustrates how to define the structure of the data for a SyncedStore. It includes examples of various data types like arrays, objects, XML strings, and text strings.

```typescript
const shape = {
  exampleArrayData: [],
  exampleObjectData: {},
  exampleXMLData: "xml",
  exampleTextData: "text",
};
```

--------------------------------

### Collaborative Todo App with Svelte and SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/svelte.md

This is a live Svelte component example that utilizes a SyncedStore to manage a list of todos. It allows users to add new todos, mark them as completed, and delete them. The store is reactive, and changes are synchronized across collaborators.

```svelte
<script>
	import { svelteStore } from "./store.js";

	let newTodo = "";

	const addTodo = () => {
	  const value = newTodo && newTodo.trim();

	  if (!value) {
	    return;
	  }
	  $svelteStore.todos.push({
	    title: value,
	    completed: false
	  });
	  newTodo = "";
	};

	const removeTodo = todo => {
	  $svelteStore.todos.splice($svelteStore.todos.indexOf(todo), 1);
	};
</script>

<main id="app">
	<h1>Todo Svelte</h1>
	<form on:submit|preventDefault={addTodo}>
		<input
				class="new-todo"
				autocomplete="off"
				placeholder="What needs to be done?"
				bind:value={newTodo}
			/>
		</form>
	<ul class="todo-list">
		{#each $svelteStore.todos as todo}
				<li class="todo">
					<div>
						<label>
							<input class="toggle" type="checkbox" bind:checked={todo.completed} />
							{ todo.title }
						</label>
						<button class="destroy" on:click={() => removeTodo(todo)}>Delete</button>
					</div>
				</li>
			{/each}
		</ul>
</main>
```

--------------------------------

### Bind SyncedStore to TipTap Rich Text Editor

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/richtext.md

This example demonstrates how to bind SyncedStore to a TipTap rich text editor, typically by linking it to an XmlFragment in your store. It shows the basic integration for enabling collaborative rich text editing.

```javascript
import { Doc } from 'yjs';
import { Websync } from 'y-websocket';
import { TiptapCollab } from '@hocuspocus/provider';
import StarterKit from '@tiptap/starter-kit';
import { Editor } from '@tiptap/core';

const doc = new Doc();
const provider = new Websync('ws://localhost:1234', {
  name: 'my-document',
  document: doc,
});

const editor = new Editor({
  extensions: [
    StarterKit,
    TiptapCollab.configure({
      name: 'rich-text',
      provider,
    }),
  ],
});

// Access the rich text content via editor.getHTML()
or editor.getText()

// You can also listen for changes
editor.on('update', ({ editor }) => {
  console.log(editor.getHTML());
});

// Remember to destroy the editor and provider when done
// editor.destroy();
// provider.destroy();
```

--------------------------------

### Enable Vue Bindings for SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/vue.md

Enables SyncedStore's integration with Vue 3's reactivity system by calling `enableVueBindings`. This setup should be performed once when initializing the store.

```typescript
import * as Vue from "vue";
import { enableVueBindings } from "@syncedstore/core";

enableVueBindings(Vue);
```

--------------------------------

### Vue 3 Collaborative Todo App Example

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/vue.md

A live example of a collaborative Todo application built with Vue 3 and SyncedStore. It showcases adding, completing, and deleting todos, with the store directly integrated into the Vue component's data.

```vue
<template>
  <main id="app">
    <h1>Todo Vue</h1>
    <input
        class="new-todo"
        autofocus
        autocomplete="off"
        placeholder="What needs to be done?"
        v-model="newTodo"
        @keyup.enter="addTodo"
      />
    <ul class="todo-list">
        <li
          v-for="todo in store.todos"
          class="todo"
        >
          <div class="view">
            <label>
              <input class="toggle" type="checkbox" v-model="todo.completed" />
              {{ todo.title }}
            </label>
            <button class="destroy" @click="removeTodo(todo)">Delete</button>
          </div>
        </li>
      </ul>
  </main>
</template>

<script>
import { store } from "./store";
import { ref } from "vue";
import * as Vue from "vue";
import { enableVueBindings } from "@syncedstore/core";

// make SyncedStore use Vuejs internally
enableVueBindings(Vue);

export default {
  name: "App",
  data() {
    return {
      store, // Put the store on the data() of the component
      newTodo: ""
    };
  },
  methods: {
    addTodo() {
      const value = this.newTodo && this.newTodo.trim();
      if (!value) {
        return;
      }
      this.store.todos.push({
        title: value,
        completed: false,
      });
      this.newTodo = "";
    },
    removeTodo(todo) {
      this.store.todos.splice(this.store.todos.indexOf(todo), 1);
    }
  }
};
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

ul {
  text-align:left;
}

li button {
  margin-left:1em;
}
</style>
```

--------------------------------

### IndexedDB and WebRTC Sync Providers for SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/sync-providers.md

Shows how to combine y-indexeddb for offline storage with y-webrtc for real-time peer-to-peer synchronization. This setup allows for offline access and immediate data availability, with diffs synced over the network.

```javascript
import { syncedStore, getYjsDoc } from "@syncedstore/core";
import { WebrtcProvider } from "y-webrtc";
import { IndexeddbPersistence } from "y-indexeddb";

export const store = syncedStore({ arrayData: [] });

const doc = getYjsDoc(store);
const webrtcProvider = new WebrtcProvider("my-document-id", doc);
const provider = new IndexeddbPersistence("my-document-id", doc);
```

--------------------------------

### React Component with MobX and SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/mobx.md

This example shows a React component that utilizes SyncedStore data with MobX's 'observer' pattern. It allows adding and managing todo items, leveraging MobX for reactivity without the need for the 'useSyncedStore' hook.

```typescript
import React from "react";
import { store } from "./store";
import { observer } from "mobx-react-lite";
import * as mobx from "mobx";
import { enableMobxBindings } from "@syncedstore/core";

// enable mobx bindings
enableMobxBindings(mobx);

// use the observer pattern from mobx-react-lite.
export const App = observer(() => {
  return (
    <div>
      <p>Todo items:</p>
      <ul>
        {store.todos.map((todo, i) => {
          return (
            <li key={i} style={{ textDecoration: todo.completed ? "line-through" : "" }}>
              <label>
                <input type="checkbox" checked={todo.completed} onClick={() => (todo.completed = !todo.completed)} />
                {todo.title}
              </label>
            </li>
          );
        })};
      </ul>
      <input
        placeholder="Enter a todo item and hit enter"
        type="text"
        onKeyPress={(event) => {
          if (event.key === "Enter") {
            const target = event.target as HTMLInputElement;
            // Add a todo item using the text added in the textfield
            store.todos.push({ completed: false, title: target.value });
            target.value = "";
          }
        }}
        style={{ width: "200px", maxWidth: "100%" }}
      />
    </div>
  );
});

export default App;
```

--------------------------------

### React Integration with Boxed Values

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/boxed.md

Provides a React component example demonstrating how to use `useSyncedStore` with a store containing boxed values. It includes buttons to add new boxed items and to update the first boxed item by replacing it, along with a demonstration of the incorrect mutation approach.

```jsx
import React from "react";
import { useSyncedStore } from "@syncedstore/react";
import { boxed } from "@syncedstore/core";
import { store } from "./store"; // the store we defined above

export default function App() {
  const state = useSyncedStore(store);

  return (
    <div>
      <p>Todo items:</p>
      {JSON.stringify(state, undefined, 2)}

      <div>
        <button
          onClick={() => {
            state.todos.push(boxed({ title: "This is a todo", completed: false }));
          }}
        >
          Add a boxed item
        </button>
        <br />
        <button
          disabled={state.todos.length === 0}
          onClick={() => {
            state.todos.splice(
              0,
              1,
              boxed({
                title: state.todos[0].value.title,
                completed: !state.todos[0].value.completed,
              })
            );
          }}
        >
          Edit first item (replace)
        </button>
        <br />
        <button
          disabled={state.todos.length === 0}
          onClick={() => {
            state.todos[0].value.completed = !state.todos[0].value.completed;
          }}
        >
          Old (raises error): edit first item by mutating
        </button>
      </div>
    </div>
  );
}
```

--------------------------------

### Access Yjs Value - getYjsValue

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Gets the internal Yjs value that backs the synchronization of a given object. This can be a Y.Doc, Y.Array, Y.Map, or other Yjs types depending on the input. It accepts any object and returns the corresponding Yjs type or undefined.

```typescript
function getYjsValue(object: any): Y.Doc | Y.AbstractType<any> | undefined;
```

--------------------------------

### Deploy Website to GitHub Pages (Yarn)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/README.md

Builds the website and deploys it to the 'gh-pages' branch, suitable for hosting on GitHub Pages. Requires setting the GIT_USER environment variable and optionally USE_SSH.

```console
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

--------------------------------

### Initialize SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

This section details the parameters required to initialize a new SyncedStore instance and the expected return type.

```APIDOC
## POST /syncedstore

### Description
Initializes a new SyncedStore with a specified shape and an optional backing Y.Doc.

### Method
POST

### Endpoint
/syncedstore

### Parameters
#### Request Body
- **shape** (T) - Required - An object that describes the root types of the store. For example: `{
  exampleArrayData: [],
  exampleObjectData: {},
  exampleXMLData: "xml",
  exampleTextData: "text"
}`
- **doc** (Doc) - Optional - A Y.Doc instance to use as the backing system for the store.

### Response
#### Success Response (200)
- **SyncedStore** (MappedTypeDescription<T>) - A SyncedStore instance representing the initialized store.

#### Response Example
```json
{
  "storeInstance": "[SyncedStore instance]"
}
```
```

--------------------------------

### Build Static Website Content (Yarn)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/README.md

Generates the static files for the website into the 'build' directory. These files can then be deployed to any static hosting service.

```console
yarn build
```

--------------------------------

### enableMobxBindings

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Enables MobX integration for SyncedStore.

```APIDOC
## enableMobxBindings

### Description
Enable MobX integration.

### Method
N/A (Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
* `mobx` (any) - Required - An instance of mobx, e.g. import * as mobx from "mobx";

### Request Example
```json
{
  "mobx": "any"
}
```

### Response
#### Success Response (void)
* `void` - This function does not return a value.

#### Response Example
```json
{
  "returns": "void"
}
```

### Defined in
packages/yjs-reactive-bindings/src/observableProvider.ts:46
```

--------------------------------

### enableVueBindings

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Enables Vue3 integration for SyncedStore.

```APIDOC
## enableVueBindings

### Description
Enable Vue3 integration.

### Method
N/A (Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
* `vue` (any) - Required - An instance of Vue or Vue reactivity, e.g. import * as Vue from "vue";

### Request Example
```json
{
  "vue": "any"
}
```

### Response
#### Success Response (void)
* `void` - This function does not return a value.

#### Response Example
```json
{
  "returns": "void"
}
```

### Defined in
packages/yjs-reactive-bindings/src/observableProvider.ts:56
```

--------------------------------

### Add and Update Todo Items with SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/intro.md

Demonstrates basic CRUD operations for a todo list using SyncedStore. It shows how to add a new todo item and how to mark an existing one as completed.

```typescript
// add a todo
store.todos.push({ completed: false, title: "Get groceries" });

// set todo to completed
store.todos[0].completed = true;
```

--------------------------------

### Enable MobX Bindings - enableMobxBindings

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Integrates SyncedStore with MobX, allowing for reactive data management. It requires an instance of MobX as input and returns void. This function is located in observableProvider.ts.

```typescript
function enableMobxBindings(mobx: any): void;
```

--------------------------------

### Collaborative Editing with SyncedText (Root)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/text.md

Illustrates how to define a SyncedText instance directly on the root of a SyncedStore, providing immediate access for collaborative editing. The SyncedText instance is initially empty until text is added.

```javascript
import { SyncedText } from "@syncedstore/core";

export const store = syncedStore({ myText: "text" });

// now, other users can simultaneously edit text by calling `insert` and `delete` methods

store.myText.insert(0, "Hello world");
```

--------------------------------

### ProseMirror Integration with SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/richtext.md

Demonstrates how to set up a ProseMirror editor with SyncedStore using the y-prosemirror plugin. This involves initializing a Y.Doc, creating a SyncedStore instance, and passing the store fragment to the ySyncPlugin during editor state creation.

```typescript
import syncedStore from "@syncedstore/core";
import { ySyncPlugin } from "y-prosemirror";

const doc = new Y.Doc();
export const store = syncedStore({ fragment: "xml" });

// When you set up your ProseMirror instance,
// hook up store.fragment to the y-prosemirror plugin
EditorState.create({
  plugins: [
    ySyncPlugin(store.fragment),
    // ... other plugins
  ],
  // ... remaining prosemirror setup
});
```

--------------------------------

### Enable MobX Bindings in SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/mobx.md

This snippet demonstrates how to enable MobX bindings for SyncedStore. It imports necessary functions from '@syncedstore/core' and the 'mobx' library, then calls 'enableMobxBindings' to integrate them.

```typescript
import * as mobx from "mobx";
import { enableMobxBindings } from "@syncedstore/core";

enableMobxBindings(mobx);
```

--------------------------------

### syncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Creates a SyncedStore store with a defined shape.

```APIDOC
## syncedStore<T>

### Description
Create a SyncedStore store.

### Method
N/A (Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
* `shape` (T) - Required - The shape of the store.
* `doc` (DocTypeDescription) - Optional - An existing Yjs document to use.

### Request Example
```json
{
  "shape": "T",
  "doc": "DocTypeDescription"
}
```

### Response
#### Success Response (MappedTypeDescription<T>)
* `MappedTypeDescription<T>` - The created SyncedStore instance.

#### Response Example
```json
{
  "returns": "MappedTypeDescription<T>"
}
```

### Defined in
N/A
```

--------------------------------

### Tiptap Editor with Syncedstore Collaboration (TypeScript/React)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/richtext.md

This code implements a collaborative rich text editor using Tiptap, React, and Syncedstore. It leverages Tiptap extensions for basic formatting, placeholders, and WebRTC-based collaboration. The editor integrates with a provided 'store' and 'webrtcProvider' for managing shared document state. It includes a MenuBar component for common text editing actions like bold, italic, headings, lists, and more.

```typescript
import React, { useState, useCallback, useEffect } from "react";
import { store, webrtcProvider } from "./store";

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Placeholder from "@tiptap/extension-placeholder";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";

const colors = ["#958DF1", "#F98181", "#FBBC88", "#FAF594", "#70CFF8", "#94FADB", "#B9F18D"];
const names = ["Lea Thompson", "Cyndi Lauper", "Tom Cruise", "Madonna"];

const getRandomElement = (list) => list[Math.floor(Math.random() * list.length)];
const getRandomColor = () => getRandomElement(colors);
const getRandomName = () => getRandomElement(names);

export default () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Placeholder.configure({
        placeholder: "Write something …",
      }),
      Collaboration.configure({
        fragment: store.fragment,
      }),
      CollaborationCursor.configure({
        provider: webrtcProvider,
        user: { name: getRandomName(), color: getRandomColor() },
      }),
    ],
  });

  return (
    <div className="editor">
      <MenuBar editor={editor} />
      <EditorContent editor={editor} />
    </div>
  );
};

const MenuBar = ({ editor }) => {
  if (!editor) {
    return null;
  }

  return (
    <>
      <button
        onClick={() => editor.chain().focus().toggleBold().run()}
        className={editor.isActive("bold") ? "is-active" : ""}
      >
        bold
      </button>
      <button
        onClick={() => editor.chain().focus().toggleItalic().run()}
        className={editor.isActive("italic") ? "is-active" : ""}
      >
        italic
      </button>
      <button
        onClick={() => editor.chain().focus().toggleStrike().run()}
        className={editor.isActive("strike") ? "is-active" : ""}
      >
        strike
      </button>
      <button
        onClick={() => editor.chain().focus().toggleCode().run()}
        className={editor.isActive("code") ? "is-active" : ""}
      >
        code
      </button>
      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>clear marks</button>
      <button onClick={() => editor.chain().focus().clearNodes().run()}>clear nodes</button>
      <button
        onClick={() => editor.chain().focus().setParagraph().run()}
        className={editor.isActive("paragraph") ? "is-active" : ""}
      >
        paragraph
      </button>
      <button
        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
        className={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
      >
        h1
      </button>
      <button
        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
        className={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
      >
        h2
      </button>
      <button
        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
        className={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
      >
        h3
      </button>
      <button
        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
        className={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
      >
        h4
      </button>
      <button
        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
        className={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
      >
        h5
      </button>
      <button
        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
        className={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
      >
        h6
      </button>
      <button
        onClick={() => editor.chain().focus().toggleBulletList().run()}
        className={editor.isActive("bulletList") ? "is-active" : ""}
      >
        bullet list
      </button>
      <button
        onClick={() => editor.chain().focus().toggleOrderedList().run()}
        className={editor.isActive("orderedList") ? "is-active" : ""}
      >
        ordered list
      </button>
      <button
        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
        className={editor.isActive("codeBlock") ? "is-active" : ""}
      >
        code block
      </button>
      <button
        onClick={() => editor.chain().focus().toggleBlockquote().run()}
        className={editor.isActive("blockquote") ? "is-active" : ""}
      >
        blockquote
      </button>
      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>horizontal rule</button>
      <button onClick={() => editor.chain().focus().setHardBreak().run()}>hard break</button>
      <button onClick={() => editor.chain().focus().undo().run()}>undo</button>
      <button onClick={() => editor.chain().focus().redo().run()}>redo</button>
    </>
  );
};

```

--------------------------------

### Enable Vue Bindings - enableVueBindings

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Enables integration with Vue 3 for reactive data synchronization. It accepts a Vue or Vue reactivity instance and returns void. This function is also found in observableProvider.ts.

```typescript
function enableVueBindings(vue: any): void;
```

--------------------------------

### Create Svelte Store from SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/svelte.md

This snippet demonstrates how to create a Svelte Store from an existing SyncedStore instance using the `svelteSyncedStore` function from the `@syncedstore/svelte` package. This allows you to use the SyncedStore data within your Svelte components like any other Svelte store, including data binding.

```javascript
import { syncedStore, getYjsValue } from "@syncedstore/core";
import { svelteSyncedStore } from "@syncedstore/svelte";

// Create your SyncedStore store
const todoStore = syncedStore({ todos: [] });

// Create Svelte Store for use in your components.
// You can treat this like any other store, including `bind`.
export const store = svelteSyncedStore(todoStore);
```

--------------------------------

### boxed

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Creates a boxed value of a given type.

```APIDOC
## boxed<T>

### Description
Creates a boxed value of a given type.

### Method
N/A (Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
* `value` (T) - Required - The value to box.

### Request Example
```json
{
  "value": "T"
}
```

### Response
#### Success Response (Box<T>)
* `Box<T>` - The boxed value.

#### Response Example
```json
{
  "returns": "Box<T>"
}
```

### Defined in
packages/core/src/boxed.ts:10
```

--------------------------------

### WebSocket Sync Provider for SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/sync-providers.md

Illustrates the integration of a y-websocket provider for synchronizing data through a WebSocket server. This includes setting up the SyncedStore, obtaining the Yjs document, and connecting to a specified WebSocket server endpoint.

```javascript
import { syncedStore, getYjsDoc } from "@syncedstore/core";
import { WebsocketProvider } from "y-websocket";

export const store = syncedStore({ arrayData: [] });

const doc = getYjsDoc(store);

// Start a y-websocket server, e.g.: HOST=localhost PORT=1234 npx y-websocket-server

const wsProvider = new WebsocketProvider("ws://localhost:1234", "my-roomname", doc);
```

--------------------------------

### WebRTC Sync Provider for SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/sync-providers.md

Demonstrates how to use y-webrtc to propagate document updates peer-to-peer using WebRTC. It requires the core syncedStore and WebrtcProvider, and establishes a connection using a document ID.

```javascript
import { syncedStore, getYjsDoc } from "@syncedstore/core";
import { WebrtcProvider } from "y-webrtc";

export const store = syncedStore({ arrayData: [] });

const doc = getYjsDoc(store);
const webrtcProvider = new WebrpcProvider("my-document-id", doc);
```

--------------------------------

### observeDeep

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Registers a listener for deep changes within a SyncedStore object.

```APIDOC
## observeDeep

### Description
Register a listener for when any changes to `object` or its nested objects occur.

### Method
N/A (Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
* `object` (any) - Required - The synced object (store, object, map, or Yjs value to observe).
* `handler` - Required - The callback to be raised.

### Request Example
```json
{
  "object": "any",
  "handler": "() => void"
}
```

### Response
#### Success Response (() => void)
* `fn` - A function to dispose (unregister) the handler.

#### Response Example
```json
{
  "returns": "() => void"
}
```

### Defined in
packages/core/src/index.ts:42
```

--------------------------------

### areSame

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Checks if two objects are the same, even if they are wrapped by SyncedStore's Proxy.

```APIDOC
## areSame

### Description
Check whether two objects represent the same value. A strict equality (===) check doesn't always work, because SyncedStore can wrap the object with a Proxy depending on where you retrieved it.

### Method
N/A (Function)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
* `objectA` (any) - Required - Object to compare with objectB
* `objectB` (any) - Required - Object to compare with objectA

### Request Example
```json
{
  "objectA": "any",
  "objectB": "any"
}
```

### Response
#### Success Response (boolean)
* `boolean` - true if they represent the same object, false otherwise

#### Response Example
```json
{
  "returns": "boolean"
}
```

### Defined in
packages/core/src/index.ts:102
```

--------------------------------

### Create SyncedStore - syncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Initializes a SyncedStore instance with a given shape and an optional Yjs document. This is the primary function for creating a synchronized data store. It uses generic types for shape and returns a MappedTypeDescription.

```typescript
function syncedStore<T extends DocTypeDescription>(shape, doc?: Y.Doc): MappedTypeDescription<T>;
```

--------------------------------

### React Todo App with SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/react.md

A basic React todo application demonstrating the use of the useSyncedStore hook to manage and update a list of todo items. It allows adding new todos and marking them as completed.

```typescript
import React from "react";
import { useSyncedStore } from "@syncedstore/react";
import { store } from "./store";

export default function App() {
  const state = useSyncedStore(store);

  return (
    <div>
      <p>Todo items:</p>
      <ul>
        {state.todos.map((todo, i) => {
          return (
            <li key={i} style={{ textDecoration: todo.completed ? "line-through" : "" }}>
              <label>
                <input type="checkbox" checked={todo.completed} onClick={() => (todo.completed = !todo.completed)} />
                {todo.title}
              </label>
            </li>
          );
        })}
      </ul>
      <input
        placeholder="Enter a todo item and hit enter"
        type="text"
        onKeyPress={(event) => {
          if (event.key === "Enter") {
            const target = event.target as HTMLInputElement;
            // Add a todo item using the text added in the textfield
            state.todos.push({ completed: false, title: target.value });
            target.value = "";
          }
        }}
        style={{ width: "200px", maxWidth: "100%" }}
      />
    </div>
  );
}
```

--------------------------------

### useSyncedStore Hook Usage

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/react.md

Demonstrates the basic syntax for using the useSyncedStore hook in a React component to access and manage the application's state. The hook takes the store object as its parameter.

```typescript
const state = useSyncedStore(store);
```

--------------------------------

### getYjsDoc

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Accesses the internal Yjs Document associated with a SyncedStore.

```APIDOC
## getYjsDoc<T>

### Description
Access the internal Yjs Doc.

### Method
N/A (Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
* `store` (T) - Required - A store returned by `syncedStore`.

### Request Example
```json
{
  "store": "T"
}
```

### Response
#### Success Response (Y.Doc)
* `Y.Doc` - The Yjs doc (Y.Doc) underneath.

#### Response Example
```json
{
  "returns": "Y.Doc"
}
```

### Defined in
packages/core/src/index.ts:67
```

--------------------------------

### Collaborative Editing with SyncedText (Nested)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/text.md

Shows how to add a SyncedText instance as a property to an existing SyncedStore object, enabling collaborative text editing. Users can modify the text using insert and delete methods.

```javascript
import { SyncedText } from "@syncedstore/core";

export const store = syncedStore({ myObject: {} });
store.myObject.myText = new SyncedText("hello");

// now, other users can simultaneously edit text by calling `insert` and `delete` methods

store.myObject.myText.insert(0, "My name is Bob, ");
```

--------------------------------

### Store Plain Strings in SyncedStore

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/text.md

Demonstrates how to store and share plain strings within SyncedStore objects and arrays. Note that this method does not support simultaneous editing by multiple users.

```javascript
export const store = syncedStore({ myArray: [], myObject: {} });
store.myArray.push("first string");
store.myObject.property = "string value";
```

--------------------------------

### Add and Modify Todo Items (TypeScript)

Source: https://github.com/yousefed/syncedstore/blob/main/README.md

Demonstrates how to add a new todo item to a list and modify an existing one using the SyncedStore API. This showcases the simple data manipulation capabilities for collaborative state management.

```typescript
store.todos.push({ completed: false, title: "Get groceries" });

// set todo to completed
store.todos[0].completed = true;
```

--------------------------------

### Define Store with Boxed Array

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/boxed.md

Demonstrates how to initialize a SyncedStore with an array of boxed objects. The `Box` type from `@syncedstore/core` is used to indicate that the array elements should be treated as single collaborative units.

```typescript
import { syncedStore, Box, boxed } from "@syncedstore/core";

export const store = syncedStore(doc, { todos: [] as Box<Todo>[] });
```

--------------------------------

### Access Yjs Doc - getYjsDoc

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Retrieves the underlying Yjs document associated with a SyncedStore instance. This allows for direct interaction with Yjs functionalities. It takes a store of any type T and returns a Y.Doc object.

```typescript
function getYjsDoc<T>(store: T): Y.Doc;
```

--------------------------------

### getYjsValue

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Accesses the internal Yjs value backing a SyncedStore object.

```APIDOC
## getYjsValue

### Description
Access the internal Yjs value that backs the syncing of the passed in object.

### Method
N/A (Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
* `object` (any) - Required - A value retrieved from the store.

### Request Example
```json
{
  "object": "any"
}
```

### Response
#### Success Response (Y.Doc | Y.AbstractType<any> | undefined)
* `Y.Doc` | `Y.AbstractType<any>` | `undefined` - The Yjs value underneath. This can be a Y.Doc, Y.Array, Y.Map or other Y-type based on the value passed in.

#### Response Example
```json
{
  "returns": "Y.Doc | Y.AbstractType<any> | undefined"
}
```

### Defined in
packages/core/src/index.ts:81
```

--------------------------------

### filterArray

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Filters a SyncedStore array based on a provided predicate.

```APIDOC
## filterArray<T>

### Description
Filter a SyncedStore array.

### Method
N/A (Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
* `arr` (T[]) - Required - Array to filter.
* `filter` - Required - Predicate to filter the array `arr` by.

### Request Example
```json
{
  "arr": "T[]",
  "filter": "(obj: T) => boolean"
}
```

### Response
#### Success Response (void)
* `void` - This function does not return a value.

#### Response Example
```json
{
  "returns": "void"
}
```

### Defined in
packages/core/src/util.ts:6
```

--------------------------------

### Add and Access Boxed Values

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/boxed.md

Shows how to add new boxed items to the store using the `boxed()` function and how to access the internal value of a boxed item using the `.value` property. This is crucial for interacting with data stored as boxed values.

```typescript
// ...

store.todos.push(boxed({ title: "groceries", completed: false }));

// Use `value` to get the contents of the box
const completed = store.todos[0].value.completed;
```

--------------------------------

### Access Yjs Objects from SyncedStore State (TypeScript)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/yjs.md

Demonstrates how to retrieve Yjs objects (Y.Doc, Y.Array, Y.Map) from a SyncedStore state object using the `getYjsValue` function. This allows direct interaction with Yjs functionalities if needed.

```typescript
import React from "react";
import { useSyncedStore } from "@syncedstore/react";
import { boxed, getYjsValue } from "@syncedstore/core";
import { store } from "./store"; // the store we defined above
import { ObjectInspector } from "react-inspector";

export default function App() {
  const state = useSyncedStore(store);

  const doc = getYjsValue(state);
  const array = getYjsValue(state.todos);
  const map = state.todos.length ? getYjsValue(state.todos[0]) : undefined;

  return (
    <div>
      <p>Todo items:</p>
      <p>{JSON.stringify(state)}</p>

      <ObjectInspector data={{ doc, array, map }} />
      <br />
      <div>
        <button
          onClick={() => {
            state.todos.push({ title: "This is a todo", completed: false });
          }}
        >
          Add a todo
        </button>
      </div>
    </div>
  );
}
```

--------------------------------

### Observe Deep Changes - observeDeep

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Registers a handler to be called whenever changes occur within a SyncedStore object or its nested structures. It accepts the object to observe and a callback function. The function returns another function that can be called to unregister the handler.

```typescript
function observeDeep(object: any, handler: () => void): () => void;
function observeDeep(): void;
```

--------------------------------

### Check Object Equality - areSame

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Compares two objects to determine if they represent the same value. This is useful because SyncedStore may wrap objects in Proxies, which can affect strict equality checks. It takes two any type objects as input and returns a boolean indicating equality.

```typescript
function areSame(objectA: any, objectB: any): boolean;
```

--------------------------------

### Filter SyncedStore Array - filterArray

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Filters an array managed by SyncedStore based on a provided predicate function. It takes the array and a filter function as arguments and returns void. The filtering logic is defined in the util.ts file.

```typescript
function filterArray<T>(arr: T[], filter: (obj: T) => boolean): void;
```

--------------------------------

### Box Value - boxed

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/api/index.md

Creates a boxed representation of a value, ensuring it can be properly tracked and synchronized. It accepts a generic type T that extends JSONValue and returns a Box of that type. This function is defined in the boxed.ts file.

```typescript
function boxed<T extends JSONValue>(value: T): Box<T>;
```

--------------------------------

### Update Boxed Values (Correctly)

Source: https://github.com/yousefed/syncedstore/blob/main/docs/docs/advanced/boxed.md

Illustrates the correct method for updating a boxed value in the store, which involves replacing the entire item using `splice`. Attempting to mutate individual properties of a boxed item directly will not sync.

```typescript
// GOOD:
store.todos.splice(0, 1, boxed({ title: "groceries", completed: true }));

// BAD, this won't sync as individual properties of a boxed item are not collaborative
// store.todos[0].completed = true;
```
Tokens:
Raw