Quickstart

Get started with Yoopta Editor in 5 minutes

Installation

First, install the required dependencies:

npm

npm install slate slate-react @yoopta/editor @yoopta/paragraph

slate and slate-react 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

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 Tools

Tools enhance the editor with UI elements like toolbars and action menus:

npm

npm install @yoopta/toolbar @yoopta/action-menu-list

import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';
import ActionMenu, { DefaultActionMenuRender } from '@yoopta/action-menu-list';

// Define tools outside the component
const TOOLS = {
  Toolbar: {
    tool: Toolbar,
    render: DefaultToolbarRender,
  },
  ActionMenu: {
    tool: ActionMenu,
    render: DefaultActionMenuRender,
  },
};

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

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

Adding Marks

Marks provide text formatting options:

npm

npm install @yoopta/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}
      tools={TOOLS}
      marks={MARKS}
    />
  );
}

Full Example

Here’s a complete editor with all the features:

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, { DefaultToolbarRender } from '@yoopta/toolbar';
import ActionMenu, { DefaultActionMenuRender } from '@yoopta/action-menu-list';
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 TOOLS = {
  Toolbar: {
    tool: Toolbar,
    render: DefaultToolbarRender,
  },
  ActionMenu: {
    tool: ActionMenu,
    render: DefaultActionMenuRender,
  },
};

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

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

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

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <YooptaEditor
        editor={editor}
        plugins={plugins}
        tools={TOOLS}
        marks={MARKS}
        value={value}
        onChange={onChange}
        placeholder="Start typing..."
        autoFocus
      />
    </div>
  );
}

Next Steps

Explore Plugins

Learn about all available plugins

Configure Tools

Customize toolbar and action menus

Editor Instance

Control editor programmatically

View Examples

See more complex examples

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