Yopta-Editor v1 π
Yopta-Editor - is an open source notion-like editor π₯
Full docs | Get started | API | FAQs | Examples
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 π
β 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?"
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
Donation.
Stripe link π
If you like this open source project you can support me usingUsed by
- Tapflow - The perfect tool for building and selling online courses
- Equalize.team
- Yopage.co - blogging platform
License
MIT LICENSE