Skip to content
aq-ui
Back to EditorsEditor

Rich Text Editor

Tiptap JSON editor and static renderer with production formatting, tables, media, mentions, and slash commands.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add rich-text-editor

API reference

Client moduleView full source

Quick start

"use client"

import { RichTextEditor } from "@/components/ui/rich-text-editor"

<RichTextEditor />

Exports

  • createRichTextExtensions function
  • EditorAssetUploadAdapter type
  • RichTextDocument type
  • RichTextEditor const
  • RichTextEditorBubbleMenu function
  • RichTextEditorBubbleMenuProps interface
  • RichTextEditorContent function
  • RichTextEditorContentProps interface
  • RichTextEditorFloatingMenu function
  • RichTextEditorFloatingMenuProps interface
  • RichTextEditorProps interface
  • RichTextEditorStatusBar function
  • RichTextEditorStatusBarProps interface
  • RichTextEditorToolbar function
  • RichTextEditorToolbarProps interface
  • RichTextMentionItem type
  • RichTextMentionProvider type
  • useRichTextEditor function

Registry dependencies

button, code-highlighter, rich-text-html, rich-text-renderer, separator, upload, use-rich-text-editor, utils

Package dependencies

@tiptap/core@^3.30.1, @tiptap/react@^3.30.1, lucide-react@^1.31.0

Files

  • components/ui/rich-text-editor.tsx

Source