Nuxt + TipTap

Tiptap editor demo made with Nuxt, Nitro and y-crossws for live collaboration.

Zero-config deploys to everywhere!

How it works?

Client:

We have integrated Tiptap editor with Vue.js with a WebSocket provider for live collaboration. Check components/TiptapEditor.vue for code.

Server:

We add y-crossws in a server route. That's all needed!

server/api/yjs/[slug].ts:

import { createHandler } from "y-crossws";

export default defineWebSocketHandler(createHandler().hooks);

Stack

Client:

• Nuxt: Fullstack Vue.js based framework that makes web development intuitive and powerful.
• Tiptap: Headless editor framework with various extensions, such as collaboration.
• Prosemirror: A toolkit for building rich-text editors. Tiptap uses it as its underlying editor engine.

Server:

• Nitro: Server toolkit used by Nuxt for runtime agnostic server development and deployments.
• Crossws: Cross-platform WebSocket server integrated into Nitro.
• yjs: A CRDT library for live collaborative editing.
• y-crossws: Framework- and platform-agnostic WebSocket server for yjs made with crossws.

Development

Make sure to install the dependencies:

pnpm install

Start the development server on http://localhost:3000:

pnpm run dev

Build the application for production:

pnpm run build # --preset <deployment preset>

Check out the deployment docs for more information.

Credits

Demo made by pi0 based on Tiptap demo.