Skip to main content

​
Prerequisites

Before installing Yoopta Editor, make sure you have:
  • Node.js version 14 or higher
  • React version 17.0.2 or higher
  • React DOM version 17.0.2 or higher

​
Package Manager

Yoopta Editor supports all major package managers:
bash npm install slate slate-react slate-dom @yoopta/editor

​
Package Categories

Yoopta Editor is organized into several package categories. Install only what you need:

​
Core Packages

​
Required: Core Editor

npm install slate slate-react slate-dom @yoopta/editor
  • slate & slate-react slate-dom - Peer dependencies (required)
  • @yoopta/editor - Core headless editor package

​
Optional: UI Components

npm install @yoopta/ui
Provides unstyled UI components:
  • Toolbar, ActionMenuList, SlashCommandMenu
  • BlockOptions, FloatingBlockActions
  • HighlightColorPicker, Portal, Overlay

​
Optional: Themes

# Shadcn UI theme (production ready)
npm install @yoopta/themes-shadcn

# Material Design theme (in development)
npm install @yoopta/themes-material

​
Plugin Packages

Install plugins based on the content types you need:

​
Text Plugins

npm install @yoopta/paragraph @yoopta/headings @yoopta/blockquote

​
List Plugins

npm install @yoopta/lists

​
Media Plugins

npm install @yoopta/image @yoopta/video @yoopta/file @yoopta/embed

​
Layout Plugins

npm install @yoopta/table @yoopta/accordion @yoopta/divider @yoopta/callout @yoopta/tabs @yoopta/steps @yoopta/carousel

​
Code Plugin

npm install @yoopta/code

npm install @yoopta/link

​
UI Components Package

Install UI components for editor interactions: 
npm install @yoopta/ui
Available Components:
  • Toolbar - Text formatting toolbar
  • ActionMenuList - Block insertion menu
  • SlashCommandMenu - Inline slash command menu
  • BlockOptions - Block action menu
  • FloatingBlockActions - Floating action buttons
  • HighlightColorPicker - Color picker component
  • Portal & Overlay - Utility components

​
Marks Package

Install marks for text formatting: 
npm install @yoopta/marks
Available Marks:
  • Bold, Italic, Underline, Strike
  • Code - Inline code
  • Highlight - Text highlighting with colors

​
Utility Packages

​
Exports Package

npm install @yoopta/exports
Export content to Markdown, HTML, Plain Text, and Email formats.

​
All-in-One Installation

Install everything at once: 
npm install slate slate-react slate-dom \
  @yoopta/editor \
  @yoopta/ui \
  @yoopta/paragraph @yoopta/headings @yoopta/blockquote \
  @yoopta/lists @yoopta/code @yoopta/table \
  @yoopta/image @yoopta/video @yoopta/file @yoopta/embed \
  @yoopta/accordion @yoopta/divider @yoopta/callout @yoopta/link \
  @yoopta/marks

​
Exports Package

For exporting content to different formats: 
npm install @yoopta/exports
This package provides functionality to export your editor content to:
  • Markdown
  • HTML
  • Plain text

​
TypeScript Support

Yoopta Editor is written in TypeScript and includes type definitions out of the box. No additional @types packages are needed.

​
Verification

Verify your installation by creating a simple editor: 
import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';

function App() {
  const editor = useMemo(() => createYooptaEditor(), []);
  const plugins = [Paragraph];

  return <YooptaEditor editor={editor} plugins={plugins} placeholder="Type something..." />;
}
If you see an empty editor with the placeholder text, you’re all set! 🎉

​
Next Steps

Getting Started

Build your first editor in 5 minutes

Core Concepts

Understand how Yoopta Editor works

​
Troubleshooting

Make sure you’ve installed both slate and slate-react:
npm install slate slate-react slate-dom
Ensure you’re using TypeScript 4.8 or higher and that @yoopta/editor is properly installed.
For more help, join our Discord community or check GitHub Issues.