Yopta Editor

Notion-like editor with similar behaviour
Alternatives To Yopta Editor
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Slate27,1203,4999235 days ago686August 23, 2022595mitTypeScript
A completely customizable framework for building rich text editors. (Currently in beta.)
Tiptap19,1911363 days ago198September 20, 2022236mitTypeScript
The headless editor framework for web artisans.
Awesome Lowcode11,717
4 hours ago5cc0-1.0
Oni11,47713 years ago6April 02, 2017518mitTypeScript
Oni: Modern Modal Editing - powered by Neovim
React Page9,1861818 days ago304September 21, 20228mitTypeScript
Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids.
Tinacms8,8435613 days ago105September 21, 202284otherTypeScript
The Markdown CMS
H5 Dooring7,298
3 months ago29gpl-3.0JavaScript
H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.
Vditor6,33911177 hours ago310August 04, 202279mitTypeScript
♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
React Data Grid6,0594412063 hours ago1,017September 16, 2022157otherTypeScript
Feature-rich and customizable data grid React component
React Draft Wysiwyg6,0317863372 months ago131July 17, 2022695mitJavaScript
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
Alternatives To Yopta Editor
Select To Compare

Alternative Project Comparisons

Yopta-Editor v1 🎉

Yopta-Editor - is an open source notion-like editor 💥

Screen Shot 2023-01-25 at 16 04 29

Full docs | Get started | API | FAQs | Examples


  • 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


yarn add yopta-editor
npm install yopta-editor

Peer dependencies

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


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 (
      <YoptaEditor value={editorValue} onChange={onChange} />

Check out other DEMO's 👇

❗ Yopta-Editor is on BETA version now. The core functionality works, but you may encounter some bugs. I have big plans for the v2 version with a lot of cool features and improvements. Let's build together the best open source editor ever ☝
Read more about future plans "What's next Lebovski?"

📝 This WYSIWYG editor build on top of Slate JS framework
💙 SlateJS - is the best tool for building rich-text editors. It has beautiful design and great API


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

Used by



Popular Editor Projects
Popular Reactjs Projects
Popular Text Editors Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Wysiwyg Editor
Rich Text
Rich Text Editor