Skip to main content

​
Installation

Yoopta Editor requires a few peer dependencies and core packages to get started. Follow this guide to install everything you need.

​
Prerequisites

Yoopta Editor requires:
  • React 18.2.0 or higher
  • React DOM 18.2.0 or higher
  • Node.js 16 or higher

​
Install peer dependencies

First, install the required peer dependencies. These are the foundation that Yoopta Editor is built on: 
npm install slate slate-react slate-dom
Yoopta Editor is built on top of Slate.js, a customizable framework for building rich text editors. These packages provide the core editing primitives.

​
Install core editor

Next, install the core Yoopta Editor package: 
npm install @yoopta/editor

​
Install plugins

Yoopta Editor uses a plugin architecture. Install the plugins you need for your editor. Here are the most common ones: 
npm install @yoopta/paragraph @yoopta/headings @yoopta/lists @yoopta/blockquote

​
Available plugins

Paragraph

Basic text paragraphs

Headings

H1, H2, H3 headings

Lists

Bulleted, numbered, and todo lists

Blockquote

Block quotes

Code

Code blocks with syntax highlighting

Image

Images with optimization

Video

Video embeds

Embed

Generic embeds (Figma, Twitter, etc.)

File

File attachments

Table

Tables with headers

Accordion

Collapsible sections

Tabs

Tabbed content panels

Steps

Step-by-step instructions

Callout

Callout/alert boxes

Divider

Visual dividers

Link

Inline links

Mention

@mentions

Carousel

Image carousels

Table of Contents

Auto-generated TOC

Emoji

Emoji picker

​
Install text formatting marks

Add text formatting capabilities like bold, italic, and underline: 
npm install @yoopta/marks
The @yoopta/marks package includes: Bold (Cmd/Ctrl+B), Italic (Cmd/Ctrl+I), Underline (Cmd/Ctrl+U), Strike (Cmd/Ctrl+Shift+S), CodeMark (Cmd/Ctrl+E), and Highlight.

​
Install UI components (optional)

For a complete editing experience with toolbars and menus, install the UI components package: 
npm install @yoopta/ui
This package includes:
  • FloatingToolbar - Formatting toolbar that appears on text selection
  • SlashCommandMenu - Type / to insert blocks
  • FloatingBlockActions - Plus button and drag handle for blocks
  • BlockOptions - Block settings menu
  • SelectionBox - Multi-block selection
  • BlockDndContext & SortableBlock - Drag and drop support

​
Install theme (optional)

Yoopta Editor is headless by default. For pre-styled block UI, install a theme package: 
npm install @yoopta/themes-shadcn
The shadcn theme is production-ready. A Material Design theme (@yoopta/themes-material) is currently in progress.

​
Install collaboration (optional)

For real-time collaborative editing with Yjs: 
npm install @yoopta/collaboration

​
Minimal installation

The absolute minimum to get started: 
npm install slate slate-react slate-dom @yoopta/editor @yoopta/paragraph
For a full-featured editor experience: 
npm install slate slate-react slate-dom @yoopta/editor @yoopta/paragraph @yoopta/headings @yoopta/lists @yoopta/blockquote @yoopta/code @yoopta/image @yoopta/marks @yoopta/ui @yoopta/themes-shadcn

​
Verify installation

After installation, verify that all packages are installed correctly: 
npm list @yoopta/editor
You should see @yoopta/[email protected] (or later) in the output.

​
Next steps

Quick start

Build your first editor in under 5 minutes

Configuration

Learn how to configure plugins and customize your editor
Make sure you’re using React 18.2.0 or higher. Yoopta Editor uses React hooks and concurrent features that require React 18+.

Build docs developers (and LLMs) love

Get started for freeTalk to us