+set HOST=localhost&& set PORT=1234&& npx y-websocket
-Navigate to the project directory:
+{% endhighlight %}
+{% highlight bash tabtitle="Powershell" %}
-```bash
-cd quickstart
+$env:HOST="localhost"; $env:PORT="1234"; npx y-websocket
+
+{% endhighlight %}
+{% endtabs %}
+
+You should see the message:
+
+```
+running at 'localhost' on port 1234
```
-## Adding Syncfusion® Vue Block Editor packages
+### Step 4: Create a collaboration configuration file
+
+- Create a shared Yjs document and XML fragment.
+- Create an adapter that provides the Yjs runtime and the shared fragment to the Block Editor.
+- Create a provider that connects users to the same shared document.
+
+Create a `collaboration.ts` file in the src folder and add the following code to configure the Yjs document, provider, collaboration adapter and room allocation logic.
+
+```typescript
+import * as Y from 'yjs';
+import { type YjsAdapter } from '@syncfusion/ej2-blockeditor';
+import { WebsocketProvider } from 'y-websocket';
+
+// Create a shared Yjs document for collaborative editing.
+// Each URL hash gets its own room name (e.g., #wb3lu, #x2p4k)
+const roomName = getRoomName();
+const yDoc = new Y.Doc();
+const yFragment = yDoc.getXmlFragment('blockeditor');
+
+// Create adapter that provides Yjs runtime and shared fragment
+const adapter: YjsAdapter = {
+ yRuntime: Y,
+ yXmlFragment: yFragment
+};
+
+// Connects to local WebSocket server on port 1234 and joins the room based on URL hash.
+// Example: https://yourapp.com/#wb3lu joins room "wb3lu"
+const provider = new WebsocketProvider(
+ 'ws://localhost:1234',
+ roomName,
+ yDoc
+);
+
+/**
+ * Get or create room ID and store in URL hash
+ */
+function getRoomName(): string {
+ if (typeof window === 'undefined') {
+ return 'default';
+ }
+ // Check if room ID exists in URL hash
+ let roomId = getRoomIdFromHash();
+ // If no room ID in hash, generate a new one
+ if (!roomId) {
+ roomId = generateRoomId();
+ setRoomIdInHash(roomId);
+ }
+ return roomId;
+}
+
+/**
+ * Get room ID from URL hash
+ */
+function getRoomIdFromHash(): string | null {
+ const hash = window.location.hash.substring(1);
+ return hash || null;
+}
+
+/**
+ * Generate a unique 5-character room ID
+ */
+function generateRoomId(): string {
+ const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+ let roomId = '';
+ for (let i = 0; i < 5; i++) {
+ roomId += chars.charAt(Math.floor(Math.random() * chars.length));
+ }
+ return roomId;
+}
+
+/**
+ * Set room ID in URL hash
+ */
+function setRoomIdInHash(roomId: string): void {
+ window.location.hash = roomId;
+}
+
+export { yDoc, yFragment, adapter, provider, roomName };
+```
-All Syncfusion® Vue packages are published on [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). Install the Vue Block Editor package by running the following command:
+### Step 5: Set up the Block Editor with collaboration
-```bash
-npm install @syncfusion/ej2-vue-blockeditor --save
+- Enable collaboration by importing the `Collaboration` module from `@syncfusion/ej2-vue-blockeditor` and injecting it into the blockeditor.
+- Use the `collaborationSettings` property of type `CollaborationSettingsModel` to configure collaboration settings for your Block Editor.
+- It provides properties such as `provider`, `enableAwareness`, `adapter` and `versionHistory` which allows to customize the collaboration behavior.
+- Pass the adapter and provider to the Block Editor through the `collaborationSettings` property.
+- Set `enableAwareness` to `true` in `collaborationSettings` property to display remote cursors, text selection overlays, and user details on hover.
+
+In your Vue component file, add the following code. Replace your existing Block Editor setup with this:
+
+```ts
+
+ No snapshots yet...
+