Skip to main content

​
Installation

First, install the required dependencies: 
npm install slate slate-react slate-dom @yoopta/editor @yoopta/paragraph
slate slate-react slate-dom are peer dependencies required by Yoopta Editor.

​
Basic Setup

Create a simple editor component. Plugins, marks and initialValue are passed to createYooptaEditor. 
import { useMemo, useEffect } 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 (
    <div>
      <YooptaEditor
        editor={editor}
        onChange={(value) => console.log(value)}
        placeholder="Type something..."
      />
    </div>
  );
}

​
Adding More Plugins

Install additional plugins for richer content. All available plugins: 
npm install @yoopta/paragraph @yoopta/headings @yoopta/blockquote @yoopta/lists @yoopta/code @yoopta/image @yoopta/video @yoopta/embed @yoopta/file @yoopta/callout @yoopta/divider @yoopta/accordion @yoopta/table @yoopta/tabs @yoopta/steps @yoopta/link @yoopta/mention @yoopta/carousel @yoopta/table-of-contents
Pass the plugins you need 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';
// Add more: Image, Video, Embed, File, Callout, Divider, Accordion, Table, Tabs, Steps, Link, Mention, Carousel, TableOfContents

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

const editor = useMemo(() => createYooptaEditor({ plugins, marks }), []);
See Plugins and the plugin pages for each block type’s API and usage.

​
Adding Themes

Plugins are headless by default. To get styled block UI (Callout, Code, Image, etc.), use a theme package. @yoopta/themes-shadcn is production ready; @yoopta/themes-material is in progress. 
npm install @yoopta/themes-shadcn
Option 1: Apply theme to all plugins — Wrap your plugin array with applyTheme() so every supported plugin gets the theme’s styled elements: 
import { applyTheme } from '@yoopta/themes-shadcn';
import Paragraph from '@yoopta/paragraph';
import Blockquote from '@yoopta/blockquote';
import { HeadingOne, HeadingTwo, HeadingThree } from '@yoopta/headings';
import Code from '@yoopta/code';

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

const editor = useMemo(() => createYooptaEditor({ plugins, marks }), []);
Option 2: Apply theme to a single plugin — Use the theme’s UI for one plugin and keep the rest headless: 
import Callout from '@yoopta/callout';
import { CalloutUI } from '@yoopta/themes-shadcn/callout';

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

const plugins = [Paragraph, CalloutWithUI /* ... */];
See Themes for the full concept and per-plugin UI exports.

​
Adding UI Components

Add toolbar and slash menu as children of YooptaEditor. Install @yoopta/ui: 
npm install @yoopta/ui

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

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

  return (
    <div>
      <YooptaEditor
        editor={editor}
        onChange={(value) => console.log(value)}
        placeholder="Type / to open menu...">
        <FloatingToolbar />
        <FloatingBlockActions />
        <SlashCommandMenu />
      </YooptaEditor>
    </div>
  );
}
See UI overview for the compound component structure (e.g. FloatingToolbar.Content).

​
Adding Marks

Marks provide text formatting (bold, italic, etc.). Pass them to createYooptaEditor: 
import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';

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

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

​
Full Example

import { useMemo, useEffect } 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 }), []);

  const onChange = (value) => {
    // Save to database, localStorage, etc.
    console.log(value);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <YooptaEditor
        editor={editor}
        onChange={onChange}
        placeholder="Type / to open menu..."
        autoFocus>
        <FloatingToolbar />
        <FloatingBlockActions />
        <SlashCommandMenu />
      </YooptaEditor>
    </div>
  );
}
Here’s a complete editor with plugins, marks, theme, and UI:

​
Next Steps

Explore Plugins

Learn about all available plugins

Editor Instance

Control editor programmatically

View Examples

See more complex examples
Check out our live examples to see what’s possible with Yoopta Editor!