Skip to main content

​
Introduction to Yoopta Editor

Yoopta Editor is a free, open-source rich-text editor built for React applications. Create editors as powerful as Notion, Craft, or Medium — or go further and build a CMS, landing page builder, or website builder on top of it.

Why Yoopta?

Built from real pain — no more wrestling with complex APIs, fighting opinionated UI, or writing glue code. Yoopta gives you a headless core for full control, 20+ ready-made plugins, and pre-built UI components so you can launch quickly.

​
Key benefits

Headless core

Full control over UI with optional pre-built theme presets (@yoopta/themes-shadcn available now, @yoopta/themes-material coming soon)

20+ plugins ready

Paragraph, headings, lists, code, image, video, table, callout, accordion, tabs, steps, divider, embed, file, link, mention, carousel, and more

Pre-built UI components

FloatingToolbar, SlashCommandMenu, BlockOptions, FloatingBlockActions — get started without building everything from scratch

Powerful APIs

Programmatic control with Blocks, Elements, and Marks APIs. Insert, update, delete blocks and elements with ease

​
Features

  • Easy setup — Sensible defaults; pass plugins and marks to createYooptaEditor, then render <YooptaEditor />
  • TypeScript support — Full type definitions for editor, blocks, elements, and plugins
  • Undo/redo — Built-in history with editor.undo() / editor.redo()
  • Keyboard shortcuts — Customizable hotkeys; Tab/Shift+Tab for indent/outdent
  • Read-only mode — Use the same editor instance for viewing or editing
  • Drag and drop — Reorder blocks with nested depth support
  • Selection box — Multi-block selection for copy, delete, or bulk operations
  • Slash command — Type / for quick block insertion
  • Inline elements — Links, @mentions, and custom inline nodes within text
  • Action menu — Floating block actions (+, drag handle, block options)
  • Export formats — HTML, Markdown, plain text, email template
  • Real-time collaboration — Multi-user editing with Yjs CRDT, remote cursors, and presence awareness via @yoopta/collaboration
  • Events — Listen to change, focus, blur, path-change, block:copy events

​
Quick example

Get started with just a few lines of code: 
import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';
import Headings from '@yoopta/headings';
import { Bold, Italic, Underline } from '@yoopta/marks';

const PLUGINS = [Paragraph, Headings.HeadingOne, Headings.HeadingTwo];
const MARKS = [Bold, Italic, Underline];

export default function Editor() {
  const editor = useMemo(
    () => createYooptaEditor({ plugins: PLUGINS, marks: MARKS }),
    []
  );

  return (
    <YooptaEditor
      editor={editor}
      placeholder="Type / to open menu"
      style={{ width: 750 }}
    />
  );
}

​
What you can build

Yoopta Editor is flexible enough for many use cases:

Full-featured editors

Complete editor with toolbar, slash menu, block actions, drag & drop, and mentions

CMS / Website builder

Visual page builder with drag-and-drop blocks and live preview

Document editors

Word-like editor with formatting, tables, and export capabilities

Email builders

Email composition with templates, signatures, and HTML export

​
Next steps

Installation

Install Yoopta Editor and its dependencies

Quick start

Build your first editor in under 5 minutes

Examples

Explore live examples and demos

API reference

Learn about the editor API and methods
If Yoopta saves you time, consider starring the repo or sponsoring the project. It keeps the project alive and helps fund continued development.

Build docs developers (and LLMs) love

Get started for freeTalk to us