Yoopta-Editor - is an open source notion-like editor π₯
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 plugins from library:
<YooptaEditor />
and<YooptaRender />
.
<YooptaEditor />
- it's for building beautiful content
<YooptaRender />
- 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 yoopta-editor
or
npm install yoopta-editor
yarn add react react-dom slate slate-react
or
npm install react react-dom slate slate-react
import { YooptaEditor } from '@yoopta/editor';
import { useState } from 'react';
import 'yoopta-editor/dist/index.css';
function App() {
const [editorValue, setEditorValue] = useState([]);
const onChange = (data) => setEditorValue(data);
return (
<div>
<YooptaEditor value={editorValue} onChange={onChange} />
</div>
);
}
β Yoopta-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?"
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
π 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 π
- Tapflow - The perfect tool for building and selling online courses
- Equalize.team
- Yopage.co - blogging platform
MIT LICENSE