Nuxt AI-powered Notion-like WYSIWYG editor

Nuxt AI-powered Notion-like WYSIWYG editor - Vercel

Nuxt Editor Template

Notion-like WYSIWYG editor with AI-powered completions and real-time collaboration in Vue & Nuxt. Built with Nuxt UI and TipTap, showcasing the powerful Editor component with advanced editing capabilities.

Features

Rich Text Editing - Full formatting support with headings, lists, blockquotes, and code blocks
Tables - Insert and edit tables with row/column controls and cell selection
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 powered by NuxtHub with Vercel Blob
Mentions - @mention support with user suggestions
Emoji Picker - Full GitHub emoji set with :emoji: syntax
Markdown Support - Content type set to markdown for easy serialization
AI-powered Features - Inline completions and text transformations powered by Vercel AI SDK
Real-time Collaboration - Optional collaborative editing powered by PartyKit

Quick Start

npm create nuxt@latest -- -t ui/editor

Deploy your own

Setup

Make sure to install the dependencies:

pnpm install

AI Integration (Optional)

This template includes AI-powered writing assistance using the Vercel AI SDK and its useCompletion composable for streaming text generation with support for multiple providers through Vercel AI Gateway. When deployed on Vercel, the AI Gateway is configured automatically.

AI Features:

Inline Completions - Trigger AI suggestions with ⌘J, accept with Tab
Continue Writing - Extend your content from the cursor position
Fix Spelling & Grammar - Automatically correct selected text
Extend/Reduce Text - Make selected content longer or shorter
Simplify - Rewrite complex text in simpler terms
Summarize - Generate a summary of selected content
Translate - Translate selected text to English, French, Spanish, or German

For local development, set your API key in .env:

AI_GATEWAY_API_KEY=<your-vercel-ai-gateway-api-key>

[!TIP] With Vercel AI Gateway, you don't need individual API keys for OpenAI, Anthropic, etc. It provides a unified API to access hundreds of models through a single endpoint with automatic load balancing, fallbacks, and spend monitoring.

Blob Storage (Optional)

This template uses NuxtHub Blob for image uploads, which supports multiple storage drivers:

Local filesystem (default for development, stored in .data/blob)
Vercel Blob (auto-configured when deployed to Vercel)
Cloudflare R2 (when deployed to Cloudflare)
Amazon S3 (with manual configuration)

For Vercel Blob, assign a Blob Store to your project from the Vercel dashboard (Project → Storage), then set the token for local development:

BLOB_READ_WRITE_TOKEN=<your-vercel-blob-token>

[!NOTE] See the NuxtHub Blob documentation for configuring other storage drivers.

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:

Create and deploy a PartyKit server following the PartyKit Quickstart:

npm create partykit@latest
npx partykit deploy

Set your PartyKit host in .env:

NUXT_PUBLIC_PARTYKIT_HOST=your-project.username.partykit.dev

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.

Renovate integration

Install Renovate GitHub app on your repository and you are good to go.