Skip to main content

​
Prerequisites

  • Node.js 18+
  • React 18+

​
Install

npm install slate slate-react slate-dom @yoopta/editor @yoopta/paragraph @yoopta/marks
slate, slate-react, and slate-dom are peer dependencies required by @yoopta/editor.

​
Basic Editor

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: 
npm install @yoopta/headings @yoopta/blockquote @yoopta/lists @yoopta/code
Pass them to createYooptaEditor: 
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 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: 
npm install @yoopta/themes-shadcn
Apply to all plugins: 
import { applyTheme } from '@yoopta/themes-shadcn';

const plugins = applyTheme([Paragraph, HeadingOne, HeadingTwo, Blockquote, Code]);
Or apply to a single plugin: 
import Callout from '@yoopta/callout';
import { CalloutUI } from '@yoopta/themes-shadcn/callout';

const CalloutWithUI = Callout.extend({ elements: CalloutUI });
See 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: 
npm install @yoopta/ui

import { FloatingToolbar, FloatingBlockActions, SlashCommandMenu } from '@yoopta/ui';

<YooptaEditor editor={editor} placeholder="Type / to open menu...">
  <FloatingToolbar />
  <FloatingBlockActions />
  <SlashCommandMenu />
</YooptaEditor>
See UI Components for all available components and customization.

​
Add Marks

Marks handle text formatting. All available marks: 
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: 
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

Core Concepts

Understand blocks, elements, and the editor API

Explore Plugins

Browse all 20+ available plugins

UI Components

Customize toolbar, menus, and block actions

Live Examples

See what’s possible with Yoopta Editor

​
Troubleshooting

Make sure you’ve installed all three Slate peer dependencies:
npm install slate slate-react slate-dom
Yoopta Editor ships its own type definitions. Make sure you’re using TypeScript 4.8+ and that @yoopta/editor is properly installed.
Need help? Join our Discord community or check GitHub Issues.