> ## 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.

# Quickstart

> Install Yoopta Editor and build your first editor in 5 minutes

## Prerequisites

* **Node.js** 18+
* **React** 18+

## Install

<CodeGroup>
  ```bash npm theme={null}
  npm install slate slate-react slate-dom @yoopta/editor @yoopta/paragraph @yoopta/marks
  ```

  ```bash yarn theme={null}
  yarn add slate slate-react slate-dom @yoopta/editor @yoopta/paragraph @yoopta/marks
  ```

  ```bash pnpm theme={null}
  pnpm add slate slate-react slate-dom @yoopta/editor @yoopta/paragraph @yoopta/marks
  ```
</CodeGroup>

<Note>`slate`, `slate-react`, and `slate-dom` are peer dependencies required by `@yoopta/editor`.</Note>

## Basic Editor

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

const plugins = [Paragraph];
const marks = [Bold, Italic];

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

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

If you see an editor with placeholder text, you're all set. Now let's make it useful.

## Add Plugins

Install the plugins you need:

```bash theme={null}
npm install @yoopta/headings @yoopta/blockquote @yoopta/lists @yoopta/code
```

Pass them to `createYooptaEditor`:

```jsx theme={null}
import Paragraph from '@yoopta/paragraph';
import Blockquote from '@yoopta/blockquote';
import { HeadingOne, HeadingTwo, HeadingThree } from '@yoopta/headings';
import { BulletedList, NumberedList, TodoList } from '@yoopta/lists';
import Code from '@yoopta/code';

const plugins = [
  Paragraph,
  HeadingOne,
  HeadingTwo,
  HeadingThree,
  Blockquote,
  BulletedList,
  NumberedList,
  TodoList,
  Code,
];
```

See [Available Plugins](/plugins/accordion) for the full list — image, video, table, accordion, embed, and more.

## Add a Theme

Plugins are headless by default. To get styled block UI, apply a theme:

```bash theme={null}
npm install @yoopta/themes-shadcn
```

**Apply to all plugins:**

```jsx theme={null}
import { applyTheme } from '@yoopta/themes-shadcn';

const plugins = applyTheme([Paragraph, HeadingOne, HeadingTwo, Blockquote, Code]);
```

**Or apply to a single plugin:**

```jsx theme={null}
import Callout from '@yoopta/callout';
import { CalloutUI } from '@yoopta/themes-shadcn/callout';

const CalloutWithUI = Callout.extend({ elements: CalloutUI });
```

See [Themes](/core/themes) for all available theme exports.

## Add UI Components

Toolbar, slash menu, and block actions are provided by `@yoopta/ui`. Add them as **children** of `YooptaEditor`:

```bash theme={null}
npm install @yoopta/ui
```

```jsx theme={null}
import { FloatingToolbar, FloatingBlockActions, SlashCommandMenu } from '@yoopta/ui';

<YooptaEditor editor={editor} placeholder="Type / to open menu...">
  <FloatingToolbar />
  <FloatingBlockActions />
  <SlashCommandMenu />
</YooptaEditor>
```

See [UI Components](/ui/overview) for all available components and customization.

## Add Marks

Marks handle text formatting. All available marks:

```jsx theme={null}
import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';

const marks = [Bold, Italic, CodeMark, Underline, Strike, Highlight];
```

## Full Example

Everything together — plugins, theme, marks, and UI:

```jsx theme={null}
import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';
import Blockquote from '@yoopta/blockquote';
import { HeadingOne, HeadingTwo, HeadingThree } from '@yoopta/headings';
import { BulletedList, NumberedList } from '@yoopta/lists';
import Code from '@yoopta/code';
import { FloatingToolbar, FloatingBlockActions, SlashCommandMenu } from '@yoopta/ui';
import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';
import { applyTheme } from '@yoopta/themes-shadcn';

const plugins = applyTheme([
  Paragraph,
  HeadingOne,
  HeadingTwo,
  HeadingThree,
  Blockquote,
  BulletedList,
  NumberedList,
  Code,
]);

const marks = [Bold, Italic, CodeMark, Underline, Strike, Highlight];

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

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <YooptaEditor
        editor={editor}
        onChange={(value) => console.log(value)}
        placeholder="Type / to open menu..."
        autoFocus>
        <FloatingToolbar />
        <FloatingBlockActions />
        <SlashCommandMenu />
      </YooptaEditor>
    </div>
  );
}
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Core Concepts" icon="book" href="/core/editor">
    Understand blocks, elements, and the editor API
  </Card>

  <Card title="Explore Plugins" icon="puzzle-piece" href="/plugins/accordion">
    Browse all 20+ available plugins
  </Card>

  <Card title="UI Components" icon="palette" href="/ui/overview">
    Customize toolbar, menus, and block actions
  </Card>

  <Card title="Live Examples" icon="image" href="https://yoopta.dev/examples">
    See what's possible with Yoopta Editor
  </Card>
</CardGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Module not found: slate">
    Make sure you've installed all three Slate peer dependencies:

    ```bash theme={null}
    npm install slate slate-react slate-dom
    ```
  </Accordion>

  <Accordion title="TypeScript errors">
    Yoopta Editor ships its own type definitions. Make sure you're using TypeScript 4.8+ and that `@yoopta/editor` is properly installed.
  </Accordion>
</AccordionGroup>

<Note>
  Need help? Join our [Discord community](https://discord.gg/Dt8rhSTjsn) or check
  [GitHub Issues](https://github.com/Darginec05/Yoopta-Editor/issues).
</Note>