Skip to main content

​
Plugins Overview

Yoopta Editor uses a plugin architecture to extend functionality. Each plugin provides a specific block type that can be added to your editor.

​
Available Plugins

​
Content Plugins

Paragraph

Basic text content - the foundation of your content

Headings

H1, H2, and H3 heading levels for document structure

Blockquote

Highlighted quotes and citations

Callout

Themed callout boxes (info, warning, error, success)

​
List Plugins

Lists

Bulleted lists, numbered lists, and todo lists

​
Code Plugins

Code

Syntax-highlighted code blocks with 100+ languages

​
Media Plugins

Image

Image uploads with resizing and alignment

Video

Video embeds from YouTube, Vimeo, Loom, and more

Embed

Embed content from various platforms

​
Installation

All plugins are published as separate npm packages: 
npm install @yoopta/paragraph @yoopta/headings @yoopta/lists
# Install only the plugins you need

​
Basic Usage

Import and register plugins with your editor: 
import { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';
import { HeadingOne, HeadingTwo, HeadingThree } from '@yoopta/headings';
import Blockquote from '@yoopta/blockquote';

const plugins = [
  Paragraph,
  HeadingOne,
  HeadingTwo,
  HeadingThree,
  Blockquote,
];

const editor = createYooptaEditor({ plugins });

​
Plugin Structure

Each plugin provides:
  • Type: Unique identifier (e.g., "Paragraph", "HeadingOne")
  • Elements: Rendering components for the block
  • Options: Display settings and keyboard shortcuts
  • Commands: Programmatic API for manipulating blocks
  • Parsers: HTML, Markdown, and Email serialization
  • Events: Optional keyboard and interaction handlers

​
Shortcuts

Most plugins support keyboard shortcuts for quick insertion:
  • p or text → Paragraph
  • h1 or # → Heading 1
  • h2 or ## → Heading 2
  • h3 or ### → Heading 3
  • - → Bulleted list
  • 1. → Numbered list
  • [] → Todo list
  • > → Blockquote
  • < → Callout
  • ``` → Code block
Type / to open the slash command menu and search for any plugin.

​
Next Steps

Plugin API

Learn how to configure plugins

Custom Plugins

Build your own custom plugins

Build docs developers (and LLMs) love

Get started for freeTalk to us