Skip to main content
Yoopta Editor

​
What is Yoopta Editor?

Yoopta Editor is a free, open-source rich-text editor built for React apps. It’s packed with features that let you build an editor as powerful and user-friendly as Notion, Craft, Coda, Medium, and more. With Yoopta Editor, you can customize everything to fit exactly what you need. Want to tweak the look, add cool features, or craft a completely custom user interface? No problem. Yoopta Editor gives you the flexibility to do it all, making it easy to create the perfect tool for your project.

​
Key Features

Easy Setup

Get started quickly with sensible defaults and minimal configuration

Powerful Plugins

Default list of powerful plugins for all your content needs

Drag & Drop

Intuitive drag and drop support, including nested elements

Fully Customizable

Each plugin can be easily customized and extended

Mobile Friendly

Works seamlessly on mobile devices with touch support

Rich Media Support

Media plugins with optimization and lazy loading

Export Support

Export to markdown, HTML, and plain text

Keyboard Shortcuts

Full keyboard navigation and customizable shortcuts

​
Why Choose Yoopta Editor?

Every aspect of the editor can be customized - from the UI to the behavior of each plugin. Create your own plugins or extend existing ones.
Handles large documents efficiently with automatic lazy loading for media components and optimized performance.
Built with TypeScript, providing excellent type safety and IDE support. Clear API and comprehensive documentation.
Free and open source with MIT license. Active community and regular updates.

​
Quick Example

import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';

const plugins = [Paragraph];

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor(), []);
  const [value, setValue] = useState();

  return <YooptaEditor editor={editor} plugins={plugins} value={value} onChange={setValue} />;
}

​
Ready to Start?

Quickstart

Get up and running in 5 minutes

Installation

Install Yoopta Editor in your project

Examples

Explore live examples and demos

API Reference

Dive into the complete API documentation

​
Community & Support

Join our community to get help, share your projects, and contribute:
If you find Yoopta Editor useful, please give it a ⭐️ star on GitHub!