DEV Community

Cover image for Tiptap Editor - Next.js + Supabase: Full-Stack Rich Text Editing with Backend Integration
jQueryScript
jQueryScript

Posted on

Tiptap Editor - Next.js + Supabase: Full-Stack Rich Text Editing with Backend Integration

Tiptap Editor - Next.js + Supabase: A complete rich text editor implementation with backend storage and image uploads

Here's what it includes:

πŸ“ Full-featured rich text editing with formatting, lists, and headings
πŸ–ΌοΈ Direct image uploads to Supabase Storage buckets
πŸ’Ύ JSON-based content persistence in Supabase database
⌨️ Keyboard shortcuts and markdown syntax support
🎬 Embedded media support for YouTube, Vimeo, Spotify, SoundCloud
πŸ”§ TypeScript and Tailwind CSS for type safety and styling

The repo includes SQL scripts for setting up Supabase tables and storage policies.

Takes about 10 minutes to get running locally with your own Supabase instance.

πŸ‘‰ Blog Post

πŸ‘‰ GitHub Repo

πŸ‘‰ Live Demo

Top comments (0)