> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yoopta.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Learn about Yoopta Editor — a headless, plugin-based rich-text editor for React

## Why Yoopta?

I've integrated rich-text editors into products more times than I'd like to admit. Every time it was the same story: wrestling with complex APIs, fighting against opinionated UI that doesn't fit your product, hacking around limitations.

Yoopta was built to end that cycle. The idea is simple: give developers a **headless core** when they need full control, but also ship **20+ ready-made plugins**, **pre-built UI components** (toolbars, slash menus, block actions), and **theme presets** (shadcn, Material) — so you can launch a polished editing experience without building everything from scratch.

Whether you're building a simple blog editor, a Notion-like workspace, a CMS for landing pages, or even a full website builder — Yoopta gives you the primitives to get there.

If Yoopta saves you time, consider [starring the repo](https://github.com/Darginec05/Yoopta-Editor) or [sponsoring the project](https://github.com/sponsors/Darginec05). It keeps the project alive.

## How it works

Yoopta Editor is **headless** — the core package (`@yoopta/editor`) handles all content logic (blocks, elements, operations, history) but renders no UI. You get full control over appearance.

Don't want to build everything yourself? Yoopta also ships:

* **Themes** (`@yoopta/themes-shadcn`) — pre-styled components you can apply in one line with `applyTheme()`
* **UI components** (`@yoopta/ui`) — toolbar, slash command menu, block actions, and more
* **20+ plugins** — paragraph, headings, lists, tables, images, code, embeds, and more

Each block in the editor runs its own [Slate.js](https://docs.slatejs.org/) instance, which means blocks are isolated, performant, and independently extensible.

## Examples & Demos

See what you can build with Yoopta:

<CardGroup cols={2}>
  <Card title="Full Setup" icon="rocket" href="https://yoopta.dev/examples/full-setup">
    Complete editor with toolbar, slash menu, block actions, drag & drop, and mentions
  </Card>

  <Card title="CMS / Website Builder" icon="globe" href="https://yoopta.dev/examples/cms">
    Visual page builder with drag-and-drop blocks, sidebar settings, and live preview
  </Card>

  <Card title="Word Example" icon="file-word" href="https://yoopta.dev/examples/word-example">
    Microsoft Word-inspired editor with fixed toolbar, formatting, and export
  </Card>

  <Card title="Email Builder" icon="envelope" href="https://yoopta.dev/examples/email-builder">
    Email composition with templates, split-view editing, and email-safe export
  </Card>

  <Card title="README Editor" icon="markdown" href="https://yoopta.dev/examples/readme-editor">
    GitHub-flavored Markdown editor with live preview and download as README.md
  </Card>

  <Card title="Slack Chat" icon="comments" href="https://yoopta.dev/examples/slack-chat">
    Slack-style messaging with channel list, rich text composer, and mentions
  </Card>

  <Card title="Social Media Chat" icon="message" href="https://yoopta.dev/examples/social-media-chat">
    WhatsApp/Instagram-like chat with message bubbles, attachments, and reactions
  </Card>

  <Card title="Collaboration" icon="users" href="https://yoopta.dev/examples/collaboration">
    Real-time multi-user editing with Yjs, remote cursors, and presence awareness
  </Card>
</CardGroup>

All examples with source code are available in the [examples directory](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples).

## Quick Example

```jsx theme={null}
import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';
import { Bold, Italic } from '@yoopta/marks';
import { applyTheme } from '@yoopta/themes-shadcn';

const plugins = applyTheme([Paragraph]);
const marks = [Bold, Italic];

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor({ plugins, marks }), []);

  return (
    <YooptaEditor
      editor={editor}
      onChange={(value) => console.log(value)}
      placeholder="Type something..."
    />
  );
}
```

## Packages

Install only what you need:

| Category          | Packages                                                                                                                        | Description                                                                   |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| **Core**          | `@yoopta/editor`                                                                                                                | Headless editor engine (requires `slate`, `slate-react`, `slate-dom`)         |
| **UI**            | `@yoopta/ui`                                                                                                                    | Toolbar, ActionMenuList, SlashCommandMenu, BlockOptions, FloatingBlockActions |
| **Marks**         | `@yoopta/marks`                                                                                                                 | Bold, Italic, Underline, Strike, Code, Highlight                              |
| **Text**          | `@yoopta/paragraph`, `@yoopta/headings`, `@yoopta/blockquote`                                                                   | Basic text blocks                                                             |
| **Lists**         | `@yoopta/lists`                                                                                                                 | Bulleted, numbered, and todo lists                                            |
| **Media**         | `@yoopta/image`, `@yoopta/video`, `@yoopta/file`, `@yoopta/embed`                                                               | Media and embed blocks                                                        |
| **Layout**        | `@yoopta/table`, `@yoopta/accordion`, `@yoopta/tabs`, `@yoopta/steps`, `@yoopta/carousel`, `@yoopta/callout`, `@yoopta/divider` | Structured layout blocks                                                      |
| **Inline**        | `@yoopta/link`, `@yoopta/mention`, `@yoopta/emoji`, `@yoopta/math`                                                              | Inline elements                                                               |
| **Code**          | `@yoopta/code`                                                                                                                  | Code block with syntax highlighting                                           |
| **Math**          | `@yoopta/math`                                                                                                                  | Code block with syntax highlighting                                           |
| **Themes**        | `@yoopta/themes-shadcn`, `@yoopta/themes-material`                                                                              | Pre-styled plugin components                                                  |
| **Exports**       | `@yoopta/exports`                                                                                                               | HTML, Markdown, plain text, email serializers                                 |
| **Collaboration** | `@yoopta/collaboration`                                                                                                         | Real-time collaboration via Yjs                                               |

## Key Features

<CardGroup cols={2}>
  <Card title="Headless Architecture" icon="puzzle-piece">
    Full control over UI. Use your own components, apply a theme, or mix both.
  </Card>

  <Card title="Plugin System" icon="plug">
    20+ built-in plugins. Create custom ones or extend existing plugins with `.extend()`.
  </Card>

  <Card title="Nested Content" icon="code-branch">
    Inject plugins inside other plugins — lists inside callouts, code inside tabs, and more.
  </Card>

  <Card title="Drag & Drop" icon="hand-pointer">
    Reorder blocks, nest content, and drag elements with built-in DnD support.
  </Card>

  <Card title="Export Anywhere" icon="file-export">
    Serialize to HTML, Markdown, plain text, or email-safe HTML out of the box.
  </Card>

  <Card title="Beyond Editing" icon="globe">
    Build CMS dashboards, landing page builders, or full website builders — Yoopta provides the
    content primitives, you define the experience.
  </Card>

  <Card title="TypeScript First" icon="code">
    Full type safety across the editor, plugins, and all APIs.
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Install and build your first editor in 5 minutes
  </Card>

  <Card title="Core Concepts" icon="book" href="/core/editor">
    Deep dive into editor architecture
  </Card>

  <Card title="API Reference" icon="code" href="/api-reference/editor-props">
    Complete API documentation
  </Card>
</CardGroup>

## Community & Support

* **[Discord](https://discord.gg/Dt8rhSTjsn)** — Chat with the team and community
* **[GitHub Discussions](https://github.com/Darginec05/Yoopta-Editor/discussions)** — Ask questions and share ideas
* **[GitHub Issues](https://github.com/Darginec05/Yoopta-Editor/issues)** — Report bugs or request features
* **[Twitter](https://twitter.com/LebovskiYoo)** — Follow for updates

<Note>
  If Yoopta Editor is useful to you, please give it a star on
  [GitHub](https://github.com/Darginec05/Yoopta-Editor)!
</Note>