A comprehensive, hands-on tutorial for learning TipTap rich text editor from basic setup to advanced customization. This tutorial follows a progressive learning approach with 12 structured lessons, each building on the previous concepts.
- Basic Setup: Editor configuration, StarterKit integration
- Content Management: Document structure, schema, nodes and marks
- Interactive Features: Commands, input rules, event handling
- UI Components: Custom menus, toolbars, suggestions, and typeahead
- Extension Development: Custom marks, nodes, and ProseMirror integration
- Production Ready: Serialization, performance, testing patterns
- Basic knowledge of React and TypeScript
- Familiarity with modern JavaScript (ES6+)
- Understanding of HTML/CSS fundamentals
- Node.js 18+ installed on your machine
git clone https://github.com/patocallaghan/tiptap-tutorial.git
cd tiptap-tutorial
pnpm installpnpm devOpen http://localhost:5173 to view the tutorial in your browser.
# Run all tests
pnpm test
# Run tests in watch mode
pnpm test:watch
# Run tests for a specific lesson
pnpm test lesson-01Each lesson follows a consistent structure:
- Learning Objectives: Clear goals for what you'll achieve
- Prerequisites: Required knowledge from previous lessons
- TODO Implementation: Hands-on coding exercises
- Key Concepts: Essential knowledge points
- Tests: Verification of your implementation
- README Guide: Step-by-step implementation instructions
Learn TipTap fundamentals, useEditor hook, and StarterKit configuration.
- Editor instance creation and configuration
- Basic controls and editor methods
- Placeholder setup and content management
Understand ProseMirror's document model, schema validation, and content structure.
- Document structure and JSON representation
- Schema validation and content rules
- Nodes vs marks distinction
Master the command system for programmatic content manipulation.
- Command chaining and execution
- Position-based operations
- Selection handling and content insertion
Implement auto-formatting with input rules and paste handling.
- Markdown-style shortcuts
- Pattern matching and transformation
- Paste event handling
Handle editor events, transactions, and lifecycle management.
- Event handling (focus, blur, update)
- Transaction hooks and monitoring
- Editor lifecycle management
Build interactive toolbars, bubble menus, and floating menus.
- Formatting toolbar creation
- BubbleMenu for selection-based controls
- FloatingMenu for empty paragraphs
Implement mentions, slash commands, and autocomplete functionality.
- @mention system with typeahead
- Custom suggestion rendering
- Keyboard navigation and selection
Deep dive into built-in extensions and selective loading.
- Extension configuration options
- Performance optimization
- Custom StarterKit builds
Create custom marks for highlighting, annotations, and inline formatting.
- Mark schema definition
- Custom mark extensions
- Styling and interaction patterns
Build custom nodes for special content blocks and interactive elements.
- Node schema and structure
- React node views
- Interactive block elements
Access ProseMirror APIs directly for advanced customization.
- Direct ProseMirror usage
- Custom plugins and decorations
- Schema manipulation
Implement serialization, persistence, and production optimization.
- JSON/HTML conversion
- Auto-save functionality
- Performance optimization
- Testing strategies
Each lesson includes comprehensive tests to verify your implementation:
# Run specific lesson tests
pnpm test lesson-01
pnpm test lesson-05
pnpm test lesson-12
# Run all tests
pnpm test:run
# Interactive test UI
pnpm test:uisrc/
├── components/ # Shared components
│ └── layout.tsx # Main layout with navigation
├── features/ # Feature-based organization
│ ├── home/ # Tutorial home page
│ ├── lesson-01/ # Basic Editor Setup
│ ├── lesson-02/ # Content & Document Structure
│ ├── ... # Additional lessons
│ └── lesson-12/ # Production Ready
├── lib/ # Utility functions
│ └── cn.ts # Class name utility
└── test/ # Test configuration
└── setup.ts # Test setup
# Start development server
pnpm dev
# Build for production
pnpm build
# Preview production build
pnpm preview
# Run linting
pnpm lint
# Run all tests
pnpm test
# Run tests in watch mode
pnpm test:watch
# Run tests with UI
pnpm test:uiStart with Lesson 01 and progress sequentially through all lessons. Each lesson builds upon previous concepts, so don't skip ahead.
If you're familiar with rich text editors, you might start at Lesson 05 (Events) or Lesson 06 (Menus), but we recommend reviewing earlier lessons for TipTap-specific concepts.
Jump to Lessons 09-12 for custom extension development and production patterns, but ensure you understand TipTap's architecture from earlier lessons.
After completing all lessons and passing the tests, you'll have:
- Built a comprehensive understanding of TipTap architecture
- Created custom extensions (marks and nodes)
- Implemented advanced UI patterns (menus, suggestions)
- Learned production deployment strategies
- Mastered performance optimization techniques
We welcome contributions! Please see our Contributing Guide for details.
- Additional lesson content or exercises
- Bug fixes in existing lessons
- Performance improvements
- Documentation enhancements
- New testing scenarios
This tutorial is licensed under the MIT License. See LICENSE for details.
- TipTap team for creating an excellent rich text editor
- ProseMirror for the foundational technology
- React community for the ecosystem and patterns
Found a bug or have a suggestion? Please open an issue on GitHub.
Happy Learning! 🚀
Start your journey with Lesson 01: Basic Editor Setup and build your way up to becoming a TipTap expert.