Welcome to Yoopta-Editor 🚀

Yoopta-Editor is a free, open-source rich-text editor built for React apps (yeap, we have plans to make it framework-agnostic!). It’s packed with features that let you build an editor as powerful and user-friendly as Notion, Craft, Coda, Medium etc.

Motivation

As a frontend developer, I've tried various WYSIWYG editors, some of them very well-known. I was looking for the best solution for my basic needs:

So, these were my basic requirements. And do you know what my search for such an editor led to? Hair loss on my head. I simply couldn't find an editor that even covered basic UX issues. It was all in vain. In fact, I realized that many modern rich-text editors are actually not rich — they are still low-level, despite being written on top of other low-level libraries. This is why I started developing my own editor Yoopta. My goal is to spare developers from tears and pain. Yoopta will not only provide a high-level ready-to-use editor but will also allow you to extend and customize everything!

Concepts

Let's discuss the key concepts of the editor. Yoopta is built on top of the low-level editor SlateJS. However, instead of the typical approach offered by Slate, I have developed this editor differently. Yoopta Editor uses a block list approach where each block has its own instance of Slate.

Plugins

Plugin is a configuration object that sets the type and defines the elements that will be displayed within it. Within the plugin, basic settings are also established, including shortcuts, display options, custom event handlers, commands API, Slate extensitons and rules for serializing and deserializing content into various formats.

Blocks

Block is an entity created from a plugin if the nodeType of the root element is defined as block or void. Blocks are equipped with a special API for convenient data handling and content manipulation. Each block contains a separate instance of Slate, which stores its state. Blocks are represented as data in editor.children, where each block is saved with information about its state and associated meta data.

Elements

Element is an entity that determines what will be rendered within the block. The structure of an element and its children are determined when creating plugins. Each element can have custom props that expand its functional capabilities. Elements also have their own API for more convenient manipulation and interaction.

Marks

Marks are stylistic text formatters that can be applied to text nodes to alter their appearance or behavior. Each mark is applied across a range of text and can include styles such as bold, italic, underline, code among others.

Tools

Tools are just helpers for more convenient work with the editor.



List of packages

Thus, Yoopta provides the following list of packages:





Features

Examples

Contribution

Yoopta-Editor is MIT-licensed.