Nuxt Editor Template

A rich text editor template built with Nuxt UI and TipTap, showcasing the powerful UEditor component with advanced editing capabilities.

• Live demo
• Documentation

Features

• Rich Text Editing - Full formatting support with headings, lists, blockquotes, and code blocks
• Bubble & Fixed Toolbars - Contextual toolbars that adapt to your selection
• Drag Handle - Easily reorder, duplicate, or delete content blocks
• Slash Commands - Type / to access quick insertion commands
• Image Upload - Custom image upload node with replace and delete actions
• Mentions - @mention support with user suggestions
• Emoji Picker - Full GitHub emoji set with :emoji: syntax
• Text Alignment - Left, center, right, and justify alignment options
• Markdown Support - Content type set to markdown for easy serialization
• Real-time Collaboration - Optional collaborative editing powered by PartyKit

Quick Start

npm create nuxt@latest -- -t github:nuxt-ui-templates/editor

Deploy your own

Setup

Make sure to install the dependencies:

pnpm install

Collaboration (Optional)

This template includes optional real-time collaboration powered by Y.js, a CRDT framework for building collaborative applications. This example uses PartyKit as the Y.js provider, but you can swap it for alternatives like Liveblocks or Tiptap Collaboration.

To enable collaboration with PartyKit:

1. Create and deploy a PartyKit server following the PartyKit Quickstart:

npm create partykit@latest
npx partykit deploy

2. Set your PartyKit host in .env:

NUXT_PUBLIC_PARTYKIT_HOST=your-project.username.partykit.dev

3. Add ?room=your-room-name to the URL to collaborate. All users with the same room name will edit together in real-time.

Without the environment variable or ?room= parameter, the editor works standalone without collaboration.

Development Server

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

pnpm dev

Production

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview

Check out the deployment documentation for more information.