Rich Text Editor Features Demo

Welcome to Rich Text Editor

This comprehensive demo showcases all the powerful features of a modern rich text editor built with Tiptap and Radix UI. Explore text formatting, media embedding, and advanced content structures.

Text Formatting

Rich text editors support various text styles: bold text, italic text, underlined text, strikethrough, and inline code.

You can also use _subscript and ^superscript, or combine styles: bold and italic, bold and underline.

Headings Structure

Organize your content with multiple heading levels:

This is Heading 3

Headings help create a clear document hierarchy.

This is Heading 4

Use appropriate heading levels for better structure.

This is Heading 5

Even smaller headings are supported for detailed outlines.

Lists

Unordered Lists

• First item in the list

• Second item with bold text

• Third item with nested list:

  • Nested item 1

  • Nested item 2 with italic

  • Nested item 3

• Fourth item with inline code

Ordered Lists

1. First step: Install dependencies

2. Second step: Configure the editor

3. Third step: Customize extensions

   1. Add StarterKit

   2. Configure Image extension

   3. Set up Table support

4. Final step: Deploy your application

Text Alignment

This paragraph is left-aligned (default alignment for most text).

This paragraph is center-aligned, perfect for titles or important statements.

This paragraph is right-aligned, often used for signatures or timestamps.

This paragraph uses justified alignment. When you have longer text content, justified alignment distributes the words evenly across the line width, creating clean and professional-looking edges on both the left and right sides of the text block.

Text Styling

Customize your text with custom colors and background highlights to emphasize important content.

You can combine both: Blue background with white text creates a tag-like appearance.

Links

Add external links to reference other resources, or create internal links for navigation within your document.

Links can also be combined with text formatting for better visibility!

Images

Images can be embedded in two ways:

Standalone Images

Simple image without caption:

Images with Captions

Images wrapped in figure with caption:

Blockquotes

"The best way to predict the future is to invent it." - Alan Kay

Blockquotes are perfect for highlighting important quotes, testimonials, or citations. They can contain formatted text, multiple paragraphs, and even other elements.

This is the second paragraph in the blockquote, demonstrating multi-paragraph support.

Code Blocks

The editor supports syntax-highlighted code blocks with language selection:

JavaScript Example

// Function to create a greeting
function greetUser(name) {
  const greeting = "Hello, " + name + "! Welcome to Tiptap Editor.";
  console.log(greeting);
  return greeting;
}

// Usage example
const message = greetUser('World');
console.log(message);

React Component Example

import { useRef } from 'react';
import TiptapEditor, { type TiptapEditorRef } from '@/components/tiptap-editor';

export default function MyEditor() {
  const editorRef = useRef<TiptapEditorRef>(null);

  const handleChange = (content: string) => {
    console.log('Content updated:', content);
  };

  return (
    <TiptapEditor
      ref={editorRef}
      output="html"
      minHeight={320}
      onChange={handleChange}
      placeholder="Start typing..."
    />
  );
}

Python Example

def fibonacci(n):
    """Generate Fibonacci sequence up to n terms"""
    a, b = 0, 1
    result = []
    
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    
    return result

# Generate first 10 Fibonacci numbers
numbers = fibonacci(10)
print("Fibonacci sequence: " + str(numbers))

CSS Styling

:root {
  --rte-editor-min-height: 320px;
  --rte-editor-max-height: 640px;
  --rte-editor-max-width: 700px;
}

.editor-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.editor-content:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

Tables

Create and edit tables with cell alignment and formatting:

YouTube Embeds

Embed YouTube videos directly in your content:

Installation Guide

Get started with the editor in just a few steps:

Clone and Install

# Clone the repository
git clone https://github.com.git

# Navigate to project directory
cd next-tiptap

# Install dependencies
pnpm install
# or
npm install
# or
yarn install

Start Development

# Start development server
pnpm dev
# or
npm run dev
# or
yarn dev

Editor Configuration

Here's a complete example of setting up the editor with custom configuration:

import { useRef, useState } from 'react';
import TiptapEditor, { type TiptapEditorRef } from '@/components/tiptap-editor';

export default function MyApp() {
  const editorRef = useRef<TiptapEditorRef>(null);
  const [content, setContent] = useState('');

  const handleChange = (html: string) => {
    setContent(html);
  };

  const handleExport = () => {
    const editor = editorRef.current;
    if (editor) {
      console.log('HTML:', editor.getHTML());
      console.log('JSON:', editor.getJSON());
      console.log('Words:', editor.storage.characterCount.words());
    }
  };

  return (
    <div className="container">
      <TiptapEditor
        ref={editorRef}
        content={content}
        output="html"
        minHeight={320}
        maxHeight={640}
        onChange={handleChange}
        placeholder={{
          paragraph: 'Start typing...',
          imageCaption: 'Add a caption (optional)'
        }}
      />
      <button onClick={handleExport}>Export Content</button>
    </div>
  );
}

Keyboard Shortcuts

The editor supports common keyboard shortcuts for efficient editing:

• Ctrl/Cmd + B - Bold

• Ctrl/Cmd + I - Italic

• Ctrl/Cmd + U - Underline

• Ctrl/Cmd + Shift + S - Strikethrough

• Ctrl/Cmd + E - Inline code

• Ctrl/Cmd + Z - Undo

• Ctrl/Cmd + Shift + Z - Redo

Conclusion

This editor provides a comprehensive set of features for creating rich, engaging content. Whether you're building a blog, documentation site, or content management system, it offers the flexibility and power you need.

Try editing this content to explore all the features! Visit the live demo to see it in action.

Built with ❤️ using Next.js and Tiptap