{"name":"BlockNote: A Block-Based React Rich Text Editor (Notion Style)","description":"BlockNote is an open-source, block-based React rich text editor, designed to offer a Notion-style editing experience. Built on Prosemirror and Tiptap, it provides a highly extensible and feature-rich solution for integrating modern text editing into web applications. With capabilities like real-time collaboration and intuitive UI elements, BlockNote simplifies the development of sophisticated content creation tools.","github":"https://github.com/TypeCellOS/BlockNote","url":"https://osrepos.com/repo/typecellos-blocknote","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/typecellos-blocknote","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/typecellos-blocknote.md","json":"https://osrepos.com/repo/typecellos-blocknote.json","topics":["React","TypeScript","Rich Text Editor","Block-Based Editor","Notion Style","Prosemirror","Tiptap","WYSIWYG"],"keywords":["React","TypeScript","Rich Text Editor","Block-Based Editor","Notion Style","Prosemirror","Tiptap","WYSIWYG"],"stars":null,"summary":"BlockNote is an open-source, block-based React rich text editor, designed to offer a Notion-style editing experience. Built on Prosemirror and Tiptap, it provides a highly extensible and feature-rich solution for integrating modern text editing into web applications. With capabilities like real-time collaboration and intuitive UI elements, BlockNote simplifies the development of sophisticated content creation tools.","content":"## Introdução\nBlockNote is an open-source, block-based React rich text editor that provides a Notion-style editing experience. It is built upon the powerful foundations of Prosemirror and Tiptap, offering a robust and extensible solution for developers. Designed to easily integrate a modern text editing experience into any application, BlockNote comes with a fully styled UI, making it ready to use out-of-the-box.\n\n## Instalação\nTo get started with BlockNote, you can install the necessary packages using npm or yarn. The `@blocknote/react` package provides the core React components, while `@blocknote/mantine` offers a styled UI.\n\ntypescript\nimport { useCreateBlockNote } from \"@blocknote/react\";\nimport { BlockNoteView } from \"@blocknote/mantine\";\nimport \"@blocknote/core/fonts/inter.css\";\nimport \"@blocknote/mantine/style.css\";\n\nfunction App() {\n  const editor = useCreateBlockNote();\n\n  return <BlockNoteView editor={editor} />;\n}\n\n\n## Exemplos\nBlockNote offers a [live demo](https://www.blocknotejs.org) and various [examples](https://www.blocknotejs.org/examples) to showcase its capabilities. You can explore them on the official website. The following React code snippet demonstrates how simple it is to integrate BlockNote into your application:\n\ntypescript\nimport { useCreateBlockNote } from \"@blocknote/react\";\nimport { BlockNoteView } from \"@blocknote/mantine\";\nimport \"@blocknote/core/fonts/inter.css\";\nimport \"@blocknote/mantine/style.css\";\n\nfunction App() {\n  const editor = useCreateBlockNote();\n\n  return <BlockNoteView editor={editor} />;\n}\n\n\n## Porquê usar\nBlockNote provides a comprehensive set of features designed to deliver a high-quality, block-based editor experience:\n\n*   **Animations:** Smooth and engaging visual feedback for user interactions.\n*   **Helpful placeholders:** Intuitive prompts to guide users in content creation.\n*   **Drag and drop blocks:** Effortless rearrangement of content blocks.\n*   **Nesting / indentation:** Organize content hierarchically using tab and shift+tab.\n*   **Slash (/) menu:** Quick access to various block types and commands.\n*   **Format menu:** Contextual formatting options for selected text.\n*   **Real-time collaboration:** Built-in support for collaborative editing experiences, powered by Yjs.\n\n## Links\nFor more information and to get started with BlockNote, refer to the official resources:\n\n*   [Homepage](https://www.blocknotejs.org)\n*   [Documentation](https://www.blocknotejs.org/docs)\n*   [Quickstart](https://www.blocknotejs.org/docs/getting-started)\n*   [Examples](https://www.blocknotejs.org/examples)\n*   [Discord Community](https://discord.gg/Qc2QTTH5dF)","metrics":{"detailViews":10,"githubClicks":12},"dates":{"published":null,"modified":"2025-12-19T00:00:49.000Z"}}