Introduction

Ritext is a modern WYSIWYG rich text editor built with Tailwind CSS and powered by Tiptap.

Ritext is a modern WYSIWYG rich text editor for React, built with Tailwind CSS and powered by Tiptap. It provides a clean composable API that lets you build your own editor UI — toolbars, controls, and layouts — without forcing any specific design on you.

Key Features

Puzzle

Headless & Composable

Design your own toolbar and editor layout using clean React components. No opinions, no forced UI.

Palette

Tailwind CSS Powered

Every component is built with Tailwind CSS, making customization as simple as adding a class.

Zap

Tiptap Foundation

Built on Tiptap v3 — the most popular headless rich text editor framework for React.

Package

20+ Extensions

A rich set of pre-built extensions covering text formatting, structure, media, and more.

Code

TypeScript First

Full TypeScript support with complete type definitions for all components and extensions.

Unlock

Zero Lock-in

No heavy UI framework dependencies beyond Tiptap. Bring your own styling system.

Architecture

Ritext is split into two layers:

Core components — Editor, Toolbar, Content, and Renderer form the shell of your editor.
Extensions — Each formatting feature (bold, italic, heading, image, etc.) is a separate, opt-in extension. You assemble exactly the editor you need.

import { Editor, Toolbar, Content } from 'ritext';
import { Bold } from 'ritext/extension/bold';
import { Italic } from 'ritext/extension/italic';
import 'ritext/styles.css';

export default function MyEditor() {
  return (
    <Editor extensions={[Bold, Italic]}>
      <Toolbar />
      <Content />
    </Editor>
  );
}