Features

• Triggering by "/" to show list of elements and search needed element by typing
• Drag and drop beetween elements
• Redo/Undo your changes (Ctrl-Z/Ctrl-V)
• Offline ready mode
• Shortcuts
• A cool representation of the data in JSON format, so you can easily save the content data to the database and validate You can import two components from library: <YoptaEditor /> and <YoptaRender />. <YoptaEditor /> - it's for building beautiful content <YoptaRender /> - it's just for rendering from your saved data, without any editor tools and libraries, so it make you page loading faster
• Custom styling ...and other

Install

yarn add yopta-editor
or
npm install yopta-editor

Peer dependencies

yarn add react react-dom slate slate-react
or
npm install react react-dom slate slate-react

Quickstart

import { YoptaEditor } from 'yopta-editor';
import { useState } from 'react';

import 'yopta-editor/dist/index.css';

function App() {
  const [editorValue, setEditorValue] = useState([]);

  const onChange = (data) => setEditorValue(data);

  return (
    <div>
      <YoptaEditor value={editorValue} onChange={onChange} />
    </div>
  );
}

Check out other DEMO's 👇

• Basic usage
• Offline mode
• Working with media
• Just rendering
• Custom styling

Donation.

If you like this open source project you can support me using Stripe link 💙

Used by

• Tapflow - The perfect tool for building and selling online courses
• Equalize.team
• Yopage.co - blogging platform

License

MIT LICENSE