<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=453627&theme=ligh
Yoopta-Editor is a free, open-source rich-text editor built for React apps. It’s packed with features that let you build an editor as powerful and user-friendly as Notion, Craft, Coda, Medium etc.
With Yoopta-Editor, you can customize everything to fit exactly what you need. Want to tweak the look, add cool features, or craft a completely custom user interface? No problem. Yoopta-Editor gives you the flexibility to do it all, making it easy to create the perfect tool for your project. All of this is customizable, extensible, and easy to set up!
Core
Plugins
Tools
Marks
First, install the peer dependencies and the Yoopta core package with at least one plugin
## slate, slate-react, react, react-dom - peer dependencies
## @yoopta/editor - core package
yarn add slate slate-react @yoopta/editor @yoopta/paragraph
# or
npm install slate slate-react @yoopta/editor @yoopta/paragraph
Import from core package @yoopta/editor Editor Component and function to create editor instance
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
const plugins = [...];
export default function Editor() {
const editor = useMemo(() => createYooptaEditor(), []);
return (
<div>
<YooptaEditor
editor={editor}
plugins={plugins}
/>
</div>
);
}
Available props for YooptaEditor components
type YooptaEditor = {
/* editor instance */
editor: YooEditor;
/* list of plugins */
plugins: YooptaPlugin[];
/* list of marks */
marks?: YooptaMark<any>[];
/* Value. [Default] - undefined */
value?: YooptaContentValue;
/* autoFocus. [Default] - true */
autoFocus?: boolean;
/* className */
className?: string;
/* These props define the area for the selection box.
Good practice - passing parent element.
[Default] - document */
selectionBoxRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null> | false;
children?: React.ReactNode;
/* Props for tools. You can get access to any passed tools using `useTools` hook from @yoopta/editor */
tools?: Partial<Tools>;
placeholder?: string;
readOnly?: boolean;
/* Width. [Default] - 450px */
width?: number | string;
};
Here is list of available plugins
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';
import Blockquote from '@yoopta/blockquote';
const plugins = [Paragraph, Blockquote];
export default function Editor() {
const editor = useMemo(() => createYooptaEditor(), []);
return (
<div>
<YooptaEditor
editor={editor}
placeholder="Type text.."
// here we go
plugins={plugins}
/>
</div>
);
}
Yoopta-Editor provides useful tools that can help you when working with the editor
Here is a list of available tools
// IMPORT TOOLS
import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';
import ActionMenu, { DefaultActionMenuRender } from '@yoopta/action-menu-list';
import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';
// Tools should be defined outside component
const TOOLS = {
Toolbar: {
tool: Toolbar,
render: DefaultToolbarRender,
},
ActionMenu: {
tool: Toolbar,
render: DefaultActionMenuRender,
},
LinkTool: {
tool: LinkTool,
render: DefaultLinkToolRender,
},
};
export default function Editor() {
const editor = useMemo(() => createYooptaEditor(), []);
return (
<div>
<YooptaEditor
editor={editor}
plugins={plugins}
placeholder="Type text.."
// here we go
tools={TOOLS}
/>
</div>
);
}
Marks are simple text formats
Here is a list of available marks from @yoopta/marks package
// IMPORT MARKS
import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';
const MARKS = [Bold, Italic, CodeMark, Underline, Strike, Highlight];
export default function Editor() {
const editor = useMemo(() => createYooptaEditor(), []);
return (
<div>
<YooptaEditor
editor={editor}
placeholder="Type text.."
plugins={plugins}
tools={TOOLS}
// here we go
marks={MARKS}
/>
</div>
);
}
Find below useful examples of utilising the Yoopta-Editor in your projects. These examples will help you get started quickly and show you how easy it is to integrate and customize the editor to your needs.
Okay, let's go!
If you find Yoopta-Editor useful and valuable for your projects, I kindly ask you to show your support by giving us a ⭐️ star on GitHub. Your appreciation means a lot to us and helps us grow and continue improving the editor for the community. 💙💙💙
Yoopta-Editor is released under the MIT License. Feel free to use and modify it for your projects.
If you have any questions or need assistance raise an issue in the GitHub repository. I will be happy to help you.
Let's create powerful and engaging editing experiences together with Yoopta-Editor!
If you're ready to support Yoopta-Editor, here's how you can do it:
FAQs
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=453627&theme=ligh
We found that yoopta demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.