Nuxt + TipTap

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

Zero-config deploys to everywhere!

How it works?

undefinedClient:undefined

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

undefinedServer:undefined

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

undefinedClient:undefined

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

undefinedServer:undefined

• undefinedNitro: Server toolkit used by Nuxt for runtime agnostic server development and deployments.
• undefinedCrossws: Cross-platform WebSocket server integrated into Nitro.
• undefinedyjs: A CRDT library for live collaborative editing.
• undefinedy-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.