RichEditor Phase-2 Upgrade Demo

This page demonstrates the premium rendering of all TipTap editor features on the public website.

Headings & Alignment

This text is aligned to the left.

This text is aligned to the center.

This text is aligned to the right.

This text is justified. Justified text extends from margin to margin, making clean layouts.

Lists & Checklists

• Unordered list item 1
• Unordered list item 2
  • Nested unordered list item

1. Ordered list item 1
2. Ordered list item 2
   1. Nested ordered list item

• Task 1 (Completed)
• Task 2 (Pending)

Text Colors & Highlights

You can use Red Text, Blue Text, and Green Text.

Highlights are also supported: Yellow Highlight, Green Highlight, Blue Highlight, and Pink Highlight.

Blockquotes

"The best way to predict the future is to create it." – Abraham Lincoln

Interactive Tabs

Callout Boxes

Accordion (Collapsible Details)

Content Cards

Feature Card Title

Interactive Chart.js Widgets

Mermaid Flowchart Diagrams

graph TD
    A[Start] --> B(Verify Code)
    B --> C{Correct?}
    C -- Yes --> D[Success]
    C -- No --> E[Retry]
    E --> B

Syntax Highlighted Code Blocks

// JavaScript Hello World
function sayHello() {
    console.log("Hello, World!");
}
sayHello();

// PHP Hello World
class Greeter {
    public function greet() {
        return "Hello from PHP!";
    }
}
$g = new Greeter();
echo $g->greet();

Buttons

Tables

Media Embeds (Images, Video, YouTube)