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: 
import { useMemo, useState } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';

const plugins = [Paragraph];

export default function MyEditor() {
  const editor = useMemo(() => createYooptaEditor(), []);
  const [value, setValue] = useState();

  const onChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <div>
      <YooptaEditor
        editor={editor}
        plugins={plugins}
        value={value}
        onChange={onChange}
        placeholder="Type something..."
      />
    </div>
  );
}

​
Adding More Plugins

Install additional plugins for richer content: 
npm install @yoopta/blockquote @yoopta/headings @yoopta/lists @yoopta/code
Update your editor: 
import Paragraph from '@yoopta/paragraph';
import Blockquote from '@yoopta/blockquote';
import Headings from '@yoopta/headings';
import Lists from '@yoopta/lists';
import Code from '@yoopta/code';

const plugins = [
  Paragraph,
  Headings.HeadingOne,
  Headings.HeadingTwo,
  Headings.HeadingThree,
  Blockquote,
  Lists.BulletedList,
  Lists.NumberedList,
  Code,
];

export default function MyEditor() {
  // ... rest of the code
}

​
Adding UI Components

UI components enhance the editor with toolbars and action menus. All components are available from @yoopta/ui: 
npm install @yoopta/ui

import { Toolbar, useToolbar } from '@yoopta/ui';
import { ActionMenuList, useActionMenuList } from '@yoopta/ui';

// Use hooks to integrate UI components
export default function MyEditor() {
  const editor = useMemo(() => createYooptaEditor(), []);
  const [value, setValue] = useState();
  const { isOpen: isToolbarOpen, getRootProps: getToolbarProps } = useToolbar();
  const { isOpen: isActionMenuOpen, getRootProps: getActionMenuProps } = useActionMenuList();

  return (
    <div>
      {isToolbarOpen && (
        <Toolbar {...getToolbarProps()} />
      )}
      {isActionMenuOpen && (
        <ActionMenuList {...getActionMenuProps()} />
      )}
      <YooptaEditor
        editor={editor}
        plugins={plugins}
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

​
Adding Marks

import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';

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

export default function MyEditor() {
  // ... rest of the code

  return (
    <YooptaEditor
      editor={editor}
      plugins={plugins}
      value={value}
      onChange={setValue}
      marks={MARKS}
    />
  );
}

​
Full Example

import { useMemo, useState } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';
import Blockquote from '@yoopta/blockquote';
import Headings from '@yoopta/headings';
import Lists from '@yoopta/lists';
import Code from '@yoopta/code';
import { Toolbar, useToolbar, ActionMenuList, useActionMenuList } from '@yoopta/ui';
import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';

const plugins = [
  Paragraph,
  Headings.HeadingOne,
  Headings.HeadingTwo,
  Headings.HeadingThree,
  Blockquote,
  Lists.BulletedList,
  Lists.NumberedList,
  Code,
];

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

export default function MyEditor() {
  const editor = useMemo(() => createYooptaEditor(), []);
  const [value, setValue] = useState();
  const { isOpen: isToolbarOpen, getRootProps: getToolbarProps } = useToolbar();
  const { isOpen: isActionMenuOpen, getRootProps: getActionMenuProps } = useActionMenuList();

  const onChange = (newValue) => {
    setValue(newValue);
    // Save to database, localStorage, etc.
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      {isToolbarOpen && <Toolbar {...getToolbarProps()} />}
      {isActionMenuOpen && <ActionMenuList {...getActionMenuProps()} />}
      <YooptaEditor
        editor={editor}
        plugins={plugins}
        marks={MARKS}
        value={value}
        onChange={onChange}
        placeholder="Start typing..."
        autoFocus
      />
    </div>
  );
}
Here’s a complete editor with all the features:

​
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!